10 neuveriteľných CSS trikov na transformáciu vašich webových rozložení

Každý, kto má skúsenosti s webovým dizajnom, či už ste použili tvorcov webových stránok pre domácich majstrov alebo vytvorili stránky úplne od začiatku, pravdepodobne už o CSS počul. Tento neuveriteľne výkonný nástroj možno použiť na transformáciu rozloženia webu, čo vám umožní prevziať kontrolu nad webom a dosiahnuť vašu kreatívnu víziu. Ako však môžete použiť kaskádové štýly na odomknutie potenciálu vašej ďalšej webovej stránky?

Táto príručka bude podrobne popisovať iba rozsah vlastností CSS, ktoré boli všetky použité na vytvorenie hlavičky, ktorú môžete vidieť na obrázku vyššie. Tento projekt nájdete tu CodePen, čo vám dáva možnosť vyskúšať si to na vlastnej koži.

Manipulácia s obrázkami CSS

Prvým krokom, ktorý musíme urobiť, aby sme vytvorili sekciu hlavičky, je pridanie obrázkov na stránku. Na dosiahnutie tohto cieľa môžete použiť celý rad metód, preto sme pokryli tie najobľúbenejšie spolu s niekoľkými trikmi, ktoré vám pomôžu pri manipulácii s obrázkami.

1. Obrázok pozadia CSS

Chceme mať pre našu hlavičku obrázok na pozadí na celú obrazovku a ideálna je vlastnosť CSS obrázka na pozadí. Najprv musíme vytvoriť kontajner pre náš obrázok (a ostatné prvky v hlavičke).

Začali sme pridaním značky div s triedou „header“, po ktorej nasledovalo jej nastavenie výška do 100vh a jeho šírka do 100vw; získame tak rámček, ktorý má presne rovnakú veľkosť ako výrez. Pridali sme aj pravidlo CSS pre telo stránky s jeho pretečenie nastavené na skryté a jeho okraje nastavené na 0px.

Keď je kontajner na mieste, môžeme pridať obrázok na pozadí a na dosiahnutie tohto cieľa potrebujeme tri rôzne pravidlá CSS. Prvý, obrázok na pozadí, potrebuje adresu URL, aby fungoval ako zdroj obrázka na pozadí, a na to sme použili praktický katalóg Unsplash. Musíme tiež nastaviť veľkosť pozadia na pokrytie a pozícia pozadia dole, ale možno budete chcieť s nimi experimentovať, aby ste dosiahli čo najlepšie výsledky.

2. CSS Background-Blend-Mode

Režimy prelínania CSS umožňujú prelínať obrázky a text, podobne ako funkcia prelínania v softvéri, akým je Adobe Photoshop. Aby režimy prelínania fungovali s naším obrázkom na pozadí, nastavili sme farba pozadia až polopriehľadná biela pred pridaním režimu prelínania, ktorý sme chceli použiť.

po tomto, režim prelínania pozadia bol nastavený na mäkké svetlo, čo nám umožňuje zjemniť obraz.

3. Clip-Path CSS

Pre náš ďalší trik budeme používať pravidlo nazývané clip-path. Pri používaní značiek HTML img môžete nastaviť cestu, ktorá skryje časti obrázkov, s ktorými pracujete. Na tento účel môžete použiť všeobecné tvary, ale na vytvorenie zložitejšieho dizajnu môžete použiť aj aplikáciu na generovanie SVG.

Pridali sme značku div s "flex_image_box", aby fungovala ako kontajner pre tri obrázky, pomocou vlastnosti display CSS z neho urobíme flexbox (o tom si povieme neskôr). Do značky div boli pridané tri značky img, pričom ID boli nastavené ako "img1", "img2" a "img3". Nastavenie šírka každého obrázka do 600 pixelov, sme schopní ponechajte vlastnosť height prázdnu bez zmeny pomeru strán obrázkov; teraz je čas pridať našu klipovú cestu!

Na vytvorenie našich troch trojuholníkov sme použili rovnakú polygónovú klipovú cestu pre img1 a img3, s obrátenou verziou pre img2. Museli sme sa tiež pohrať s umiestnením nášho kontajnera flex-box, aby sme sa uistili, že obrázky sedia na obrazovke v správnej polohe. Naše pravidlá clip-path si môžete pozrieť nižšie.

4. Nepriehľadnosť CSS

Nepriehľadnosť nastavuje úroveň priehľadnosti akéhokoľvek prvku HTML. Nastavili sme nepriehľadnosť našich obrázkov na 90 %, čím sú mierne nepriehľadné, aby pekne splynuli s pozadím.

CSS responzívny text a obrázky

Umenie sme už preskúmali vytváranie úžasných responzívnych webových stránok pomocou HTML, CSS a JavaScriptu v minulosti, ale môžeme stavať na princípoch, ktorým už rozumiete, a poskytnúť tak hlbší prehľad o zručnostiach, ktoré potrebujete na zvládnutie rozloženia svojich webových stránok.

1. CSS responzívne/relatívne jednotky

Jednotky CSS ako px, pt a cm sú absolútne jednotky, čo znamená, že webový prehliadač ich vykreslí v rovnakej veľkosti bez ohľadu na šírku a výšku okna, ktoré zaberajú. Relatívne jednotky sú rôzne a vytvárajú výšky a dĺžky, ktoré sú relatívne k iným mieram, ako je okno prehliadača alebo nadradený prvok. Nižšie uvedené relatívne jednotky sa bežne používajú a sú nevyhnutné pre responzívny webový dizajn.

