Satura rādītājs
Mums vajadzēsKoda redaktors
Izmantojamo krāsu burtciparu kodi
Tīmekļa pārlūkprogramma
1. darbība
Es sākšu, izveidojot mapi šai apmācībai, ko es saukšu par "trucos_css"Tās ietvaros es izveidošu vēl vienu zvanu"css”, Tajos es glabāšu failus, kas man būs nepieciešami.
2. solis
Es došos uz savu koda redaktoru, es izmantošu iekavas un turpinu izveidot jaunu failu "index.html"Ka es saglabāšu mapes saknē"triki_css", Es arī izveidošu failu"stils.css"To es saglabāšu mapē" css ", kas izveidota 1. solis.
3. solis
Manā failā "index.html" es uzrakstīšu html pamata struktūru un pievienosiu atsauci uz stila lapu "stils.css"Iepriekšējā solī saglabājiet ceļu"css / style.css”.
Kods no index.html:
CSS triki - gradienti
4. solis
Failā "index.html" es iekļaušu jaunukurā es vēlāk norīkošu klasi "gradients"Ko es vēlāk ierakstīšu failā"stils.css”.
Kods index.html izskatīsies šādi:
CSS triki
5. solis
Tagad es strādāšu pie faila "stils.css”Sākumā es definēšu izmēru, uz kura attiecas etiķete , Es iestatīšu 100%platumu, 100%augstumu, paziņošu, ka tam nebūs robežu vai polsterējuma, un es jums teikšu, ka tā pozīcija būs absolūta, lai tā aptvertu visu ekrānā redzamo izmēru.
Style.css kods:
virsbūve {platums: 100%; augstums: 100%; mala: 0 pikseļi; polsterējums: 0 pikseļi; pozīcija: absolūta; }
6. darbība
Mēs turpinām rediģēt mūsu css, tagad es pievienošu klasi "gradients"Tajā es norādīšu, ka tas jāparāda ar 100% augstumu un vienādu platumu, es rakstīšu, ka tam būs fona atlasītājs, kurā būs īpašums"lineārs gradients ()Kas darbojas šādi …
Iekavās mēs norādām, kur ir novirzīts mūsu gradienta gals, un krāsas, kuras tas parādīs no viena gala uz otru. Sintakse būtu aptuveni šāda:
fons: lineārs gradients (virziens, krāsu pietura1, krāsas apstāšanās2,…);Vietā, ko sauc par virzienu, mēs definēsim virzienu, pa kuru ekrānā sekos gradientsaugšā pa kreisi = pa kreisi un uz augšu
labajā augšā = pa labi un uz augšu
apakšā pa labi = uz leju un pa labi
apakšā pa kreisi = uz leju un pa kreisi
apakšā pa labi = uz leju un pa labi, sākot no augšējā kreisā stūra
apakšā pa kreisi = zemāk un pa labi, sākot no augšējā labā stūra
augšā pa labi = augšā un pa labi, sākot no apakšējās kreisās puses
augšā pa kreisi = augšā un pa kreisi, sākot no apakšējās labās puses
Attiecībā uz krāsām jūs varat izvēlēties sev vēlamās krāsas, šajā gadījumā es izveidošu gradientu, kas sāksies no baltas līdz melnai, izmantojot divus zilus toņus.
Mūsu css kods būtu šāds:
virsbūve {platums: 100%; augstums: 100%; mala: 0 pikseļi; polsterējums: 0 pikseļi; pozīcija: absolūta; }. gradients {platums: 100%; augstums: 100%; fons: lineārs gradients (apakšā pa labi, # fff, # 00e2ff, # 00f, # 000); } Rezultāts būtu šāds.
Bet, tāpat kā viss šajā pasaulē, ir arī citi veidi, kā to izdarīt daudz vieglāk un ātrāk, daudz nerakstot, mēs varam doties uz savu pārlūkprogrammu un meklēt šādu tīmekļa adresi: http://www.colorzill… radient-editor /
Tajā viņi atradīs virkni slīpumu, kas jau ir iepriekš definēti un kurus viņi var arī pielāgot, viņiem būs tikai jāizvēlas viens, jāpielāgo tas pēc savas izvēles, ja vēlas, nokopējiet ekrāna labajā pusē redzamo ccs kodu un ielīmējiet to jau izveidotā slāņa "gradients" iekšpusē, aizstājot tajā ierakstīto 6. solis. Es iesaku šo opciju, jo es to īpaši izmantoju, un kods, ko tas mums dod, ir gatavs darbam jebkurā pārlūkprogrammā.
Pēc šī koda kopēšanas mēs to ielīmēsim savā css, atstājot to šādi:
virsbūve {platums: 100%; augstums: 100%; mala: 0 pikseļi; polsterējums: 0 pikseļi; pozīcija: absolūta; }. gradients {platums: 100%; augstums: 100%; fons: rgb (212 228 239); / * Vecās pārlūkprogrammas * / fons: -moz-linear-gradient (top, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * FF3.6 + * / fons: -webkit-gradients (lineārs, augšējais kreisais, kreisais apakšējais, krāsu pieturas punkts (0%, rgba (212 228 239,1)), krāsu pietura (64%, rgba (134 174 204,1) ))); / * Chrome, Safari4 + * / fons: -webkit-linear-gradient (top, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * Chrome10 +, Safari5.1 + * / fons: -o-linear-gradient (augšējā, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * Opera 11.10+ * / fons: -ms-linear-gradient (top, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * IE10 + * / fons: lineārs gradients (uz leju, rgba (212 228 239,1) 0%, rgba (134 174 204,1) 64%); / * W3C * / filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# d4e4ef', endColorstr = '# 86aecc', GradientType = 0); } Un rezultāts šajā gadījumā būtu šāds.
PALIELINĀTEs ceru, ka tas būs noderīgs, lai iegūtu vairāk triku, neaizmirstiet sekot man …
Ja jums patika šī apmācība, neaizmirstiet to novērtēt, un, ja jums ir jautājumi vai komentāri, atstājiet tos zemāk, es labprāt jums atbildēšu. Sveicieni … Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu
