10 neįtikėtinų CSS gudrybių, kaip pakeisti jūsų žiniatinklio maketus

Kiekvienas, turintis žiniatinklio kūrimo patirties, nesvarbu, ar naudojote „pasidaryk pats“ svetainių kūrėjus, ar sukūrėte svetainę nuo nulio, apie CSS tikriausiai yra girdėję anksčiau. Šis neįtikėtinai galingas įrankis gali būti naudojamas jūsų žiniatinklio maketams pakeisti, kad galėtumėte valdyti savo svetainę ir įgyvendinti savo kūrybinę viziją. Bet kaip galite naudoti pakopinius stiliaus lapus, kad išnaudotumėte kitos svetainės potencialą?

Šiame vadove bus aprašyta tik keletas CSS ypatybių, kurios visos buvo panaudotos kuriant antraštę, kurią matote aukščiau esančiame paveikslėlyje. Šį projektą galite rasti čia CodePen, suteikiant galimybę tai išbandyti patiems.

CSS vaizdo manipuliavimas

Pirmas žingsnis, kurį turime atlikti kurdami antraštės skyrių, yra vaizdų įtraukimas į puslapį. Norėdami pasiekti šį tikslą, galite naudoti įvairius metodus, todėl apžvelgėme populiariausius ir keletą gudrybių, padėsiančių manipuliuoti vaizdais.

1. CSS fono vaizdas

Norime, kad antraštės būtų viso ekrano fono vaizdas, o fono vaizdo CSS ypatybė yra ideali. Pirmiausia turime sukurti savo vaizdo (ir kitų antraštės elementų) konteinerį.

Pradėjome pridėdami „div“ žymą su „header“ kaip savo klasę, po to nustatydami jos klasę aukštis iki 100vh ir tai plotis iki 100vw; taip gauname langelį, kuris yra lygiai tokio pat dydžio kaip peržiūros sritis. Taip pat pridėjome CSS taisyklę puslapio turiniui su juo perpildymas nustatytas kaip paslėptas ir tai paraštės nustatytos 0 pikselių.

Kai konteineris yra vietoje, galime pridėti fono vaizdą ir yra trys skirtingos CSS taisyklės, kurių reikia norint pasiekti šį tikslą. Pirmajam, fono paveikslėliui, reikalingas URL, kad jis veiktų kaip fono paveikslėlio šaltinis. Tam naudojome patogų katalogą Unsplash. Taip pat turime nustatyti fono dydžio iki viršelio ir fono padėtis į apačią, bet galbūt norėsite eksperimentuoti su jais, kad pasiektumėte geriausių rezultatų.

2. CSS fono maišymo režimas

CSS maišymo režimai leidžia sulieti vaizdus ir tekstą, panašiai kaip maišymo funkcija programinėje įrangoje, pvz., „Adobe Photoshop“. Kad maišymo režimai veiktų su fono paveikslėliu, nustatome fono spalva iki pusiau permatomos baltos prieš pridėdami maišymo režimą, kurį norėjome naudoti.

Sekant tai, background-blend-mode buvo nustatytas į minkštą šviesą, leisdami mums sušvelninti vaizdą.

3. CSS klipo kelias

Kitam mūsų triukui naudosime taisyklę, vadinamą klipų keliu. Kai naudojate img HTML žymas, galite nustatyti kelią, kuris slėps vaizdų, su kuriais dirbate, dalis. Tam galite naudoti bendras formas, bet taip pat galite naudoti SVG generuojančią programą, kad sukurtumėte sudėtingesnį dizainą.

Pridėjome „div“ žymą su „flex_image_box“, kad ji veiktų kaip trijų vaizdų talpykla, o naudodami rodymo CSS ypatybę paverstume ją „flexbox“ (apie tai kalbėsime vėliau). Į div žymą buvo įtrauktos trys img žymos, kurių ID nustatyti kaip „img1“, „img2“ ir „img3“. Nustatant kiekvieno vaizdo plotis iki 600 pikselių, mes galime aukščio ypatybę palikite tuščią nekeičiant vaizdų formato santykio; dabar atėjo laikas pridėti mūsų klipų kelią!

Norėdami sukurti tris trikampius, img1 ir img3 naudojome tą patį daugiakampį, o img2 – apverstą versiją. Taip pat turėjome žaisti su savo „flex-box“ konteinerio padėtimi, kad įsitikintume, jog vaizdai ekrane yra tinkamoje padėtyje. Mūsų klipų kelio taisykles galite pamatyti žemiau.

4. CSS neskaidrumas

Nepermatomumas nustato bet kurio HTML elemento skaidrumo lygį. Mes nustatome mūsų vaizdų neskaidrumas iki 90 %, kad jie būtų šiek tiek nepermatomi, kad gražiai susilietų su fonu.

CSS reaguojantis tekstas ir vaizdai

Mes jau ištyrėme meną kurti nuostabias reaguojančias svetaines naudojant HTML, CSS ir JavaScript praeityje, tačiau galime remtis jau suprantamais principais, suteikdami gilesnę įžvalgą apie įgūdžius, kurių reikia norint įvaldyti savo svetainės maketus.

1. CSS reaguojantys / santykiniai vienetai

CSS vienetai, tokie kaip px, pt ir cm, yra absoliutūs vienetai, o tai reiškia, kad žiniatinklio naršyklė juos pateiks tokio paties dydžio, neatsižvelgiant į lango, kurį jie užima, plotį ir aukštį. Santykiniai vienetai yra skirtingi, todėl aukščiai ir ilgiai yra palyginti su kitais matavimais, pvz., naršyklės langu arba pirminiu elementu. Toliau pateikti santykiniai vienetai yra dažniausiai naudojami ir būtini interaktyviam žiniatinklio dizainui.

