Home-theater-designers
Ja esat bijis internetā vairāk nekā dažas minūtes, iespējams, esat saskāries ar CSS gradientu. CSS fona rekvizītu var izmantot, lai izveidotu dažādu stilu klāstu, un viens no intriģējošākajiem veidiem ir tas, ko tas var darīt ar gradienta vērtību.
Zināt, kā veidot un izveidot dažādus CSS gradientus, ir priekšrocība jebkuram programmatūras dizainerim vai izstrādātājam. No šī raksta jūs uzzināsit visu, kas jums jāzina, lai savos projektos sāktu 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 otru. 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ārs un radiāls.
Tomēr ir trešais gradienta veids, kas ir mazāk populārs un pazīstams kā konusveida gradients.
CSS gradientu sintakse
Background-image: gradient-type (direction, color1, color2);
CSS gradients jāpiešķir fona attēla CSS rekvizītam. Gradienta veids var būt viens no vairākiem; lineārais gradients, radiālais gradients vai koniskais gradients. Gradienta tipam seko atvēršanas un aizvēršanas kronšteini, kas satur gradienta pārejas virzienu, kā arī gradientā iekļaujamās krāsas.
Saistīts: Kā iestatīt fona attēlu CSS
Iepriekš minētajā piemērā ir redzamas divas krāsas, bet gradientā var būt vairākas dažādas krāsas. Vienīgā prasība ir tāda, ka katra saraksta krāsa ir atdalīta ar komatu.
Kas ir lineārais gradients?
Lineārais gradients ir populā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
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
Iepriekš minētais kods radīs šādu CSS gradientu:
Iepriekš minētajā 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); tā ir vēlamā izeja šajā piemērā.
Iepriekš minētais kods rada tādu pašu rezultātu kā nākamā koda rinda. Vienīgā atšķirība starp abiem ir koda virziena sadaļa.
Izmantojot apakšējā lineārā gradienta piemēru
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
Kā redzat no izvades, iepriekš minētais kods rada gradientu, kas sākas ar zilu augšdaļu un pēc tam lēnām pāriet uz oranžu apakšā. Ja vēlaties mainīt krāsu secību, varat to vienkārši nomainīt līdz apakšai ar uz augšu un tas mainīs gradienta virzienu, iegūstot šādu izvadi:
Līdzīgi kā vertikālā izlīdzināšana, gradienta horizontālo izlīdzināšanu var panākt, izmantojot divas virziena atslēgvārdu kopas: pa kreisi un pa labi , kas attiecīgi radīs šādus rezultātus.
kur var izdrukāt papīrus
Diagonālais lineārais gradients
Ir iespējams panākt lineāro gradienta pāreju pa diagonāli jebkurā lineārā gradienta virzienā. Ir tikai četri konkrēti atslēgvārdu saraksti, kas jums jāzina, lai tas būtu iespējams.
- Apakšā pa labi
- Apakšā pa kreisi
- Augšā pa labi
- Augšā pa kreisi
Izmantojot diagonālās lineārās gradienta piemēru
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
Iepriekš minētais piemērs rada šādu izvadi:
Kā redzat no iepriekš minētās izejas, lineārais gradients veic pāreju pa diagonāli, virzoties no gradienta augšējās kreisās puses uz apakšējo labo daļu.
Daudzkrāsains lineārs gradients
Lineāram gradientam var būt divas vai vairākas krāsas, bet kā izskatās vairāk krāsu gradientā? Daudzkrāsains lineāra gradienta krāsu izkārtojums 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āra gradienta piemērs
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Iepriekš redzamā koda rinda radīs šādu izvadi:
Kā redzat, katra jaunā krāsa tiek pievienota pa labi no gradienta, tādējādi beidzot veidojot varavīksni. To pašu izvadi var sasniegt vertikālā virzienā; tomēr konkrētais krāsu izkārtojums lineārajā gradientā būs atkarīgs no vertikālā virziena atslēgvārda (uz augšu vai uz leju).
Kas ir radiālais gradients?
Radiālais gradients rada spirālveida gradientu no divām krāsām, 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
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
Iepriekš redzamā koda rinda radīs šādu izvadi:
Radiālā gradienta centra maiņa
Pēc noklusējuma gradienta centrā sākas radiālais gradients; tomēr ir iespējams mainīt izcelsmes vietu, ieviešot dažus atslēgvārdus.
kā iegūt google vietnē roku
Radiālā gradienta sākuma pozīcijas maiņas piemērs
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
Iepriekš redzamā koda rinda radīs šādu izvadi:
Kā redzams no izvades virs gradienta, tagad sākas no augšējā labā stūra, nevis centra. Šīs izmaiņas ir iespējamas, jo ir iekļauts atslēgvārds augšā pa labi iepriekš minētajā kodā. 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 vairāk krāsas, galvenā atšķirība ir tāda, ka tad, ja lineārais gradients pievieno gradientu taisnā līnijā, radiālais gradients ārējai malai pievieno jaunas krāsas.
Daudzkrāsaina radiālā gradienta piemērs
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Iepriekš redzamā koda rinda radīs šādu izvadi:
Gradientu pielāgošana
Līdz šim esat redzējis, kā mainīt gradienta virzienu un centra punktu, bet neesat redzējis, kā pielāgot gradientu. Gradienta pielāgošana varētu šķist daudz darba, taču, kad esat sapratis CSS fona gradienta izveides pamatus, nākamais acīmredzamais solis ir iemācīties padarīt CSS gradientus unikālākus.
vai ps4 spēles ir saderīgas ar ps5
Pēc noklusējuma krāsas gradientā aizņem vienmērīgi sadalītu vietu, un katra krāsa vienmērīgi pāriet uz vienu 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ņem vienu trešdaļu no pieejamās vietas.
Izmantojot pielāgotu gradientu, jūs varat definēt vietas daudzumu, ko krāsa aizņems gradientā, skaidri piešķirot krāsu apstāšanās pozīcija .
Lineārā gradienta pielāgošana 1. piemērs
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
Iepriekš redzamā koda rinda radīs šādu izvadi:
Iepriekš redzamajā attēlā redzama otrā krāsa lineārajā gradientā, kas apstājas pie pirmās krāsas 30% punkta gradientā, nevis ierastā stāvoklī, un tā kā otrā krāsa ir arī gradienta pēdējā krāsa, tā dabiski stiepjas līdz galam .
Ja pirmās krāsas beigās ievietosit 30% iepriekš minētajā kodā, lietām vajadzētu kļūt skaidrākām.
Lineārā gradienta pielāgošana 2. piemērs
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
Iepriekš minētais kods radīs šādu izvadi.
Iepriekš redzamais rezultāts skaidri parāda gradienta pirmo krāsu, kas apstājas pie otrās krāsas 30% punkta gradientā. Šis piemērs kopā ar iepriekš minēto palīdzēs jums vieglāk pielāgot krāsu pielāgošanu.
Radiālā gradienta pielāgošana tiek veikta tāpat kā lineārais gradients. Vienīgais, kas jums jādara, lai sasniegtu tādus pašus rezultātus radiālā gradientā, ir mainīt gradienta veidu un virzienu.
Izveidot CSS gradientus nekad nav bijis vieglāk
Šis apmācības raksts sniedz jums rīkus, lai identificētu un izveidotu lineārus un radiālus slīpumus. Ja esat sasniedzis šo punktu, jūs uzzinājāt, kā mainīt gradienta virzienu un centru. Turklāt tagad jums ir prasmes pielāgot CSS gradientus un izveidot unikālus fona gradientus.
Tomēr, ja nevēlaties sākt jaunu un unikālu slīpumu veidošanu, varat sākt, izveidojot lieliskus, jau esošus.
Kopīgot Kopīgot Čivināt E -pasts 27 Stilīgi CSS fona gradienta piemēriVienkrāsainas tādas ir pagājušajā gadā. Gradienti ir! Bet kā tos izveidot CSS?
Lasīt Tālāk Saistītās tēmas- Programmēšana
- Web izstrāde
- Web dizains
- CSS
Kadeisha Kean ir pilna komplekta programmatūras izstrādātājs un tehniskais/tehnoloģiju rakstnieks. Viņai ir izteikta spēja vienkāršot dažus no sarežģītākajiem tehnoloģiskajiem jēdzieniem; materiāla ražošana, ko var viegli saprast ikviens tehnoloģiju iesācējs. Viņa aizraujas ar rakstīšanu, interesantas programmatūras izstrādi un pasaules apceļošanu (caur dokumentālajām filmām).
Vairāk no Kadeisha KeanAbonējiet mūsu biļetenu
Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!
Noklikšķiniet šeit, lai abonētu