Stila vietnes elementi ar CSS fona gradientu

Ja internetā esat bijis vairāk nekā dažas minūtes, iespējams, ka esat saskāries ar CSS gradientu. CSS fona rekvizītu var izmantot, lai izveidotu dažādus stilus, un viens no intriģējošākajiem veidiem ir tas, ko tas var darīt ar gradienta vērtību.

Zināšanas par dažādu CSS gradientu noformēšanu un izveidi ir jebkura programmatūras dizainera vai izstrādātāja īpašums. No šī raksta uzzināsiet visu, kas jums jāzina, lai sāktu projektos iekļaut CSS gradientus.

Kas ir CSS gradients?

CSS gradients būtībā ir divu vai vairāku krāsu kombinācija, kas vienmērīgi pāriet no vienas uz nākamo. CSS gradienta pārejas stāvoklis ir atkarīgs no izmantotā gradienta veida. Programmatūras projektēšanā parasti tiek izmantoti divi galvenie gradientu veidi: lineāri un radiāli.

Tomēr ir arī trešais gradientu veids, kas ir mazāk populārs un pazīstams kā konusveida gradients.

CSS gradientu sintakse

Fona attēls: gradienta tips (virziens, krāsa1, krāsa2);

CSS gradients jāpiešķir fona attēla CSS rekvizītam. Gradienta tips var būt viens no vairākiem; lineārs gradients, radiāls gradients vai konisks gradients. Pēc gradienta veida seko atvēršanas un aizvēršanas iekavas, kurās ir gradienta pārejas virziens, kā arī krāsas, kas jāiekļauj gradientā.

Saistīts: Kā iestatīt fona attēlu CSS

Iepriekš minētajā piemērā ir redzamas divas krāsas, bet gradients var saturēt vairākas dažādas krāsas. Vienīgā prasība ir tā, lai katra saraksta krāsa būtu atdalīta ar komatu.

Kas ir lineārais gradients?

Lineārais gradients ir vispopulārākais CSS gradients. Tas rada horizontālu, vertikālu vai diagonālu pārejas gradientu, izmantojot divas vai vairākas krāsas.

CSS lineārā gradienta piemērs

