10 neverjetnih CSS trikov za preoblikovanje vaših spletnih postavitev

Vsakdo, ki ima izkušnje s spletnim oblikovanjem, ne glede na to, ali ste uporabljali ustvarjalce spletnih mest DIY ali naredili spletno mesto iz nič, je verjetno že slišal za CSS. To neverjetno zmogljivo orodje lahko uporabite za preoblikovanje vaših spletnih postavitev, kar vam daje moč, da prevzamete nadzor nad svojim spletnim mestom in dosežete svojo ustvarjalno vizijo. Toda kako lahko uporabite kaskadne slogovne liste, da odklenete potencial vašega naslednjega spletnega mesta?

Ta vodnik bo podrobno opisal le vrsto lastnosti CSS, ki so bile uporabljene za ustvarjanje glave, ki jo lahko vidite na zgornji sliki. Ta projekt lahko najdete tukaj CodePen, ki vam daje možnost, da ga preizkusite sami.

Manipulacija s slikami CSS

Prvi korak, ki ga moramo narediti za izdelavo našega razdelka z glavo, je dodajanje slik na stran. Za dosego tega cilja lahko uporabite vrsto metod, zato smo pokrili najbolj priljubljene, skupaj z nekaj triki, ki vam bodo pomagali manipulirati s slikami.

1. Slika ozadja CSS

Želimo imeti celozaslonsko sliko ozadja za našo glavo, lastnost CSS slike ozadja pa je idealna. Najprej moramo ustvariti vsebnik za našo sliko (in ostale elemente v glavi).

Začeli smo z dodajanjem oznake div z "header" kot razredom, čemur je sledila nastavitev njenega višina do 100vh in njegovo širina do 100vw; to nam daje polje, ki je popolnoma enake velikosti kot vidno polje. Dodali smo tudi pravilo CSS za telo strani z njegovo preliv je nastavljen na skrito in njegovo robovi nastavljeni na 0px.

Ko je vsebnik nameščen, lahko dodamo sliko ozadja in obstajajo tri različna pravila CSS, ki jih potrebujemo, da dosežemo ta cilj. Prva, slika ozadja, potrebuje URL, da deluje kot vir slike ozadja, za to pa smo uporabili priročen katalog Unsplash. Prav tako moramo nastaviti velikost ozadja za pokrivanje in položaj ozadja do dna, vendar boste morda želeli eksperimentirati s temi za najboljše rezultate.

2. CSS Background-Blend-Mode

Načini mešanja CSS omogočajo mešanje slik in besedila, podobno kot funkcija mešanja v programski opremi, kot je Adobe Photoshop. Da bi načini mešanja delovali z našo sliko ozadja, smo nastavili barva ozadja v polprozorno belo preden smo dodali način mešanja, ki smo ga želeli uporabiti.

Po tem, Način mešanja ozadja je bil nastavljen na mehko svetlobo, kar nam omogoča mehčanje slike.

3. CSS Clip-Path

Za naš naslednji trik bomo uporabili pravilo, imenovano clip-path. Ko uporabljate oznake HTML img, lahko nastavite pot, ki bo skrila dele slik, s katerimi delate. Za to lahko uporabite splošne oblike, lahko pa uporabite tudi aplikacijo, ki ustvarja SVG, da ustvarite bolj zapleten dizajn.

Dodali smo oznako div z "flex_image_box", ki deluje kot vsebnik za tri slike, z uporabo lastnosti prikaza CSS, da jo spremenimo v flexbox (o tem bomo govorili kasneje). Znotraj oznake div so bile dodane tri oznake img z ID-ji, nastavljenimi kot "img1", "img2" in "img3". Nastavitev širina vsake slike na 600 slikovnih pik, zmoremo pustite lastnost višine prazno brez spreminjanja razmerja stranic slik; zdaj je čas, da dodamo našo pot posnetka!

Za ustvarjanje naših treh trikotnikov smo uporabili isto pot poligona za img1 in img3, z obrnjeno različico na mestu za img2. Prav tako smo se morali poigrati s pozicioniranjem našega vsebnika flex-box, da bi zagotovili, da so slike na pravem mestu na zaslonu. Naša pravila o poti izrezkov si lahko ogledate spodaj.

4. Prosojnost CSS

Opacity nastavi raven preglednosti katerega koli elementa HTML. Postavili smo motnost naših slik do 90%, tako da so rahlo motni, da se lepo zlijejo z ozadjem.

Odzivno besedilo in slike CSS

Raziskali smo že umetnost ustvarjanje osupljivih odzivnih spletnih mest z uporabo HTML, CSS in JavaScript v preteklosti, vendar lahko gradimo na načelih, ki jih že razumete, kar zagotavlja globlji vpogled v veščine, ki jih potrebujete za obvladovanje postavitve spletnega mesta.

1. Odzivne/relativne enote CSS

Enote CSS, kot so px, pt in cm, so absolutne enote, kar pomeni, da jih bo spletni brskalnik upodobil v enaki velikosti, ne glede na širino in višino okna, ki ga zasedajo. Relativne enote so različne, saj dajejo višine in dolžine, ki so relativne glede na druge meritve, na primer okno brskalnika ali nadrejeni element. Spodnje relativne enote so pogosto uporabljene in bistvene za odzivno spletno oblikovanje.

