Kodų redaktorius
Naudojamų spalvų raidiniai ir skaitmeniniai kodai
Žiniatinklio naršyklė
1 žingsnis
Pradėsiu nuo šios pamokos sukūrimo aplanko, kurį vadinsiu „trucos_css„Jo viduje aš sukursiu kitą skambutį“css“, Juose aš laikysiu failus, kurių man prireiks.
2 žingsnis
Aš eisiu į savo kodų rengyklę, šiuo atveju naudosiu skliaustus ir pradėsiu kurti naują failą "index.html„Kad išsaugosiu aplanko šaknyje“gudrybės_css", Aš taip pat sukursiu failą"stilius.css„Kad išsaugosiu aplanke„ css “, sukurtame 1 žingsnis.
3 žingsnis
Savo faile „index.html“ parašysiu pagrindinę html struktūrą ir pridėsiu nuorodą į stiliaus lapą “stilius.css„Kad ankstesniame žingsnyje išsaugotumėte kelią“css / style.css”.
Kodas iš index.html:
CSS gudrybės - nuolydžiai
4 žingsnis
Į failą „index.html“ įtraukiu naująkurioje vėliau paskirsiu klasę "gradientas"Ką vėliau parašysiu faile"stilius.css”.
„Index.html“ kodas atrodys taip:
CSS gudrybės
5 žingsnis
Dabar dirbsiu su failu “stilius.css“, Pradėsiu apibrėždamas dydį, kurį uždengs etiketė , Nustatysiu 100%plotį, 100%aukštį, pareikšiu, kad jis neturės paraštių ar paminkštinimų, ir pasakysiu, kad jo padėtis bus absoliuti, kad ji padengtų visą ekrano dydį.
Style.css kodas:
korpusas {plotis: 100%; aukštis: 100%; paraštė: 0 taškų; paminkštinimas: 0 taškų; pozicija: absoliuti; }
6 žingsnis
Mes ir toliau redaguojame savo css, dabar pridėsiu klasę "gradientas„Jame nurodysiu, kad jis turėtų būti rodomas 100% aukščio ir vienodo pločio, parašysiu, kad jame bus fono parinkiklis, kuriame bus ši savybė“linijinis gradientas ()Kuris veikia taip …
Skliausteliuose nurodome, kur nukreiptas gradiento galas, ir spalvas, kurias jis parodys iš vieno galo į kitą. Sintaksė būtų maždaug tokia:
fonas: linijinis gradientas (kryptis, spalva-stop1, spalva-stop2,…);Kurioje padėtyje, vadinamoje kryptimi, mes nustatysime kryptį, kuria gradientas seks ekraneviršuje kairėje = kairėn ir aukštyn
dešinėje viršuje = dešinėn ir aukštyn
apačioje dešinėje = žemyn ir į dešinę
apačioje kairėje = žemyn ir į kairę
apačioje dešinėje = žemyn ir į dešinę, pradedant nuo viršutinio kairiojo kampo
apačioje kairėje = žemiau ir į dešinę, pradedant nuo viršutinio dešiniojo kampo
viršuje dešinėje = viršuje ir dešinėje, pradedant nuo apatinės kairės pusės
viršuje kairėje = viršuje ir kairėje, pradedant nuo apatinio dešiniojo
Kalbant apie spalvas, galite pasirinkti norimas, šiuo atveju padarysiu gradientą, kuris prasidės nuo baltos iki juodos per du mėlynos spalvos atspalvius.
Tada mūsų css kodas būtų toks:
korpusas {plotis: 100%; aukštis: 100%; paraštė: 0 taškų; paminkštinimas: 0 taškų; pozicija: absoliuti; } .gradientas {plotis: 100%; aukštis: 100%; fonas: linijinis gradientas (apačioje dešinėje, # fff, # 00e2ff, # 00f, # 000); } Rezultatas būtų toks.
Tačiau, kaip ir viskas šiame pasaulyje, yra ir kitų būdų, kaip tai padaryti daug lengviau ir greičiau, nedaug rašant, mes galime eiti į savo naršyklę ir ieškoti šio interneto adreso: http: //www.colorzill… radient-editor /
Jame jie ras iš anksto nustatytų nuolydžių seriją, kurią taip pat gali pritaikyti, jie turės tik pasirinkti vieną, pritaikyti ją pagal pageidavimą, nukopijuoti dešinėje ekrano pusėje esantį kodą ir įklijuokite jį į „gradiento“ sluoksnį, kurį jau sukūrėme, pakeisdami tai, kas jame parašyta 6 žingsnis. Aš rekomenduoju šią parinktį, nes aš ją ypač naudoju, o jos suteiktas kodas yra paruoštas veikti bet kurioje naršyklėje.
Nukopijavę šį kodą įklijuosime jį į savo css, palikdami jį taip:
korpusas {plotis: 100%; aukštis: 100%; paraštė: 0 taškų; paminkštinimas: 0 taškų; pozicija: absoliuti; } .gradientas {plotis: 100%; aukštis: 100%; fonas: rgb (212 228 239); / * Senos naršyklės * / fonas: -moz-linear-gradient (viršuje, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * FF3.6 + * / fonas: -webkit-gradientas (linijinis, kairysis viršus, kairysis apačia, spalvų sustabdymas (0%, rgba (212 228 239,1)), spalvos sustabdymas (64%, rgba (134 174 204,1) ))); / * „Chrome“, „Safari4 +“ / fonas: -webkit-linear-gradient (viršuje, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * „Chrome10 +“, „Safari5.1 + *“ / fonas: -o-linear-gradientas (viršuje, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * Opera 11.10+ * / fonas: -ms-linear-gradient (viršuje, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * IE10 + * / fonas: tiesinis gradientas (į apačią, rgba (212 228 239,1) 0%, rgba (134 174 204,1) 64%); / * W3C * / filtras: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# d4e4ef', endColorstr = '# 86aecc', GradientType = 0); } Ir rezultatas šiuo atveju būtų toks.
DIDELISTikiuosi, kad tai bus naudinga, nes daugiau gudrybių nepamirškite sekti paskui mane …
Jei jums patiko ši pamoka, nepamirškite ją įvertinti ir, jei turite klausimų ar komentarų, palikite juos žemiau, aš mielai jums atsakysiu. Sveikiname … Ar jums patiko ši pamoka ir padėjote jai?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką
