CSS3 Gjentakende gradienter [CSS3 Tips]
Det er mange CSS3-funksjoner som endrer måten vi dekorerer et nettsted på, hvorav en er CSS3 Gradients. Før CSS3, trenger vi definitivt bilder for å skape gradienteffekten; nå er vi i stand til å levere de samme (og bedre) effektene ved bare å bruke CSS
I våre tidligere innlegg har vi diskutert to typer gradienter som kan oppnås med CSS3:
- Radial og
- Linjære gradienter.
Denne gangen skal vi se på søsken deres: gjentatte gradienter.
Grunnleggende gjentakelse
Gjentakende gradienter er egentlig en forlengelse. Syntaxen ligner på hvordan vi definerer radiale og lineære gradienter, bare det som navnet tilsier, vil det også gjenta fargene i en bestemt retning. For å gjenta lineære gradienter kan vi bruke denne funksjonen: gjentakende-lineær-gradient, mens du gjentar radial eller elliptiske gradienter bruker vi denne funksjonen: gjentagende-radial-gradient.
/ * Lineær * / .gradient bakgrunn: repeating-linear-gradient (0deg, # f9f9f9, #cccccc 20px); / * Radial * / .gradient bakgrunn: repeating-radial-gradient (50% 50%, sirkel, # f9f9f9, #cccccc 20px);
Det er ikke mye forskjell for resten på koden, bortsett fra fargeopprepning. Nedenfor er en enkel illustrasjon å beskrive hvordan denne fargerepetisjonen fungerer.
Selv om bildet ovenfor bare illustrerer for gjentagende lineære gradienter, gjelder grunnidéen også for radiale gradienter der fargene vil gjenta uendelig, i dette tilfellet i hvilken som helst retning. Følg linken under for å se demoen.
- Se demo
I neste avsnitt vil vi vise deg hvordan vi kan bruke CSS3 Repeat Gradients i ekte eksempler.
Eksempel: Opprette mønstre
Den vanligste implementeringen av Gjentakende gradienter er å skape bakgrunnsmønstre. I dette eksemplet skal vi lage enkle vertikale stripe mønstre.
.gradient bakgrunn: repeating-linear-gradient (0deg, # f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);
Legg merke til hvordan vi definerer to forskjellige farger - # f9f9f9 og #cccccc - på samme sted, 20px. Dette eksempelet vil skarpere forskjellen mellom disse to fargene og eliminere fuzziness.
For å rette retningen endrer vi vinkelen - 90deg vil lede den horisontalt mens 45deg vil lede den diagonalt og så videre.
- Se demo
Eksempel: Opprette papirlinje
I dette andre eksempelet skal vi lage en papirlinje som du ofte ser i en notatbok. For å opprette denne effekten trenger vi bare en div, ingen bilder, bare CSS.
.gradient bredde: auto; høyde: 500px; margin: 0 50px; bakgrunn: -webkit-repeating-linear-gradient (-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px); bakgrunn: -moz-repeating-linear-gradient (-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px); bakgrunn: -o-gjentakende-lineær-gradient (-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px); bakgrunn: repeterende-lineær gradient (-90deg, # f9f9f9, #f9f9f9 20px, #cccccc 21px); bakgrunnsstørrelse: 100% 21px;
Legg merke til at vi også lagt til CSS3 background-size Egenskap for å angi størrelsen på bakgrunnsbilder for 100%, 20px. Selv om CSS3 Gradients viser 'farger', er det faktisk kategorisert som bilde, ikke farge.
Deretter skal vi bruke :før pseudo-element å legge til en stripe på venstre side av papiret.
.gradient: før innhold: ""; display: inline-block; høyde: 500px; bredde: 4px; border-left: 4px double # FCA1A1; posisjon: relativ; igjen: 30px;
Og vi er ferdige, det er veldig enkelt riktig? Vi kan nå se dem alt i bruk fra linkene under.
- Se demo
- Last ned kilde
Ytterligere ressurser
- Webkit CSS3 Gradienter
- CSS3 Gradienter på Microsoft Developer Network
