Izradite gradijente s CSS -om

Mi ćemo trebati
Uređivač koda
Alfanumerički kodovi boja za upotrebu
Web preglednik

Korak 1

Počet ću stvaranjem mape za ovaj vodič koju ću nazvati "trucos_css"Unutar njega ću stvoriti još jedan poziv"css”, U njima ću čuvati datoteke koje će mi trebati.

Korak 2

Otići ću u uređivač koda, u ovom slučaju upotrijebit ću zagrade i nastaviti s stvaranjem nove datoteke "index.html"To ću spremiti u korijenu mape"trikovi_css", Također ću stvoriti datoteku"stil.css"To ću spremiti u mapu" css "stvorenu u korak 1.

Korak 3

U moju datoteku "index.html" napisat ću osnovnu html strukturu i dodati referencu na stilsku tablicu "stil.css"To u prethodnom koraku spremi na putu"css / style.css”.
Kôd iz index.html:

 CSS trikovi - gradijenti 

Korak 4

U datoteku "index.html" uključit ću novuunutar kojeg ću kasnije dodijeliti razred "gradijent"Što ću kasnije napisati u datoteku"stil.css”.
Kod index.html će izgledati ovako:

 CSS trikovi

Korak 5

Sada ću raditi na datoteci "stil.css”, Počet ću definiranjem veličine koju će oznaka pokriti , Postavit ću širinu od 100%, visinu od 100%, izjavit ću da neće imati margine ili ispune i reći ću vam da će njen položaj biti apsolutan tako da pokriva ukupnu veličinu na ekranu.
Style.css kôd:

 tijelo {širina: 100%; visina: 100%; margina: 0px; padding: 0px; položaj: apsolutni; }

Korak 6

Nastavljamo uređivati ​​naš css, sad ću dodati razred "gradijent"U njemu ću naznačiti da bi trebao biti prikazan s visinom od 100% i jednakom širinom, napisat ću da će imati izbornik pozadine koji će sadržavati svojstvo"linearni gradijent ()Što funkcionira na sljedeći način …
Unutar zagrada označavamo gdje je usmjeren kraj našeg gradijenta i boje koje će prikazivati ​​s jednog kraja na drugi. Sintaksa bi bila otprilike ovakva:

 pozadina: linearni gradijent (smjer, zaustavljanje boje1, zaustavljanje boje2,…); 

Gdje ćemo u položaju koji se naziva smjer definirati smjer koji će gradijent slijediti na ekranulijevi vrh = lijevo i gore
desni vrh = desno i gore
dolje desno = dolje i desno
Dolje lijevo = dolje i lijevo
dolje desno = dolje i desno počevši od gornjeg lijevog kuta
dolje lijevo = ispod i desno počevši od gornjeg desnog kuta
gore desno = gore i desno počevši od donjeg lijevog
gore lijevo = gore i lijevo počevši od donjeg desnog kuta
Što se tiče boja, možete odabrati one koje želite, u ovom slučaju napravit ću gradijent koji će početi od bijele do crne do dvije nijanse plave.
Naš css kod tada bi bio sljedeći:

 tijelo {širina: 100%; visina: 100%; margina: 0px; padding: 0px; položaj: apsolutni; } .gradient {širina: 100%; visina: 100%; pozadina: linearni gradijent (dolje desno, # fff, # 00e2ff, # 00f, # 000); } 

Rezultat bi bio sljedeći.

No, kao i sve na ovom svijetu, postoje i drugi načini da to učinite mnogo lakše i brže i bez puno tipkanja, možemo otići u naš preglednik i potražiti sljedeću web adresu http: //www.colorzill… radient-editor /

U njemu će pronaći niz unaprijed definiranih nagiba i koje također mogu prilagoditi, morat će samo odabrati jedan, prilagoditi ga svojim željama ako žele, kopirati ccs kôd koji je prikazan na desnoj strani zaslona i zalijepite ga unutar sloja "gradijent" koji smo već stvorili zamjenom onoga što nađemo zapisanog u korak 6. Ovu opciju preporučujem jer je posebno koristim i kôd koji nam daje spreman je za rad u bilo kojem pregledniku.

Nakon kopiranja ovog koda zalijepit ćemo ga u naš css, ostavljajući ga na sljedeći način:

 tijelo {širina: 100%; visina: 100%; margina: 0px; padding: 0px; položaj: apsolutni; } .gradient {širina: 100%; visina: 100%; pozadina: rgb (212,228,239); / * Stari preglednici * / pozadina: -moz-linearni gradijent (gore, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * FF3.6 + * / pozadina: -webkit-gradijent (linearno, gore lijevo, lijevo dno, zaustavljanje boje (0%, rgba (212,228,239,1)), zaustavljanje boje (64%, rgba (134,174,204,1 ))); / * Chrome, Safari4 + * / pozadina: -webkit-linearni gradijent (gore, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * Chrome10 +, Safari5.1 + * / pozadina: -o-linearni gradijent (gore, rgba (212.228.239,1) 0%, rgba (134.174.204,1) 64%); / * Opera 11.10+ * / pozadina: -ms-linearni gradijent (gore, rgba (212.228.239,1) 0%, rgba (134.174.204,1) 64%); / * IE10 + * / pozadina: linearni gradijent (do dna, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# d4e4ef', endColorstr = '# 86aecc', GradientType = 0); } 

A rezultat bi u ovom slučaju bio sljedeći.
POVEĆAJTE
Nadam se da će biti korisno, za više trikova ne zaboravite me slijediti …
Ako vam se svidio ovaj vodič, ne zaboravite ga ocijeniti, a ako imate pitanja ili komentare ostavite ih ispod, rado ću vam odgovoriti. Pozdrav … Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod