10 nevjerojatnih CSS trikova za transformaciju vašeg web izgleda

Svatko s iskustvom u web dizajnu, bez obzira da li ste koristili DIY alate za izradu web stranica ili napravili web stranicu od nule, vjerojatno je već čuo za CSS. Ovaj nevjerojatno moćan alat može se koristiti za transformaciju vaših web izgleda, dajući vam moć da preuzmete kontrolu nad svojom web lokacijom i ostvarite svoju kreativnu viziju. Ali kako možete koristiti kaskadne tablice stilova da biste otključali potencijal svoje sljedeće web stranice?

Ovaj vodič će samo detaljno opisati niz CSS svojstava koja su sva korištena za stvaranje zaglavlja koje možete vidjeti na gornjoj slici. Ovaj projekt možete pronaći ovdje na CodePen, dajući vam priliku da sami isprobate.

CSS manipulacija slikama

Prvi korak koji trebamo poduzeti da bismo izgradili odjeljak zaglavlja je dodavanje slika na stranicu. Za postizanje ovog cilja možete koristiti niz metoda, pa smo pokrili najpopularnije, zajedno s nekoliko trikova koji će vam pomoći da manipulirate svojim slikama.

1. CSS pozadinska slika

Želimo imati pozadinsku sliku preko cijelog zaslona za naše zaglavlje, a svojstvo pozadinske slike CSS je idealno. Prvo, moramo stvoriti spremnik za našu sliku (i ostale elemente unutar zaglavlja).

Počeli smo dodavanjem div oznake s "header" kao klasom, nakon čega smo postavili njenu visina do 100vh I je širina do 100vw; ovo nam daje okvir koji je točno iste veličine kao i okvir za prikaz. Dodali smo i CSS pravilo za tijelo stranice, s njegovim preljev postavljen na skriven I je margine postavljene na 0px.

S postavljenim spremnikom možemo dodati pozadinsku sliku, a postoje tri različita CSS pravila koja su nam potrebna da bismo postigli ovaj cilj. Prva, pozadinska slika, treba URL da djeluje kao izvor pozadinske slike, a za to smo koristili zgodan katalog Unsplash. Također moramo postaviti veličina pozadine za pokrivanje i pozadinski položaj prema dnu, ali možda ćete htjeti eksperimentirati s njima za najbolje rezultate.

2. CSS Background-Blend-Mode

CSS načini miješanja omogućuju miješanje slika i teksta, slično kao značajka miješanja u softveru kao što je Adobe Photoshop. Kako bi načini miješanja funkcionirali s našom pozadinskom slikom, postavili smo boja pozadine do poluprozirne bijele prije dodavanja načina miješanja koji smo željeli koristiti.

Nakon ovoga, background-blend-mode je postavljen na meko svjetlo, što nam omogućuje da ublažimo sliku.

3. CSS Clip-Path

Za naš sljedeći trik koristit ćemo pravilo zvano clip-path. Kada koristite img HTML oznake, možete postaviti put koji će sakriti dijelove slika s kojima radite. Za to možete odabrati korištenje općih oblika, ali možete koristiti i aplikaciju za generiranje SVG-a za stvaranje složenijeg dizajna.

Dodali smo div oznaku s "flex_image_box" koja djeluje kao spremnik za tri slike, koristeći svojstvo prikaza CSS da ga pretvorimo u flexbox (o tome ćemo kasnije). Tri oznake img dodane su unutar div oznake, s ID-ovima postavljenim kao "img1", "img2" i "img3". Postavljanje širina svake slike na 600px, u mogućnosti smo ostavite svojstvo visine praznim bez promjene omjera slike; sada je vrijeme da dodamo naš clip-path!

Da bismo stvorili naša tri trokuta, koristili smo isti poligonski clip-path za img1 i img3, s obrnutom verzijom na mjestu za img2. Također smo se morali poigrati s pozicioniranjem našeg flex-box spremnika kako bismo bili sigurni da slike sjedaju na pravom mjestu na ekranu. Naša pravila o stazi isječaka mogu se vidjeti u nastavku.

4. CSS neprozirnost

Neprozirnost postavlja razinu transparentnosti bilo kojeg HTML elementa. Postavili smo neprozirnost naših slika do 90%, čineći ih malo neprozirnim kako bi se lijepo stopili s pozadinom.

CSS responzivni tekst i slike

Već smo istražili umjetnost stvaranje zadivljujućih responzivnih web stranica pomoću HTML-a, CSS-a i JavaScripta u prošlosti, ali možemo se graditi na principima koje već razumijete, pružajući dublji uvid u vještine koje su vam potrebne za ovladavanje izgledom vaše web stranice.

1. CSS responzivne/relativne jedinice

CSS jedinice poput px, pt i cm su apsolutne jedinice, a to znači da će ih web preglednik prikazati u istoj veličini bez obzira na širinu i visinu prozora koji zauzimaju. Relativne jedinice su različite, proizvode visine i duljine koje su relativne u odnosu na druga mjerenja, kao što je prozor preglednika ili roditeljski element. Relativne jedinice u nastavku se obično koriste i bitne su za responzivni web dizajn.

