10 neuvěřitelných CSS triků pro transformaci vašich webových rozložení

Každý, kdo má zkušenosti s webovým designem, ať už jste používali tvůrce webových stránek pro vlastní potřebu nebo vytvořili web od nuly, pravděpodobně již o CSS slyšel. Tento neuvěřitelně výkonný nástroj lze použít k transformaci rozvržení vašeho webu, což vám umožní převzít kontrolu nad webem a dosáhnout vaší kreativní vize. Ale jak můžete pomocí kaskádových stylů odemknout potenciál vašeho dalšího webu?

Tato příručka pouze podrobně popisuje řadu vlastností CSS, které byly všechny použity k vytvoření záhlaví, které můžete vidět na obrázku výše. Tento projekt najdete zde na CodePen, což vám dává možnost vyzkoušet si to na vlastní kůži.

Manipulace s obrázky CSS

Prvním krokem, který musíme udělat pro vytvoření sekce záhlaví, je přidání obrázků na stránku. K dosažení tohoto cíle můžete použít celou řadu metod, proto jsme probrali ty nejoblíbenější spolu s několika triky, které vám pomohou s manipulací s obrázky.

1. Obrázek pozadí CSS

Chceme mít pro naši hlavičku obrázek na pozadí na celou obrazovku a vlastnost CSS background-image je ideální. Nejprve musíme vytvořit kontejner pro náš obrázek (a zbytek prvků v záhlaví).

Začali jsme přidáním tagu div s "header" jako jeho třídou, následovaným jeho nastavením výška do 100vh a jeho šířka do 100vw; tím získáme rámeček, který má přesně stejnou velikost jako výřez. Přidali jsme také pravidlo CSS pro tělo stránky s jeho přetečení nastaveno na skryté a jeho okraje nastaveny na 0px.

S kontejnerem na místě můžeme přidat obrázek na pozadí a k dosažení tohoto cíle potřebujeme tři různá pravidla CSS. První, obrázek na pozadí, potřebuje URL, aby fungoval jako zdroj obrázku na pozadí, a my jsme k tomu použili praktický katalog Unsplash. Musíme také nastavit velikost pozadí k pokrytí a pozice pozadí dolů, ale možná budete chtít s nimi experimentovat, abyste dosáhli nejlepších výsledků.

2. CSS Background-Blend-Mode

Režimy prolnutí CSS umožňují prolnutí obrázků a textu, podobně jako funkce prolnutí v softwaru, jako je Adobe Photoshop. Aby režimy prolnutí fungovaly s naším obrázkem na pozadí, nastavili jsme barva pozadí až poloprůhledná bílá před přidáním režimu prolnutí, který jsme chtěli použít.

Po tomto režim prolnutí pozadí byl nastaven na měkké světlo, což nám umožňuje změkčit obraz.

3. Clip-Path CSS

Pro náš další trik budeme používat pravidlo zvané clip-path. Při použití značek HTML img můžete nastavit cestu, která skryje části obrázků, se kterými pracujete. K tomu můžete použít obecné tvary, ale můžete také použít aplikaci generující SVG k vytvoření složitějšího designu.

Přidali jsme značku div s "flex_image_box", která funguje jako kontejner pro tři obrázky, pomocí vlastnosti display CSS z něj uděláme flexbox (o tom si povíme později). Do tagu div byly přidány tři značky img s ID nastavenými jako "img1", "img2" a "img3". Nastavení šířka každého obrázku do 600px, jsme schopni ponechte vlastnost height prázdnou beze změny poměru stran obrázků; nyní je čas přidat naši klipovou cestu!

K vytvoření našich tří trojúhelníků jsme použili stejnou polygonovou klipovou cestu pro img1 a img3, s obrácenou verzí pro img2. Také jsme si museli pohrát s umístěním našeho flex-boxového kontejneru, abychom se ujistili, že obrázky sedí na obrazovce ve správné poloze. Naše pravidla clip-path si můžete prohlédnout níže.

4. Neprůhlednost CSS

Neprůhlednost nastavuje úroveň průhlednosti libovolného prvku HTML. Nastavili jsme neprůhlednost našich obrázků na 90 %, čímž jsou mírně neprůhledné, aby pěkně splývaly s pozadím.

CSS responzivní text a obrázky

Umění jsme již prozkoumali vytváření úžasných responzivních webových stránek pomocí HTML, CSS a JavaScriptu v minulosti, ale můžeme stavět na principech, kterým již rozumíte, a poskytnout tak hlubší vhled do dovedností, které potřebujete, abyste si osvojili rozvržení svých webových stránek.

1. CSS responzivní/relativní jednotky

Jednotky CSS jako px, pt a cm jsou absolutní jednotky, což znamená, že je webový prohlížeč vykreslí ve stejné velikosti bez ohledu na šířku a výšku okna, které zabírají. Relativní jednotky jsou různé a vytvářejí výšky a délky, které jsou relativní k jiným rozměrům, jako je okno prohlížeče nebo rodičovský prvek. Níže uvedené relativní jednotky jsou běžně používané a nezbytné pro responzivní webdesign.