• em: Ta enota se običajno uporablja z besedilom. Odvisen je od velikosti pisave trenutnega elementa, zaradi česar je 4em štirikrat večji od nastavljene velikosti pisave.
• rem: Tako kot em je tudi rem sorazmeren z velikostjo pisave elementa; korenski element v hierarhiji se uporablja za definiranje izhodne velikosti.
• vw/vh: Določitev širine in višine na podlagi velikosti vidnega polja, 2vw je enak 2 % širine brskalnika, medtem ko je 2vh enak 2 % višine brskalnika.
• %: % enota izračuna dimenzije na podlagi velikosti nadrejenega elementa.
• vmin/vmax: Te enote ustvarijo dimenzije glede na 1 % najmanjših ali največjih dimenzij vidnega polja, kar elementom zagotavlja sredstva, da se neposredno odzovejo na velikost okna brskalnika.

2. Velikost pisave CSS

To lastnost je mogoče nastaviti s privzetimi vrednostmi, ki so vnaprej določene v glavni tabeli s slogi spletnega mesta ali v spletnem brskalniku uporabnika. Te vrednosti vključujejo srednje, xx-small, x-small, small, large, x-large in xx-large, pri čemer je medij nastavljen kot privzeto za vsako besedilo, ki nima oznake CSS za velikost pisave. Druga možnost je, da se pri uporabi lastnosti CSS velikosti pisave uporabijo relativne vrednosti, in to je metodo, ki smo jo uporabili za zagotovitev, da je besedilo v našem razdelku glave primerno velikosti za katero koli vidno polje.

V naš HTML smo dodali dve oznaki naslovov, ki nam omogočata, da projektu dodamo besedilo. Ena je glavna velika glava, druga pa podnaslov in oba uporabljata relativne enote.

Povezano: Kako spremeniti velikost pisave HTML v CSS

3. CSS širina in višina

Vsi elementi HTML imajo dimenzije višine in širine, ne glede na to, ali so div, img, a ali katera koli druga vrsta oznake. Te dimenzije je mogoče samodejno nastaviti na privzete vrednosti, lahko pa jih tudi narekujejo spletni oblikovalci z uporabo pravilnih pravil; za to glavo smo uporabili obe metodi.

Za sliko ozadja so bile uporabljene odzivne enote, pri čemer je višina nastavljena na 100vh in širina na 100vw, vendar smo uporabili tudi absolutne enote za naše tri slike. Vredno je raziskati in eksperimentirati z enotami širine in višine CSS, z možnostmi, kot je "podedovanje", ki zagotavljajo pomeni sprejeti dimenzije nadrejenega elementa in obstaja veliko drugih takšnih trikov, ki jih lahko uporabite.

4. Način mešanja CSS

Način mešanja CSS je zelo podoben načinu mešanja ozadja, le da ga je mogoče uporabiti za kateri koli element, ne pa izključno za ozadja. To lastnost smo uporabili v našem naslovu H1, da dodamo teksturo in naredimo projekt bolj zanimiv. Začeli smo z nastavitvijo našega barva besedila v črno, čemur sledi nastavitev mix-blend-mode za prekrivanje.

Vredno je raziskati različne možnosti mešanja, ki jih imate pri delu z besedilom, saj se ozadja z edinstvenimi barvnimi profili različno odzivajo na nastavitve, ki jih uporabljate.

5. Pretvorba besedila CSS

Preoblikovanje besedila CSS je pametna lastnost, ki oblikovalcem omogoča spreminjanje velikih in malih črk besedila na svojih spletnih mestih, ne da bi to vplivalo na način, kako ga iskalniki berejo. Na primer, imamo nastavite text-transform na velike črke v našem naslovu H1, tako da je vsaka črka velika, ne glede na to, kako jo vnesemo v naš HTML.

Lastnosti prelivanja CSS

HTML se lahko pogosto zdi kot tog okvir, ki postavlja stroge meje za vsebino na vaših spletnih mestih, vendar to ne velja, če so uporabljene lastnosti prelivanja.

CSS Overflow & Text-Overflow

Overflow in text-overflow sta zelo podobni lastnosti CSS. Overflow lahko uporabite za kateri koli element, kar vam omogoča nadzor nad vsebino, ki lahko uide svojim mejam. Prelivanje besedila je podobno, čeprav velja samo za besedilo in vam omogoča, da svojim pravilom dodate dodatne parametre. Za ta projekt smo uporabili samo overflow (uporabili smo ga za omejitev velikosti telesa naše strani), vendar si lahko preberete o prelivanju besedila na W3Schools Spletna stran.

Uporaba CSS za vaše spletne postavitve

CSS je izjemno zmogljivo orodje, ki spletnim oblikovalcem in razvijalcem omogoča ustvarjanje osupljivih spletnih mest z uporabo kode. Priporočamo vam, da si ogledate CodePen, ki smo ga posredovali na začetku članka, saj vam bo to omogočilo še globlji vpogled v delovanje vseh teh orodij. Poleg tega se lahko poigrate z glavo, ki smo jo izdelali, da dodate svoje lastne piko na i.

8 bistvenih CSS nasvetov in trikov, ki bi jih moral poznati vsak razvijalec

Ali uporabljate te ključne metode CSS za hiter potek dela in čudovito spletno oblikovanje?

Preberite Naprej

O avtorju