• em: Ova jedinica se obično koristi s tekstom. To je relativno u odnosu na veličinu fonta trenutnog elementa, čineći 4em četiri puta većim od postavljene veličine fonta.
• rem: Kao i em, rem je relativan u odnosu na veličinu fonta elementa; korijenski element u hijerarhiji koristi se za definiranje izlazne veličine.
• vw/vh: Određivanje širine i visine na temelju veličine okvira za prikaz, 2vw je jednako 2% širine preglednika dok 2vh jednako 2% visine preglednika.
• %: Jedinica % izračunava dimenzije na temelju veličine nadređenog elementa.
• vmin/vmax: Ove jedinice proizvode dimenzije u odnosu na 1% najmanjih ili najvećih dimenzija okvira za prikaz, dajući elementima sredstva da izravno reagiraju na veličinu prozora preglednika.

2. Veličina CSS fonta

Ovo svojstvo može se postaviti korištenjem zadanih vrijednosti koje su unaprijed definirane ili glavnim stilovima web stranice ili korisnikovim web preglednikom. Te vrijednosti uključuju srednju, xx-malu, x-malu, malu, veliku, x-veliku i xx-veliku, pri čemu je srednja vrijednost postavljena kao zadano za svaki tekst kojem nedostaje CSS oznaka veličine fonta. Alternativno, relativne vrijednosti mogu se koristiti kada se koristi CSS svojstvo veličine fonta, a to je metoda koju smo upotrijebili kako bismo osigurali da je tekst u našem odjeljku zaglavlja prikladne veličine za bilo koji okvir za prikaz.

Dodali smo dvije oznake naslova u naš HTML, što nam omogućuje dodavanje teksta u projekt. Jedno je glavno veliko zaglavlje, dok je drugo podzaglavlje i oba koriste relativne jedinice.

Povezano: Kako promijeniti veličinu HTML fonta u CSS-u

3. CSS širina i visina

Svi HTML elementi dolaze s dimenzijama visine i širine, bilo da su div, img, a ili bilo koja druga vrsta oznake. Ove se dimenzije mogu automatski postaviti na zadane vrijednosti, ali ih također mogu diktirati web dizajneri koristeći točna pravila; koristili smo obje ove metode za ovo zaglavlje.

Za pozadinsku sliku korištene su responzivne jedinice, s visinom postavljenom na 100vh i širinom na 100vw, ali smo također koristili apsolutne jedinice za naše tri slike. Vrijedi istražiti i eksperimentirati s CSS jedinicama širine i visine, s opcijama kao što je "naslijediti" koje pružaju znači usvojiti dimenzije roditeljskog elementa, a postoji mnoštvo drugih ovakvih trikova koje možete koristiti.

4. CSS Mix-Blend-Mode

CSS način miješanja je vrlo sličan načinu miješanja pozadine, samo što se može primijeniti na bilo koji element, a ne isključivo za pozadinu. Iskoristili smo ovo svojstvo u našem H1 naslovu kako bismo dodali teksturu i učinili projekt zanimljivijim. Počeli smo postavljanjem naše boja teksta u crnu, nakon čega slijedi postavljanje mix-blend-mode za preklapanje.

Vrijedi istražiti različite opcije miješanja koje imate kada radite s tekstom, jer će pozadine s jedinstvenim profilima boja drugačije reagirati na postavke koje koristite.

5. CSS Transformacija teksta

CSS transformacija teksta pametno je svojstvo koje dizajnerima omogućuje promjenu velikih i malih slova teksta na svojim web stranicama bez utjecaja na način na koji ga tražilice čitaju. Na primjer, imamo postaviti text-transform na velika slova na našem H1 naslovu, čineći svako slovo velikim bez obzira na to kako ga unosimo u naš HTML.

Svojstva CSS overflow

HTML se često može činiti kao kruti okvir koji postavlja stroge granice za sadržaj na vašim web stranicama, ali to nije slučaj kada se koriste svojstva preljeva.

CSS Overflow & Text-Overflow

Overflow i text-overflow vrlo su slična CSS svojstva. Overflow se može primijeniti na bilo koji element, dajući vam kontrolu nad sadržajem koji može pobjeći svojim granicama. Text-overflow je sličan, iako se odnosi samo na tekst i daje vam mogućnost dodavanja dodatnih parametara vašim pravilima. Koristili smo samo overflow za ovaj projekt (koristili smo ga da ograničimo veličinu tijela naše stranice), ali o preljevu teksta možete pročitati na W3Schools web stranica.

Korištenje CSS-a za vaše web izglede

CSS je nevjerojatno moćan alat koji web dizajnerima i programerima omogućuje stvaranje zapanjujućih web stranica pomoću koda. Potičemo vas da pogledate CodePen koji smo dali na početku članka, jer će vam to dati još dublji uvid u funkcioniranje svih ovih alata. Osim toga, možete se poigrati zaglavljem koje smo napravili kako biste dodali svoje vlastite završne detalje.

8 osnovnih CSS savjeta i trikova koje bi svaki programer trebao znati

Koristite li ove ključne CSS metode za brz radni tijek i lijep web dizajn?

Pročitajte dalje

O autoru