• em: Šis vienetas dažniausiai naudojamas su tekstu. Jis priklauso nuo dabartinio elemento šrifto dydžio, todėl 4em yra keturis kartus didesnis nei nustatytas šrifto dydis.
• rem: kaip ir em, rem yra santykinis su elemento šrifto dydžiu; šakninis hierarchijos elementas naudojamas išvesties dydžiui apibrėžti.
• vw/vh: nustatant plotį ir aukštį pagal peržiūros srities dydį, 2vw yra lygus 2 % naršyklės pločio, o 2vh – 2 % naršyklės aukščio.
• %: % vienetas apskaičiuoja matmenis pagal pirminio elemento dydį.
• vmin/vmax: šie įrenginiai sukuria matmenis, palyginti su 1 % mažiausio arba didžiausio peržiūros srities matmenų, todėl elementai gali tiesiogiai reaguoti į naršyklės lango dydį.

2. CSS šrifto dydis

Šią ypatybę galima nustatyti naudojant numatytąsias reikšmes, kurias iš anksto nustato pagrindinis svetainės stiliaus lapas arba vartotojo žiniatinklio naršyklė. Šios reikšmės apima medium, xx-small, x-small, small, big, x-large ir xx-large, o vidutinė yra nustatyta kaip numatytoji bet kokiam tekstui, kuriame nėra šrifto dydžio CSS žymos. Arba santykinės reikšmės gali būti naudojamos naudojant šrifto dydžio CSS ypatybę, ir tai yra metodas, kurį naudojome norėdami užtikrinti, kad tekstas mūsų antraštės skiltyje būtų tinkamo dydžio peržiūros sritis.

Į savo HTML įtraukėme dvi antraštės žymas, leidžiančias pridėti teksto prie projekto. Viena iš jų yra pagrindinė didelė antraštė, o kita – paantraštė, ir abiejose naudojami santykiniai vienetai.

Susijęs: Kaip pakeisti HTML šrifto dydį CSS

3. CSS plotis ir aukštis

Visi HTML elementai turi aukščio ir pločio matmenis, nesvarbu, ar jie yra div, img, a ar bet kokio kito tipo žymos. Šie matmenys gali būti automatiškai nustatyti į numatytąsias reikšmes, bet juos taip pat gali padiktuoti žiniatinklio dizaineriai, naudodami teisingas taisykles; šiai antraštei naudojome abu šiuos metodus.

Fono paveikslėlyje buvo naudojami jautrūs vienetai, kurių aukštis nustatytas į 100 vh, o plotis – 100 vw, tačiau trims vaizdams taip pat naudojome absoliučiuosius vienetus. Verta ištirti ir eksperimentuoti su CSS pločio ir aukščio vienetais, naudojant tokias parinktis kaip „paveldėti“, suteikiant reiškia priimti pirminio elemento matmenis, ir yra daugybė kitų tokių gudrybių, kurias galite naudoti.

4. CSS mišinio-maišymo režimas

CSS mišinio maišymo režimas yra labai panašus į fono maišymo režimą, tik jis gali būti taikomas bet kuriam elementui, o ne tik fonams. Mes panaudojome šią savybę savo H1 antraštėje, kad pridėtume tekstūros ir padarytume projektą įdomesnį. Pradėjome nustatydami savo teksto spalva į juodą, po to nustatykite maišymo-maišymo režimas perdengti.

Verta ištirti įvairias derinimo parinktis, kurias turite dirbant su tekstu, nes fonai su unikaliais spalvų profiliais skirtingai reaguos į jūsų naudojamus nustatymus.

5. CSS teksto transformavimas

CSS teksto transformavimas yra sumani savybė, leidžianti dizaineriams pakeisti teksto didžiąsias ir mažąsias raides savo svetainėse, nedarant įtakos paieškos sistemų skaitymo būdui. Pavyzdžiui, mes turime nustatyti teksto transformavimą į didžiąsias raides mūsų H1 antraštėje, kad kiekviena raidė būtų didžioji, nesvarbu, kaip ją įvedame į HTML.

CSS perpildymo ypatybės

HTML dažnai gali atrodyti kaip nelanksti sistema, kuri nustato griežtas jūsų svetainių turinio ribas, tačiau tai netinka, kai naudojamos perpildymo savybės.

CSS perpildymas ir teksto perpildymas

Perpildymas ir teksto perpildymas yra labai panašios CSS savybės. Perpildymas gali būti taikomas bet kuriam elementui, suteikiant jums galimybę valdyti turinį, kuris gali išeiti iš savo ribų. Teksto perpildymas yra panašus, nors jis taikomas tik tekstui ir suteikia galimybę prie taisyklių pridėti papildomų parametrų. Šiam projektui naudojome tik perpildymą (jį naudojome norėdami apriboti savo puslapio turinio dydį), bet apie teksto perpildymą galite perskaityti W3Schools Interneto svetainė.

CSS naudojimas jūsų žiniatinklio maketams

CSS yra neįtikėtinai galingas įrankis, leidžiantis interneto dizaineriams ir kūrėjams kurti nuostabias svetaines naudojant kodą. Raginame pažvelgti į CodePen, kurį pateikėme straipsnio pradžioje, nes tai suteiks dar gilesnės informacijos apie tai, kaip veikia visi šie įrankiai. Be to, galite žaisti su antrašte, kurią sukūrėme, kad pridėtumėte savo paskutinius akcentus.

8 pagrindiniai CSS patarimai ir gudrybės, kuriuos turėtų žinoti kiekvienas kūrėjas

Ar naudojate šiuos pagrindinius CSS metodus greitam darbo procesui ir gražiam interneto dizainui?

Skaitykite toliau

Apie autorių