Fona attēls: lineārs gradients (# 00A4CCFF, # F95700FF);

Iepriekš minētais kods radīs šādu CSS gradientu:

Iepriekšējā piemērā ir izlaista viena galvenā gradienta sintakses sastāvdaļa. Šis komponents ir gradienta pārejas virziens, un tas tika izlaists, jo lineārā gradienta noklusējuma izlīdzināšana ir vertikāla (no augšas uz leju); tas ir vēlamais rezultāts šajā piemērā.

Iepriekš minētais kods rada tādu pašu rezultātu kā šī koda rinda. Vienīgā atšķirība starp abiem ir koda virziena sadaļa.

Izmantojot apakšējā lineārā gradienta piemēru

Fona attēls: lineārs gradients (uz leju, # 00A4CCFF, # F95700FF);

Kā redzams no izejas, iepriekš minētais kods izveido gradientu, kas sākas ar zilu krāsu augšpusē, pēc tam lēnām pāriet uz oranžu apakšā. Ja vēlaties mainīt krāsu secību, varat vienkārši nomainīt krāsu uz leju ar uz augšu un tas mainīs gradienta virzienu, radot šādu rezultātu:

Līdzīgi vertikālajai izlīdzināšanai, gradienta horizontālo izlīdzināšanu var panākt, izmantojot divus virziena atslēgvārdu komplektus: pa kreisi un pa labi, kas radīs attiecīgi šādus rezultātus.

Diagonālais lineārais gradients

Ir iespējams panākt diagonālu lineāru gradienta pāreju jebkurā lineārā gradienta virzienā. Lai to izdarītu, jums ir jāzina tikai četri specifiski atslēgvārdu saraksti.

• Labajā apakšējā stūrī
• Apakšā pa kreisi
• Augšējā labajā stūrī
• Augšējā kreisajā stūrī

Izmantojot diagonālā lineārā gradienta piemēru

Fona attēls: lineārs gradients (apakšā pa labi, # 00A4CCFF, # F95700FF);

Iepriekš minētais piemērs rada šādu izvadi:

Kā redzams no iepriekš minētās izejas, lineārais gradients veic pāreju pa diagonāli, pārejot no gradienta augšējās kreisās puses uz apakšējo labo daļu.

Daudzkrāsains lineārais gradients

Lineārajam gradientam var būt divas vai vairākas krāsas, bet kā izskatās vairāk krāsu gradientā? Daudzkrāsains lineārā gradienta krāsu izvietojums ir atkarīgs no tā virziena. Tiem, kas pāriet horizontālā virzienā, katra jaunā krāsa parādīsies pa kreisi vai pa labi no lineārā gradienta, atkarībā no precīzā lineārā gradienta virziena.

Daudzkrāsains lineārā gradienta piemērs

Fona attēls: lineārs gradients (pa labi, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Iepriekš minētā koda rindiņa radīs šādu izvadi:

Kā redzat, katra jaunā krāsa tiek pievienota gradienta labajā pusē, radot to, kas galu galā pārvēršas par varavīksni. To pašu izvadi var sasniegt vertikālā virzienā; tomēr īpašais krāsu izvietojums lineārajā gradientā būs atkarīgs no vertikālā virziena atslēgas (uz augšu vai uz leju).

Kas ir radiālais gradients?

Radiālais gradients rada spirālveida gradientu, kurā divas krāsas ir vairāk krāsu, kas pēc noklusējuma sākas no centra. Ja lineārais gradients rada taisnu gradientu, kas plūst vertikāli vai horizontāli, radiālais gradients rada apļveida gradientu, kas plūst no centra uz ārējām malām.

Izmantojot radiālā gradienta piemēru

Fona attēls: radiālais gradients (aplis, # 00A4CCFF, # F95700FF);

Iepriekš minētā koda rindiņa radīs šādu izvadi:

Radiālā gradienta centra maiņa

Pēc noklusējuma radiālais gradients sākas no gradienta centra; tomēr ir iespējams mainīt izcelsmes vietu, ieviešot dažus atslēgvārdus.

Radiālā gradienta sākuma stāvokļa maiņa

Fona attēls: radiālais gradients (aplis augšējā labajā stūrī, # 00A4CCFF, # F95700FF);

Iepriekš minētā koda rindiņa radīs šādu izvadi:

Kā redzams no izejas virs gradienta, tagad sākas no augšējā labā stūra, nevis centra. Šīs izmaiņas ir iespējamas atslēgvārda iekļaušanas dēļ augšējā labajā stūrī kodā iepriekš. Lai mainītu radiālā gradienta sākuma punktu, var izmantot arī šādu atslēgvārdu sarakstu:

• Augšējais kreisais
• Apakšā pa labi
• Apakšā pa kreisi

Daudzkrāsaini radiālie gradienti

Tāpat kā lineārais gradients, arī radiālais gradients var izmantot divas krāsas vairāk, galvenā atšķirība ir tā kur lineārais gradients palielina gradientu taisnā līnijā, radiālais gradients pievieno jaunas krāsas ārējā krāsā mala.

Daudzkrāsains radiālā gradienta piemērs

Fona attēls: radiālais gradients (aplis, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Iepriekš minētā koda rindiņa radīs šādu izvadi:

Gradientu pielāgošana

Līdz šim esat redzējis, kā mainīt gradienta virzienu un centra punktu, taču neesat redzējis, kā pielāgot gradientu. Gradienta pielāgošana varētu izklausīties pēc daudz darba, taču, tiklīdz esat izpratis izveidošanas pamatus CSS fona gradients nākamais acīmredzamais solis ir iemācīties padarīt CSS gradientus vairāk unikāls.

Pēc noklusējuma krāsas gradientā aizņem vienmērīgi sadalītu vietu, katrai krāsai vienmērīgi pārejot pēc tās. Tātad, ja divas krāsas tiek apvienotas, veidojot gradientu, katra krāsa aizņem pusi no pieejamās vietas, pārejot no vienas uz otru. Ja tiek apvienotas trīs krāsas, katra krāsa aizņems trešdaļu no pieejamās vietas.

Izmantojot pielāgotu gradientu, jums jānosaka, cik daudz vietas krāsa aizņem gradientā, skaidri piešķirot krāsu apturēšanas pozīcija.

Lineārā gradienta piemērošanas piemērs 1

Fona attēls: lineārs gradients (pa labi, # 00A4CCFF, # F95700FF 30%);

Iepriekš minētā koda rindiņa radīs šādu izvadi:

Iepriekš redzamajā izvadē tiek parādīta otrā krāsa lineārā gradientā, apstājoties 30% punktā no pirmās krāsas gradienta krāsas, ierastās pozīcijas vietā un tāpēc, ka otrā krāsa ir arī gala krāsa gradientā, tā dabiski izplešas līdz krāsai beigas.

Ja jūs ievietojat 30% kodā iepriekš pirmās krāsas beigās, lietām vajadzētu kļūt skaidrākām.

Lineārā gradienta piemērošanas piemērs 2

Fona attēls: lineārs gradients (pa labi, # 00A4CCFF 30%, # F95700FF);

Iepriekš minētais kods radīs šādu izvadi.

Augšējā izvade skaidri parāda pirmo krāsu gradientā, apstājoties 30% otrajā gradienta krāsā. Šis piemērs kopā ar iepriekš minēto palīdzēs jums vieglāk saprast krāsu apturēšanas pielāgošanu.

Radiālā gradienta pielāgošana tiek veikta tāpat kā lineārais gradients. Vienīgais, kas jums jādara, lai radiālā gradientā sasniegtu iepriekš minētos rezultātus, ir mainīt gradienta veidu un virzienu.

Izveidot CSS gradientus nekad nav bijis tik vienkārši

Šajā mācību rakstā ir sniegti rīki, lai identificētu un izveidotu lineārus un radiālus gradientus. Ja esat nonācis līdz šai vietai, jūs uzzinājāt, kā mainīt gradienta virzienu un centru. Turklāt jums tagad ir prasmes pielāgot CSS gradientus un izveidot unikālus fona gradientus.

Tomēr, ja jūs nevēlaties sākt tieši veidot jaunus un unikālus gradientus, varat sākt, izveidojot dažus jau iepriekš izskatītus lieliskus.

27 stilīgi CSS fona gradientu piemēri

Vienkrāsainas krāsas ir tādas pagājušajā gadā. Slīpumi ir iekšā! Bet kā jūs tos izveidojat CSS?

Lasiet Tālāk

Par autoru

Izvērsiet, lai lasītu visu stāstu