Gradienți de repetare CSS3 [CSS3 Tips]
Există multe caracteristici CSS3 care schimbă modul în care decorăm un site web, dintre care unul este CSS3 Gradients. Înainte de CSS3, avem cu siguranță nevoie de imagini pentru a crea efectul de gradient; acum suntem capabili să oferim aceleași efecte (și mai bune) doar prin utilizarea CSS
În postările noastre anterioare, am discutat două tipuri de gradienți care pot fi obținute cu CSS3:
- Radial și
- Gradienți liniari.
De data aceasta ne vom uita în fratele lor: repetarea gradientilor.
Repetarea de bază
Repetarea Gradientilor este în esență o prelungire. Sintaxa este similară cu modul în care definim gradienții radiali și liniari, numai că, așa cum implică și numele, va repeta culorile într-o direcție specificată. Pentru a repeta gradientele liniare, putem folosi această funcție: repetitivă-liniar gradient, în timp ce pentru a repeta gradientele radiale sau eliptice folosim această funcție: repetarea-radial gradient.
/ * Linear * / .gradient fundal: repetare-gradient liniar (0deg, # f9f9f9, #cccccc 20px); / * Radial * / gradient fundal: repetare-gradient radial (50% 50%, cerc, # f9f9f9, #cccccc 20px);
Nu există nicio diferență pentru restul codului, cu excepția lui repetarea culorilor. Mai jos este o ilustrare simplă pentru a descrie modul în care funcționează această repetare a culorii.
Deși imaginea de mai sus ilustrează doar gradientele lineare repetate, ideea de bază se aplică și gradientelor radiale în care culorile se vor repeta infinit, în acest caz, în orice direcție. Urmați link-ul de mai jos pentru a vedea demo-ul.
- Vizualizați demonstrația
În următoarea secțiune, vă vom arăta cum putem folosi CSS3 Gradients Repeating în exemple reale.
Exemplu: Crearea de modele
Cea mai comună implementare a Repetarea Gradientilor este de a crea modele de fundal. În acest exemplu, vom crea modele simple de benzi verticale.
.gradient fundal: repetare-gradient liniar (0deg, #f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);
Observați cum definim două culori diferite - # f9f9f9 și #cccccc - în același loc, 20px. Acest exemplu va accentua diferența dintre aceste două culori și va elimina neclaritatea.
Pentru a direcționa orientarea, schimba pur și simplu unghiul - 90deg îl va direcționa orizontal în timp ce 45deg o va direcționa în diagonală și așa mai departe.
- Vizualizați demonstrația
Exemplu: Crearea Paperline
În acest al doilea exemplu, vom crea o hârtie pe care ați putea să o vedeți adesea într-un notebook. Pentru a crea acest efect, avem nevoie doar de un div, nici imagini, doar CSS.
.gradient lățime: auto; înălțime: 500px; margine: 0 50px; fundal: -webkit-repetare-gradient linear (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); fundal: -moz-repetare-gradient linear (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); fundal: -o-repetare-gradient linear (-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px); fundal: repetarea-gradient linear (-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px); dimensiunea fundalului: 100% 21px;
Observați că am adăugat și CSS3 background-size pentru a specifica dimensiunile imaginilor de fundal pentru 100%, 20px. Deși Gradienții CSS3 afișează "culori", este de fapt clasificat ca imagine, nu culoarea.
Apoi, vom folosi :inainte de pseudo-element de pentru a adăuga o banda în partea stângă a hârtiei.
.gradient: înainte de content: ""; afișare: inline-block; înălțime: 500px; lățime: 4px; frontieră-stânga: 4px dublă # FCA1A1; poziția: relativă; stânga: 30px;
Și am terminat, este foarte simplu, nu? Acum le vedem pe toți în acțiune de la link-urile de mai jos.
- Vizualizați demonstrația
- Descărcați sursa
Resurse suplimentare
- Webkit CSS3 Gradients
- Gradienți CSS3 la Rețeaua de dezvoltatori Microsoft
