CSS3 ponavljajoči se gradienti [Nasveti CSS3]

Obstaja veliko funkcij CSS3, ki spremenijo način, kako okrasimo spletno stran, med katerimi je CSS3 Gradients. Pred CSS3 potrebujemo slike za ustvarjanje učinka gradienta; zdaj lahko dosežemo enake (in boljše) učinke samo s pomočjo CSS

V prejšnjih objavah smo obravnavali dve vrsti gradientov, ki jih lahko dosežemo s CSS3:

• Radialna in
• Linearni gradienti.

Tokrat bomo preučili njihovega brata / sestro: ponavljajoči se prelivi.

Osnovno ponavljanje

Ponavljajoči se prelivi je v bistvu podaljšanje. Sintaksa je podobna temu, kako definiramo radialni in linearni gradient, le da bo ime ponovilo tudi barve v določeni smeri. Za ponavljanje linearnih gradientov lahko uporabimo to funkcijo: ponavljajoči se linearni gradient, medtem ko za ponavljanje radialnih ali eliptičnih gradientov uporabljamo to funkcijo: ponavljajoč se radialni gradient.

 / * Linearna * / .gradient ozadje: ponavljajoči se linearni gradient (0deg, # f9f9f9, #cccccc 20px);  / * Radial * / .gradient ozadje: ponavljajoči se radialni gradient (50% 50%, krog, # f9f9f9, #cccccc 20px);  

Za ostale na kodi ni veliko razlike, razen za ponavljanje barv. Spodaj je preprosta ilustracija, ki opisuje, kako deluje to barvno ponavljanje.

Čeprav zgornja slika ponazarja le ponavljajoče se linearne gradiente, osnovna ideja velja tudi za radialne gradiente, v katerih se bodo barve neskončno ponavljale, v tem primeru v kateri koli smeri. Če si želite ogledati predstavitev, sledite spodnji povezavi.

• Prikaži predstavitev

V naslednjem razdelku vam bomo pokazali, kako lahko uporabimo CSS3 Repeating Gradients v realnih primerih.

Primer: Ustvarjanje vzorcev

Najpogostejša izvedba Ponavljajoči se prelivi je ustvariti vzorce ozadja. V tem primeru bomo ustvarili preproste navpične vzorce.

 .gradient ozadje: ponavljajoči se linearni gradient (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);  

Opazite, kako definiramo dve različni barvi - # f9f9f9 in #cccccc - na istem mestu, 20px. Ta primer bo izostril razliko med tema dvema barvama in odpravil nejasnost.

Za usmerjanje usmeritve preprosto spremenite kot - 90deg ga bo vodoravno usmeril 45deg ga usmerja diagonalno in tako naprej.

• Prikaži predstavitev

Primer: Ustvarjanje Paperline

V tem drugem primeru bomo ustvarili vrsto papirja, ki jo boste pogosto videli v zvezku. Da bi ustvarili ta učinek, potrebujemo samo a div, brez slik, samo CSS.

 .gradient width: auto; višina: 500px; marža: 0 50px; ozadje: -webkit-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); ozadje: -moz-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); ozadje: -o-ponavljajoče-linearno-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); ozadje: ponavljajoči se linearni gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); velikost ozadja: 100% 21px;  

Obvestilo smo dodali tudi CSS3 velikost ozadja lastnosti za določanje velikosti slik za ozadje 100%, 20 px. Čeprav CSS3 Gradienti prikazujejo »barve«, je dejansko kategorizirana kot slika, ne barve.

Nato bomo uporabili : prej psevdoelement Če želite na levo stran papirja dodati trak.

 .gradient: pred content: ""; prikaz: inline-block; višina: 500px; širina: 4px; meja levo: 4px dvojno # FCA1A1; položaj: relativna; levo: 30px;  

In končali smo, res je preprosto? Zdaj lahko vse vidimo v akciji s spodnjih povezav.

• Prikaži predstavitev
• Prenesi vir

Nadaljnji viri

• Gradient Webkit CSS3
• CSS3 Gradients na Microsoft Developer Network