10 hihetetlen CSS-trükk a webes elrendezések átalakításához

Bárki, akinek van tapasztalata webdizájnban, akár barkácsolt webhelykészítőket, akár a semmiből készített webhelyet, valószínűleg hallott már a CSS-ről. Ezzel a hihetetlenül hatékony eszközzel átalakíthatja webes elrendezéseit, így átveheti az irányítást webhelye felett, és megvalósíthatja kreatív elképzeléseit. De hogyan használhatod a lépcsőzetes stíluslapokat a következő webhelyedben rejlő lehetőségek kiaknázására?

Ez az útmutató csak egy sor olyan CSS-tulajdonságot részletez, amelyeket a fenti képen látható fejléc létrehozásához használtak. Ezt a projektet itt találja meg CodePen, lehetőséget adva arra, hogy kipróbáld magad.

CSS képkezelés

Az első lépés, amit meg kell tennünk a fejléc rész felépítéséhez, képek hozzáadása az oldalhoz. Számos módszert használhat a cél eléréséhez, ezért bemutattuk a legnépszerűbbeket, valamint néhány trükköt, amelyek segítenek a képek manipulálásában.

1. CSS háttér-kép

Teljes képernyős háttérképet szeretnénk a fejlécünkhöz, és a background-image CSS tulajdonság ideális. Először is létre kell hoznunk egy tárolót a képünkhöz (és a fejlécen belüli többi elemhez).

Kezdetben hozzáadtunk egy div címkét, amelynek osztálya a "header", majd beállítottuk az osztályát magassága 100vh és annak szélessége 100VW; így egy dobozt kapunk, amely pontosan akkora, mint a nézetablak. Hozzáadtunk egy CSS-szabályt is az oldal törzséhez, annak túlcsordulás rejtettre állítva és annak margók 0 képpontra állítva.

Ha a konténer a helyén van, hozzáadhatunk háttérképet, és három különböző CSS-szabályra van szükségünk a cél eléréséhez. Az első, a háttérképnek szüksége van egy URL-re, hogy a háttérkép forrásaként szolgáljon, és ehhez a praktikus Unsplash katalógust használtuk. Azt is be kell állítanunk a háttér méretben a borítóig és a háttér-pozíció lefelé, de érdemes lehet ezekkel kísérletezni a legjobb eredmény érdekében.

2. CSS háttér-keverési mód

A CSS keverési módok lehetővé teszik a képek és szövegek keverését, hasonlóan az Adobe Photoshophoz hasonló szoftverek keverési funkciójához. Ahhoz, hogy a keverési módok működjenek a háttérképünkkel, beállítjuk a háttérszíntől félig átlátszó fehérig mielőtt hozzáadnánk a használni kívánt keverési módot.

Ezt követve, a background-blend-mode lágy fényre volt állítva, lehetővé téve a kép lágyítását.

3. CSS vágógörbe

Következő trükkünkhöz a clip-path nevű szabályt fogjuk használni. Az img HTML címkék használatakor beállíthat egy elérési utat, amely elrejti a képek egyes részeit, amelyekkel dolgozik. Választhat általános alakzatok használata mellett, de használhat egy SVG-generáló alkalmazást is, hogy bonyolultabb dizájnt hozzon létre.

Hozzáadtunk egy div címkét a "flex_image_box"-mal, hogy három kép tárolójaként működjön, és a Display CSS tulajdonságot használva flexboxmá alakítjuk (erről később beszélünk). Három img címkét adtunk a div címkén belül, az azonosítók beállítása „img1”, „img2” és „img3”. Beállítása a minden kép szélessége 600 képpont, mi képesek vagyunk hagyja üresen a height tulajdonságot a képek képarányának megváltoztatása nélkül; itt az ideje, hogy hozzáadjuk a klip-útvonalunkat!

A három háromszögünk elkészítéséhez ugyanazt a sokszög vágógörbét használtuk az img1 és img3 esetében, az img2 esetében pedig egy fordított változatot. Játszanunk kellett a flex-box konténerünk elhelyezésével is, hogy megbizonyosodjunk arról, hogy a képek a megfelelő pozícióban helyezkednek el a képernyőn. A klipútvonal szabályaink alább láthatók.

4. CSS átlátszatlanság

Az átlátszatlanság beállítja bármely HTML-elem átlátszósági szintjét. Beállítottuk a képeink átlátszatlansága 90%-ra, enyhén átlátszatlanná téve őket, így szépen összeolvadnak a háttérrel.

CSS reszponzív szöveg és képek

Már felfedeztük a művészetet lenyűgöző reszponzív webhelyek létrehozása HTML, CSS és JavaScript használatával a múltban, de építhetünk az Ön által már ismert elvekre, és mélyebb betekintést nyújtunk a webhely elrendezésének elsajátításához szükséges készségekbe.

1. CSS-reszponzív/relatív egységek

A CSS-egységek, mint például a px, pt és cm, abszolút egységek, és ez azt jelenti, hogy a webböngésző ugyanolyan méretben jeleníti meg őket, függetlenül az elfoglalt ablak szélességétől és magasságától. A relatív egységek különbözőek, és más mérésekhez, például a böngészőablakhoz vagy a szülőelemhez viszonyított magasságot és hosszúságot eredményeznek. Az alábbi relatív egységek általánosan használtak, és elengedhetetlenek a reszponzív webdesignhoz.