• em: Táto jednotka sa zvyčajne používa s textom. Vzťahuje sa na veľkosť písma aktuálneho prvku, takže 4em je štyrikrát väčšia ako nastavená veľkosť písma.
• rem: Podobne ako em, aj rem je relatívna k veľkosti písma prvku; koreňový prvok v hierarchii sa používa na definovanie výstupnej veľkosti.
• vw/vh: Pri určovaní šírky a výšky na základe veľkosti zobrazovanej oblasti sa 2vw rovná 2 % šírky prehliadača, zatiaľ čo 2vh sa rovná 2 % výšky prehliadača.
• %: Jednotka % vypočíta rozmery na základe veľkosti rodiča prvku.
• vmin/vmax: Tieto jednotky vytvárajú rozmery vzhľadom na 1 % najmenších alebo najväčších rozmerov výrezu a poskytujú prvkom prostriedky, ktoré priamo reagujú na veľkosť okna prehliadača.

2. CSS Veľkosť písma

Túto vlastnosť je možné nastaviť pomocou predvolených hodnôt, ktoré sú preddefinované buď v hlavnej šablóne so štýlmi webovej lokality alebo vo webovom prehliadači používateľa. Tieto hodnoty zahŕňajú stredný, xx-small, x-small, malý, veľký, x-veľký a xx-veľký, pričom stredný je nastavený ako predvolený pre akýkoľvek text, ktorému chýba značka CSS veľkosti písma. Alternatívne je možné použiť relatívne hodnoty pri použití vlastnosti CSS veľkosti písma, a to je metóda, ktorú sme použili, aby sme zabezpečili, že text v našej sekcii hlavičky bude mať primeranú veľkosť výrez.

Do nášho HTML sme pridali dve značky nadpisov, ktoré nám umožňujú pridávať text do projektu. Jedna je hlavná veľká hlavička, zatiaľ čo druhá je podhlavička a obe používajú relatívne jednotky.

Súvisiace: Ako zmeniť veľkosť písma HTML v CSS

3. Šírka a výška CSS

Všetky prvky HTML majú rozmery výšky a šírky, či už ide o značku div, img, a alebo akýkoľvek iný typ značky. Tieto rozmery môžu byť automaticky nastavené na predvolené hodnoty, ale môžu ich diktovať aj weboví dizajnéri pomocou správnych pravidiel; pre túto hlavičku sme použili obe tieto metódy.

Pre obrázok na pozadí boli použité responzívne jednotky s výškou nastavenou na 100vh a šírkou nastavenou na 100vw, ale pre naše tri obrázky sme použili aj absolútne jednotky. Stojí za to preskúmať a experimentovať s jednotkami šírky a výšky CSS, pričom možnosti ako „zdediť“ poskytujú znamená prevziať rozmery nadradeného prvku a existuje množstvo ďalších podobných trikov, ktoré môžete použiť.

4. CSS Mix-Blend-Mode

CSS mix-blend-mode je veľmi podobný režimu prelínania pozadia, len ho možno použiť na akýkoľvek prvok, a nie výlučne na pozadie. Túto vlastnosť sme použili v našom nadpise H1, aby sme pridali textúru a urobili projekt zaujímavejším. Začali sme nastavením nášho farba textu na čiernu, po ktorom nasleduje nastavenie mix-blend-mode na prekrytie.

Stojí za to preskúmať rôzne možnosti prelínania, ktoré máte pri práci s textom, pretože pozadia s jedinečnými farebnými profilmi budú reagovať odlišne na nastavenia, ktoré použijete.

5. CSS Text-Transform

CSS text-transform je šikovná vlastnosť, ktorá umožňuje dizajnérom zmeniť veľkosť písmen textu na svojich webových stránkach bez toho, aby to ovplyvnilo spôsob, akým ho vyhľadávače čítajú. Napríklad máme nastavte transformáciu textu na veľké písmená v hlavičke H1, pričom každé písmeno bude veľké bez ohľadu na to, ako ho zadáme do nášho HTML.

Vlastnosti pretečenia CSS

HTML sa často môže zdať ako pevný rámec, ktorý stanovuje prísne hranice obsahu na vašich webových stránkach, ale to neplatí, keď sa používajú vlastnosti pretečenia.

CSS Overflow & Text-Overflow

Overflow a text-overflow sú veľmi podobné vlastnosti CSS. Pretečenie možno použiť na akýkoľvek prvok, čo vám dáva kontrolu nad obsahom, ktorý je schopný uniknúť z jeho hraníc. Pretečenie textu je podobné, aj keď sa vzťahuje len na text a dáva vám možnosť pridať do pravidiel ďalšie parametre. Pre tento projekt sme použili iba pretečenie (použili sme ho na obmedzenie veľkosti tela našej stránky), ale o pretečení textu si môžete prečítať na W3Schools webové stránky.

Použitie CSS pre vaše webové rozloženia

CSS je neuveriteľne výkonný nástroj, ktorý umožňuje webovým dizajnérom a vývojárom vytvárať úžasné webové stránky pomocou kódu. Odporúčame vám pozrieť sa na CodePen, ktoré sme poskytli na začiatku článku, pretože vám to poskytne ešte hlbší prehľad o tom, ako všetky tieto nástroje fungujú. Navyše sa môžete hrať s hlavičkou, ktorú sme vytvorili, aby ste pridali svoje vlastné konečné úpravy.

8 základných CSS tipov a trikov, ktoré by mal vedieť každý vývojár

Používate tieto kľúčové metódy CSS pre rýchly pracovný tok a krásny webový dizajn?

Prečítajte si ďalej

O autorovi