CSS3 atkārtojas gradienti [CSS3 padomi]

Ir daudzas CSS3 iezīmes, kas maina mājas lapas dekorēšanas veidu, no kurām viena ir CSS3 gradienti. Pirms CSS3, mums noteikti ir vajadzīgi attēli, lai radītu gradienta efektu; tagad mēs varam nodrošināt tādu pašu (un labāku) efektu, izmantojot tikai CSS

Iepriekšējos amatos mēs esam apsprieduši divu veidu gradientus, kurus var saņemt ar CSS3:

• Radiāli un
• Lineārie gradienti.

Šoreiz mēs apskatīsim viņu brāli: atkārtojas gradienti.

Pamata atkārtošana

Atkārtoti gradienti būtībā ir pagarinājums. Sintakse ir līdzīga tam, kā mēs definējam radiālos un lineāros gradientus, tikai to, kā norāda nosaukums, tā arī atkārto krāsas noteiktā virzienā. Lai atkārtotu lineāros gradientus, mēs varam izmantot šo funkciju: atkārtojas-lineārā gradienta, lai atkārtotu radiālos vai elipsveida gradientus, mēs izmantojam šo funkciju: atkārtots radiālais gradients.

 / * Linear * / .gradient fons: atkārtojoša lineārā gradienta (0deg, # f9f9f9, #cccccc 20px);  / * Radial * / .gradient fons: atkārtota radiālā gradienta (50% 50%, aplis, # f9f9f9, #cccccc 20px);  

Nav daudz atšķirības attiecībā uz pārējo kodu, izņemot krāsu atkārtošana. Zemāk ir vienkāršs piemērs, lai aprakstītu, kā darbojas šīs krāsas.

Lai gan iepriekš redzamais attēls ilustrē tikai atkārtojošos lineāros gradientus, pamatideja attiecas arī uz radiālajiem gradientiem, kuros krāsas atkārtojas bezgalīgi, šajā gadījumā jebkurā virzienā. Lai skatītu demonstrāciju, izpildiet tālāk redzamo saiti.

• Skatīt demonstrāciju

Nākamajā sadaļā mēs parādīsim, kā mēs varam izmantot CSS3 atkārtotus gradientus reālos piemēros.

Piemērs: Rakstu izveide

Visbiežāk īstenotā Atkārtoti gradienti ir izveidot fona modeļus. Šajā piemērā mēs izveidosim vienkāršus vertikālu svītru modeļus.

 .gradients fons: atkārtojoša lineārā gradienta (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);  

Ievērojiet, kā mēs definējam divas dažādas krāsas - # f9f9f9 un #cccccc - tajā pašā vietā, 20px. Šis piemērs palielinās atšķirību starp šīm divām krāsām un novērsīs izplūdumu.

Lai virzītu orientāciju, mēs vienkārši mainām leņķi - 90deg virzīs to horizontāli, kamēr 45deg virzīs to pa diagonāli un tā tālāk.

• Skatīt demonstrāciju

Piemērs: Paperline izveide

Šajā otrajā piemērā mēs izveidosim papīra līniju, ko jūs bieži varētu redzēt piezīmjdatorā. Lai izveidotu šo efektu, mums ir nepieciešams tikai div, nav attēlu, tikai CSS.

 .gradients platums: auto; augstums: 500px; starpība: 0 50px; fons: -webkit-atkārtojot lineāro gradientu (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); fons: -moz-atkārtojas-lineārs gradients (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); fons: -o-atkārtojas-lineārs gradients (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); fons: atkārtojošs lineārs gradients (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); fona izmērs: 100% 21px;  

Piezīme, mēs pievienojām arī CSS3 fona izmērs īpašums, lai norādītu fona attēlu izmērus 100%, 20px. Kaut arī CSS3 gradienti parāda “krāsas”, tas faktiski tiek klasificēts kā attēls, nav krāsa.

Tālāk mēs izmantosim : pirms pseidoelements papīra kreisajā pusē pievienot svītru.

 .gradients: pirms saturs: ""; displejs: inline-bloks; augstums: 500px; platums: 4px; kreisajā pusē: 4px dubultā # FCA1A1; pozīcija: relatīvais; pa kreisi: 30px;  

Un mēs esam darījuši, tas tiešām ir vienkārši? Tagad mēs varam redzēt tos visus darbībā no tālāk norādītajām saitēm.

• Skatīt demonstrāciju
• Lejupielādēt avotu

Papildu resursi

• Webkit CSS3 gradienti
• CSS3 gradienti Microsoft izstrādātāju tīklā