CSS3 ponavljajući gradijenti [CSS3 savjeti]

Postoje mnoge značajke CSS3 koje mijenjaju način na koji dekoriramo web stranicu, od kojih je jedna CSS3 gradijenti. Prije CSS3, definitivno trebamo slike za stvaranje efekta gradijenta; sada smo u mogućnosti isporučiti iste (i bolje) učinke samo pomoću CSS-a

U prethodnim postovima raspravljali smo o dvije vrste gradijenta koji se mogu postići pomoću CSS3:

• Radijalno i
• Linearni gradijenti.

Ovaj put ćemo pogledati u njihovu sestru: ponavljajući gradijenti.

Osnovno ponavljanje

Ponavljajući gradijenti je u biti proširenje. Sintaksa je slična onoj u kojoj definiramo radijalne i linearne gradijente, samo što naziv implicira, također će ponoviti boje u određenom smjeru. Da bismo ponovili linearne gradijente, možemo koristiti ovu funkciju: ponavljajuća-linearni gradijent, dok za ponavljanje radijalnog ili eliptičnog gradijenta koristimo ovu funkciju: ponavljanje-radijalnim gradijentom.

 / * Linearni * / .gradient pozadina: ponavljajući-linearni gradijent (0deg, # f9f9f9, #cccccc 20px);  / * Radial * / .gradient pozadina: ponavljajući-radijalni gradijent (50% 50%, krug, # f9f9f9, #cccccc 20px);  

Nema puno razlike za ostatak koda, osim za ponavljanje boje. U nastavku je jednostavna ilustracija koja opisuje kako funkcionira ponavljanje boje.

Iako gornja slika samo ilustrira ponavljajuće linearne gradijente, osnovna ideja vrijedi i za radijalne gradijente u kojima će se boje beskonačno ponavljati, u ovom slučaju, u bilo kojem smjeru. Slijedite donji link da biste vidjeli demo.

• Prikaži demo

U sljedećem odjeljku pokazat ćemo vam kako možemo iskoristiti CSS3 Repeating Gradients u stvarnim primjerima.

Primjer: Izrada uzoraka

Najčešća primjena Ponavljajući gradijenti je stvaranje pozadinskih uzoraka. U ovom primjeru stvorit ćemo jednostavne uzorke vertikalne pruge.

 .gradijent pozadina: ponavljajuće-linearni gradijent (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);  

Primijetite kako definiramo dvije različite boje - # f9f9f9 i #cccccc - na istom mjestu, 20px. Ovaj primjer će izoštriti razliku između ove dvije boje i eliminirati nejasnoću.

Za usmjeravanje orijentacije jednostavno mijenjamo kut - 90deg će ga usmjeriti horizontalno 45deg će ga usmjeriti dijagonalno i tako dalje.

• Prikaži demo

Primjer: Stvaranje Paperline

U ovom drugom primjeru stvorit ćemo papirnatu liniju koju često možete vidjeti u bilježnici. Da bismo stvorili ovaj efekt, trebamo samo div, nema slika, samo CSS.

 .gradient width: auto; visina: 500px; marža: 0 50px; background: -webkit-ponavljajuće-linearno-gradijent (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); background: -moz-ponavljajuće-linearno-gradijent (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); pozadina: -o-ponavljajući-linearni gradijent (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); pozadina: ponavljajući-linearni gradijent (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); veličina pozadine: 100% 21px;  

Obavijest smo također dodali CSS3 Pozadina veličine za određivanje veličine pozadinskih slika za 100%, 20 piksela. Iako CSS3 gradijenti prikazuju 'boje', to je zapravo kategorizirano kao slika, ne boje.

Zatim ćemo koristiti :prije pseudo elemenata za dodavanje trake na lijevoj strani papira.

 .gradijent: prije content: ""; prikaz: inline-blok; visina: 500px; širina: 4px; granica lijevo: 4px dvostruko # FCA1A1; pozicija: relativna; lijevo: 30px;  

I završili smo, stvarno je jednostavno? Sada ih sve možemo vidjeti u akciji na donjim vezama.

• Prikaži demo
• Preuzimanje izvora

Daljnji resursi

• Webkit CSS3 gradijenti
• CSS3 gradijenti na Microsoft Developer Network