• em: Ezt az egységet általában szöveggel együtt használják. Az aktuális elem betűméretéhez viszonyítva 4em négyszer akkora, mint a beállított betűméret.
• rem: Az em-hez hasonlóan a rem is relatív egy elem betűméretéhez; a hierarchia gyökéreleme a kimeneti méret meghatározására szolgál.
• vw/vh: A szélességet és magasságot a nézetablak mérete alapján határozzuk meg, a 2vw a böngésző szélességének 2%-a, míg a 2vh a böngésző magasságának 2%-a.
• %: A % egység az elem szülőjének mérete alapján számítja ki a méreteket.
• vmin/vmax: Ezek az egységek a nézetablak legkisebb vagy legnagyobb méretének 1%-ához viszonyítva állítják elő a méreteket, így biztosítva az elemeket, hogy közvetlenül reagáljanak a böngészőablak méretére.

2. CSS betűméret

Ez a tulajdonság a webhely fő stíluslapja vagy a felhasználó webböngészője által előre meghatározott alapértelmezett értékekkel állítható be. Ezek közé az értékek közé tartozik a medium, xx-small, x-small, small, large, x-large és xx-large, és a medium érték van beállítva alapértelmezettként minden olyan szövegnél, amelynél nincs betűméretű CSS-címke. Alternatív megoldásként relatív értékek is használhatók a font-size CSS tulajdonság használatakor, és ez a módszer, amelyet annak biztosítására használtunk, hogy a fejléc szakaszunkban lévő szöveg mérete megfelelő legyen bármely számára nézetablak.

Két fejléc címkét adtunk hozzá a HTML-hez, lehetővé téve számunkra, hogy szöveget adjunk a projekthez. Az egyik egy fő nagy fejléc, míg a másik egy alfejléc, és mindkettő relatív egységeket használ.

Összefüggő: Hogyan változtassuk meg a HTML betűméretet a CSS-ben

3. CSS szélesség és magasság

Minden HTML-elem rendelkezik magassági és szélességi méretekkel, legyen szó div, img, a vagy bármilyen más típusú címkéről. Ezek a méretek automatikusan alapértelmezett értékekre állíthatók, de webtervezők is bediktálhatják őket a megfelelő szabályok segítségével; mindkét módszert alkalmaztuk ehhez a fejléchez.

A háttérképhez reszponzív mértékegységeket használtunk, a magasságot 100 Vh-ra, a szélességet pedig 100 VW-ra állítottuk, de a három képünkhöz abszolút mértékegységeket is használtunk. Érdemes felfedezni és kísérletezni a CSS szélesség és magasság mértékegységeivel, az olyan opciókkal, mint az „örököl” egy szülőelem méreteinek átvételét jelenti, és rengeteg más, ehhez hasonló trükköt használhat.

4. CSS Mix-Blend-Mode

A CSS mix-blend-mode nagyon hasonlít a háttér-keverési módhoz, csak bármely elemre alkalmazható, nem pedig kizárólag a hátterekre. Ezt a tulajdonságot a H1 fejlécben használtuk, hogy textúrát adjunk, és érdekesebbé tegyük a projektet. Azzal kezdtük, hogy beállítottuk szöveg színe feketére, majd beállítja a keverés-keverési mód az átfedéshez.

Érdemes megvizsgálni a különböző keverési lehetőségeket a szöveg kezelésekor, mivel az egyedi színprofilokkal rendelkező hátterek eltérően reagálnak az Ön által használt beállításokra.

5. CSS szöveg-transzformáció

A CSS-szövegátalakítás egy okos tulajdonság, amely lehetővé teszi a tervezők számára, hogy módosítsák a szöveg kis- és nagybetűjét webhelyeiken anélkül, hogy befolyásolnák a keresőmotorok olvasási módját. Nálunk például van a szövegtranszformációt nagybetűre állítja a H1 fejlécünkben, minden betűt nagybetűvé téve, függetlenül attól, hogy hogyan írjuk be a HTML-be.

CSS túlcsordulási tulajdonságok

A HTML gyakran merev keretrendszernek tűnhet, amely szigorú határokat szab a webhelyek tartalmának, de ez nem így van, ha túlcsordulási tulajdonságokat használnak.

CSS-túlcsordulás és szöveg-túlcsordulás

A túlcsordulás és a szövegtúlcsordulás nagyon hasonló CSS-tulajdonságok. A túlcsordulás bármely elemre alkalmazható, így Ön irányíthatja azt a tartalmat, amely képes kikerülni a határait. A szövegtúlcsordulás hasonló, bár csak a szövegre vonatkozik, és lehetővé teszi további paraméterek hozzáadását a szabályokhoz. Csak a túlcsordulást használtuk ehhez a projekthez (az oldalunk törzsének méretének korlátozására használtuk), de a szöveg-túlcsordulásról a W3Schools weboldal.

CSS használata a webes elrendezésekhez

A CSS egy hihetetlenül hatékony eszköz, amely lehetővé teszi a webdesignerek és fejlesztők számára, hogy lenyűgöző webhelyeket hozzanak létre kód segítségével. Javasoljuk, hogy vessen egy pillantást a cikk elején bemutatott CodePenre, mert így még mélyebb betekintést nyerhet ezen eszközök működésébe. Ezenkívül játszhat az általunk készített fejlécekkel, hogy saját simításokat adjon hozzá.

8 alapvető CSS-tipp és trükk, amelyet minden fejlesztőnek tudnia kell

Ezeket a kulcsfontosságú CSS-módszereket használja a gyors munkafolyamat és a gyönyörű webdizájn érdekében?

Olvassa el a következőt

A szerzőről