• em: Tato jednotka se obvykle používá s textem. Je relativní k velikosti písma aktuálního prvku, takže 4em je čtyřikrát větší než nastavená velikost písma.
• rem: Stejně jako em, rem je relativní k velikosti písma prvku; kořenový prvek v hierarchii se používá k definování výstupní velikosti.
• vw/vh: Při určení šířky a výšky na základě velikosti zobrazované oblasti se 2vw rovná 2 % šířky prohlížeče, zatímco 2vh se rovná 2 % výšky prohlížeče.
• %: Jednotka % vypočítá rozměry na základě velikosti rodiče prvku.
• vmin/vmax: Tyto jednotky vytvářejí rozměry vzhledem k 1 % nejmenších nebo největších rozměrů výřezu a poskytují prvkům prostředky, které přímo reagují na velikost okna prohlížeče.

2. CSS Velikost písma

Tuto vlastnost lze nastavit pomocí výchozích hodnot, které jsou předdefinovány buď v hlavní šabloně stylů webu nebo ve webovém prohlížeči uživatele. Tyto hodnoty zahrnují medium, xx-small, x-small, small, large, x-large a xx-large, přičemž medium je nastaveno jako výchozí pro jakýkoli text, který nemá CSS tag velikosti fontu. Alternativně lze při použití vlastnosti CSS font-size použít relativní hodnoty, a to je metoda, kterou jsme použili, abychom zajistili, že text v naší sekci záhlaví bude mít vhodnou velikost pro všechny výřez.

Do našeho HTML jsme přidali dvě značky nadpisů, které nám umožňují přidat do projektu text. Jedna je hlavní velká hlavička, zatímco druhá je podhlavička a obě používají relativní jednotky.

Příbuzný: Jak změnit velikost písma HTML v CSS

3. Šířka a výška CSS

Všechny prvky HTML přicházejí s rozměry výšky a šířky, ať už jde o značky div, img, a nebo jakýkoli jiný typ značky. Tyto rozměry lze automaticky nastavit na výchozí hodnoty, ale mohou je také diktovat weboví designéři pomocí správných pravidel; pro tuto hlavičku jsme použili obě tyto metody.

Pro obrázek na pozadí byly použity responzivní jednotky s výškou nastavenou na 100vh a šířkou nastavenou na 100vw, ale pro naše tři obrázky jsme také použili absolutní jednotky. Stojí za to prozkoumat a experimentovat s jednotkami šířky a výšky CSS, přičemž možnosti jako „zdědit“ poskytují znamená převzít rozměry nadřazeného prvku a existuje spousta dalších podobných triků, které můžete použít.

4. CSS Mix-Blend-Mode

CSS mix-blend-mode je velmi podobný režimu prolnutí pozadí, pouze jej lze použít na jakýkoli prvek, nikoli výhradně na pozadí. Tuto vlastnost jsme použili v našem nadpisu H1, abychom přidali texturu a učinili projekt zajímavějším. Začali jsme nastavením našeho barva textu na černou, následuje nastavení mix-blend-mode pro překrytí.

Stojí za to prozkoumat různé možnosti prolnutí, které máte při práci s textem, protože pozadí s jedinečnými barevnými profily budou reagovat odlišně na nastavení, která použijete.

5. CSS Text-Transform

CSS text-transform je chytrá vlastnost, která umožňuje návrhářům změnit velikost písmen textu na svých webových stránkách, aniž by to ovlivnilo způsob, jakým jej vyhledávače čtou. Například máme nastavit transformaci textu na velká písmena v hlavičce H1, takže každé písmeno bude velké, bez ohledu na to, jak je zadáme do našeho HTML.

Vlastnosti přetečení CSS

HTML se často může zdát jako pevný rámec, který nastavuje přísné hranice obsahu na vašich webových stránkách, ale to neplatí, když se používají vlastnosti přetečení.

CSS Overflow & Text-Overflow

Overflow a text-overflow jsou velmi podobné vlastnosti CSS. Přetečení lze použít na jakýkoli prvek, což vám dává kontrolu nad obsahem, který je schopen uniknout jeho hranicím. Text-overflow je podobný, i když se vztahuje pouze na text a dává vám možnost přidat do pravidel další parametry. Pro tento projekt jsme použili pouze přetečení (použili jsme ho k omezení velikosti těla naší stránky), ale o přetečení textu si můžete přečíst na W3Schools webová stránka.

Použití CSS pro rozvržení webu

CSS je neuvěřitelně výkonný nástroj, který umožňuje webovým designérům a vývojářům vytvářet úžasné webové stránky pomocí kódu. Doporučujeme vám, abyste se podívali na CodePen, které jsme poskytli na začátku článku, protože vám to poskytne ještě hlubší pohled na to, jak všechny tyto nástroje fungují. Navíc si můžete hrát s hlavičkou, kterou jsme vytvořili, abyste přidali své vlastní konečné úpravy.

8 základních CSS tipů a triků, které by měl znát každý vývojář

Používáte tyto klíčové metody CSS pro rychlý pracovní postup a krásný webový design?

Přečtěte si další

O autorovi