CSS3 Gentagende gradienter [CSS3 Tips]

Der er mange CSS3-funktioner, der ændrer måden, vi udsmykker en hjemmeside på, hvoraf den ene er CSS3 Gradients. Forud for CSS3 har vi absolut brug for billeder for at skabe gradienteffekten; nu er vi i stand til at levere de samme (og bedre) effekter ved kun at bruge CSS

I vores tidligere indlæg har vi diskuteret to typer af gradienter, der kan opnås med CSS3:

• Radial og
• Lineære gradienter.

Denne gang vil vi se på deres søskende: gentagende gradienter.

Grundlæggende gentagelse

Gentagende gradienter er i det væsentlige en forlængelse. Syntaxen ligner, hvordan vi definerer radiale og lineære gradienter, kun det som navnet antyder, vil det også gentage farverne i en bestemt retning. For at gentage lineære gradienter kan vi bruge denne funktion: repeterende-lineær-gradient, mens vi gentager radielle eller elliptiske gradienter bruger vi denne funktion: gentage-radial-gradient.

 / * Lineær * / .gradient baggrund: gentagende-lineær gradient (0deg, # f9f9f9, #cccccc 20px);  / * Radial * / .gradient baggrund: repeating-radial-gradient (50% 50%, cirkel, # f9f9f9, #cccccc 20px);  

Der er ikke meget forskel for resten på koden, bortset fra farve gentagelse. Nedenfor er en enkel illustration til at beskrive, hvordan denne farvegengivelse fungerer.

Selv om billedet ovenfor kun illustrerer gentagelse af lineære gradienter, gælder grundidéen også for radiale gradienter, hvor farverne gentager uendeligt, i dette tilfælde i enhver retning. Følg linket herunder for at se demoen.

• Se Demo

I det næste afsnit vil vi vise dig, hvordan vi kan bruge CSS3 Repeat Gradients i reelle eksempler.

Eksempel: Oprettelse af mønstre

Den mest almindelige gennemførelse af Gentagende gradienter er at skabe baggrundsmønstre. I dette eksempel skal vi skabe enkle lodrette stripe mønstre.

 .gradient baggrund: gentagende-lineær gradient (0deg, # f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);  

Bemærk, hvordan vi definerer to forskellige farver - # f9f9f9 og #cccccc - på samme sted, 20px. Dette eksempel vil skarpe forskellen mellem disse to farver og eliminere uklarheden.

For at rette retningen ændrer vi vinklen - 90deg vil rette det horisontalt, mens 45deg vil lede det diagonalt og så videre.

• Se Demo

Eksempel: Oprettelse af papirlinje

I dette andet eksempel skal vi lave en papirlinje, som du ofte ser i en notesbog. For at skabe denne effekt behøver vi kun en div, ingen billeder, kun CSS.

 .gradient bredde: auto; højde: 500px; margen: 0 50px; baggrund: -webkit-gentagende-lineær-gradient (-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px); baggrund: -moz-gentagende-lineær gradient (-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px); baggrund: -o-gentagende-lineær gradient (-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px); baggrund: gentagende-lineær gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); baggrundsstørrelse: 100% 21px;  

Bemærk, at vi også tilføjede CSS3 baggrund-størrelse Egenskab for at angive størrelserne af baggrundsbilleder til 100%, 20px. Selvom CSS3 Gradients viser 'farver', er det faktisk kategoriseret som billede, ikke farve.

Dernæst vil vi bruge :Før pseudo-element at tilføje en stribe på venstre side af papiret.

 .gradient: før indhold: ""; display: inline-block; højde: 500px; bredde: 4px; grænse-venstre: 4px dobbelt # FCA1A1; stilling: relativ; venstre: 30px;  

Og vi er færdige, det er virkelig simpelt rigtigt? Vi kan nu se dem alle i aktion fra nedenstående links.

• Se Demo
• Download kilde

Yderligere ressourcer

• Webkit CSS3 Gradienter
• CSS3 Gradienter hos Microsoft Developer Network