CSS3 Upprepande gradienter [CSS3 Tips]

Det finns många CSS3-funktioner som förändrar hur vi dekorerar en webbplats, varav en är CSS3 Gradients. Före CSS3 behöver vi definitivt bilder för att skapa gradienteffekten; nu kan vi leverera samma (och bättre) effekter genom att bara använda CSS

I våra tidigare inlägg har vi diskuterat två typer av gradienter som kan uppnås med CSS3:

• Radial och
• Linjära gradienter.

Den här gången ska vi titta på deras syskon: upprepande gradienter.

Grundläggande upprepning

Upprepande gradienter är i huvudsak en förlängning. Syntaxen liknar hur vi definierar radiala och linjära gradienter, bara det som namnet antyder, det kommer också att upprepa färgerna i en angiven riktning. För att upprepa linjära gradienter kan vi använda denna funktion: upprepande-linjär-gradient, medan vi upprepar radiella eller elliptiska gradienter använder vi denna funktion: upprepa-radial-gradient.

 / * Linjär * / .gradient bakgrund: repeating-linear-gradient (0deg, # f9f9f9, #cccccc 20px);  / * Radial * / .gradient bakgrund: repeating-radial-gradient (50% 50%, cirkel, # f9f9f9, #cccccc 20px);  

Det finns ingen stor skillnad för resten på koden, förutom för färgrepetition. Nedan är en enkel illustration för att beskriva hur denna färgrepetition fungerar.

Även om bilden ovan bara illustrerar för upprepande linjära gradienter, gäller grundidén också för radiella gradienter, där färgerna kommer att upprepas oändligt, i detta fall i vilken riktning som helst. Följ länken nedan för att se demoen.

• Visa demo

I nästa avsnitt visar vi hur vi kan använda CSS3 Repeating Gradients i reella exempel.

Exempel: Skapa mönster

Det vanligaste genomförandet av Upprepande gradienter är att skapa bakgrundsmönster. I det här exemplet kommer vi att skapa enkla vertikala randmönster.

 .gradient bakgrund: repeterande-linjär gradient (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);  

Lägg märke till hur vi definierar två olika färger - # f9f9f9 och #CCCCCC - på samma plats, 20px. Detta exempel kommer att skärpa skillnaden mellan dessa två färger och eliminera fuzziness.

För att rikta orienteringen ändrar vi helt enkelt vinkeln - 90deg kommer att styra den horisontellt medan 45deg kommer att styra den diagonalt och så vidare.

• Visa demo

Exempel: Skapa papper

I det här andra exemplet kommer vi att skapa en papperslinje som du ofta ser i en anteckningsbok. För att skapa denna effekt behöver vi bara en div, inga bilder, bara CSS.

 .gradient bredd: auto; höjd: 500px; marginal: 0 50px; bakgrund: -webkit-repeating-linear-gradient (-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px); bakgrund: -moz-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); bakgrund: -å-upprepande-linjär gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); bakgrund: repeterande-linjär gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); bakgrundsstorlek: 100% 21px;  

Observera att vi också lagt till CSS3 background-storlek egenskap för att ange storleken på bakgrundsbilder för 100%, 20px. Även om CSS3 Gradients visar "färger", kategoriseras den faktiskt som bild, inte färg.

Nästa kommer vi att använda :innan pseudo-elementet för att lägga till en rand på vänster sida av papperet.

 .gradient: före innehåll: ""; display: inline-block; höjd: 500px; bredd: 4px; gräns vänster: 4px dubbel # FCA1A1; position: relativ; vänster: 30px;  

Och vi är klara, det är verkligen enkelt rätt? Vi kan nu se dem allt i funktion från länkarna nedan.

• Visa demo
• Hämta källa

Ytterligare resurser

• Webkit CSS3 Gradients
• CSS3-gradienter hos Microsoft Developer Network