Share
Någonsin undrat hur en viss effekt uppnåddes i en webbdesign, och efter att ha zoommat i flera klick upptäckte du att författaren lagt till flera subtila skuggor, gränser, gradienter, etc? I det förflutna uppnåddes detta enkelt genom att skära ut en bild och ställa in den som bakgrund av något element. Lyckligtvis kan vi med CSS3 få mycket mer flexibilitet. Nu, medan koden för en så enkel effekt kan vara lite tråkig, är det väl värt det, och det är vad vi ska granska i dagens snabba och snabba tips!
Sägare snarare denna skärmdump på Screenr.com?
Det är fantastiskt att någonting så enkelt kräver så mycket kod, men det är inte för grovt och kan enkelt abstraheras bort till ett fragment för framtida användning.
För att göra vårt projekt så snitt och klistra som möjligt arbetar vi bara med en tom div. Skapa en ny index.html-fil och klistra in i följande:
Därefter lägger vi till några grundläggande styling för kroppsdelen. Detta är bara för presentationen, och kan enkelt tas bort. Inom stilkoder i ditt rubrik lägger du till:
/ * Inget speciellt här. Bara duken. * / kropp bredd: 500px; marginal: 60px auto 0; bakgrund: # 666;
Nu ska vi skapa vår ruta, som ger bredd och höjd.
#box / * Bara en låda * / bredd: 500px; höjd: 500px;
Vi borde alla veta om CSS-rundade hörn nu. Låt oss fortsätta och genomföra det.
/ * Avrundade hörn * / -moz-gräns-radie: 3px; -webkit-gränsen-radien: 3px; gränsstråle: 3px;
Observera att vi även levererar den slutliga specifikationen, av "radieradien", förutom Mozilla och Webkits versioner.
Mozilla erbjuder en praktisk egenskap, kallad "-moz-gränsen - * - färger." Detta gör det möjligt för oss att sätta ett oändligt antal färger för en gräns. För att uppnå en subtil "dubbelgränsande" effekt, låt oss implementera den här egenskapen.
/ * Ange en gränsgräns och färg * / gräns: 2px solid vit; / * Flerfärgade gränsfärger i Gecko * / -moz-border-top-färger: # 292929 vit; -moz-border-right-colors: # 292929 vit; -moz-gräns-bottenfärger: # 292929 vit; -moz-gränsen-vänsterfärger: # 292929 vit;
Observera hur många färger vi levererar är desamma som gränslinjen som vi satt i början (2px). Placera inte kommatecken efter varje hex-värde. Jag gjorde det misstaget först!
Webkit stöder för närvarande inte gränssfärger, men det är möjligt att jag har fel. Om jag är, vänligen lämna en kommentar och låt mig veta! Hur som helst, för att efterlikna denna effekt så bra som möjligt i Safari och Chrome, använder vi rutaskugga.
/ * Kompensera för Webkit. Inte så bra, men fungerar. * / -webkit-box-skugga: 0 -1px 2px # 292929;
Observera att de angivna värdena refererar till X-offset, Y-offset, oskärpa och skuggfärg. Genom att passera -1px som Y-offset kan vi skjuta upp skuggan uppåt.
Det sista steget är att tillhandahålla en subtil bakgrundsgradient för vår ruta. Vi måste emellertid vara säkra på att ge en fastback-färg för webbläsare som inte stöder CSS-gradienter.
/ * Bakgrundsunderbar gradient, med fallback till fast färg * / bakgrund: # e3e3e3; bakgrund: -moz-linjär-gradient (topp, # a4a4a4, # e3e3e3); bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, från (# a4a4a4), till (# e3e3e3));
Tyvärr är Mozilla och Webkit inte helt överens om syntaxen för gradienter, vilket gör processen extra irriterande. Om det är för förvirrande kan du använda en ny tjänst som heter CSS3 Var god att automatiskt skapa varje webbläsares syntax; det är väldigt coolt!
Det är fantastiskt; tittar över vår sista bild, det är svårt att berätta vad vi faktiskt gjorde! Men det här är en bra sak; subtilitet är nyckeln till alla aspekter av design. Tack för att du läser / tittar på!
/ * Inget speciellt här. Bara duken. * / kropp bredd: 500px; marginal: 60px auto 0; bakgrund: # 666; #box / * Bara en låda * / bredd: 500px; höjd: 500px; / * Avrundade hörn * / -moz-gräns-radie: 3px; -webkit-gränsen-radien: 3px; gränsstråle: 3px; gräns: 2px solid vit; / * Flerfärgade gränsfärger i Gecko * / -moz-border-top-färger: # 292929 vit; -moz-border-right-colors: # 292929 vit; -moz-gräns-bottenfärger: # 292929 vit; -moz-gränsen-vänsterfärger: # 292929 vit; / * Kompensera för Webkit. Inte så bra, men fungerar. * / -webkit-box-skugga: 0 -1px 2px # 292929; / * Bakgrundsunderbar gradient, med fallback till fast färg * / bakgrund: # e3e3e3; bakgrund: -moz-linjär-gradient (topp, # a4a4a4, # e3e3e3); bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, från (# a4a4a4), till (# e3e3e3));
Accentsconagua