CSS szalag létrehozása
Beszélünk CSS szalagok a web designban, ha a doboz csík (nevezett szalag) becsomagol egy másik dobozt. Ez egy meglehetősen használt tervezési technika díszítse a szöveget, különösen a címsorok. A W3C honlapján ellenőrizheti, hogy a CSS-szalagok megfelelően használhatók-e szerkezeti tartalom finom módon.
Tehát ebben a hozzászólásban látni fogjuk hogyan lehet létrehozni egy egyszerű CSS szalagot amit használhatsz javítsa a fejléceket webhelyén. Köszönet CSS átalakítások, ezt a tervet sokkal egyszerűbb kódbázissal tudjuk létrehozni, mint korábban.
Az alábbi végső bemutatót meghallgathatja.
HTML és alapvető stílusok
Először hozzunk létre egy címkével jelöljük .kártya szelektor, amely a négyszögletes doboz a szalag betakar körül.
Azt is beállítottuk alapméretek és a háttérszín CSS-el.
.kártya háttérszín: bézs; magasság: 300px; margin: 40px; szélesség: 500px;
A szalag középső része
Használjuk a CSS változó (lehetővé teszi számunkra, hogy tároljuk és újra használjuk a CSS értéket) --p nak nek tárolja a párnázási értéket. A párnázás az ingatlan a var (- p) a szalag bal és jobb lapjainak szintaxisa, hogy az legyen könnyen bővíthető. A --p változó később lesz többször használják; ez a kódot rugalmasvá teszi.
.szalag --p: 15px; háttérszín: rgb (170.170.170); magasság: 60px; párnázás: 0 var (- p); szélesség: 100%;
Az alábbi képernyőképen láthatod, hogyan néz ki a demó ebben a pontban:
A szalag központosítása
Szükségünk van rá helyezze a szalagot középre. Mi nyomja meg a párnázási méretből (a --p változó) relatív pozicionálással.
.szalag --p: 15px; háttérszín: rgb (170.170.170); magasság: 60px; párnázás: 0 var (- p); pozíció: relatív; jobbra: var (- p); szélesség: 100%;
A frissített demó:
A szalag oldalai
Most létrehozzuk a a szalag bal és jobb oldala látszólag meg kell hajlítania a kártya szélét. Ehhez mind a :előtt és :után pszeudo-elemei .szalag.
Mindkét pszeudoelem örökli a háttérszínt .szalag, és használjuk a szűrő: fényerő (.5) szabályozza, hogy egy kicsit sötétítse a színét. Ők szintén teljesen elhelyezve a (viszonylag elhelyezett) szülőjükön belül.
Szélességüknek kell lennie ugyanaz, mint a padding mérete, és elhelyezzük őket a szalag bal és jobb végéhez használni a balra: 0 és jobb: 0 stílusszabályok.
.szalag: korábban, .ribbon: után háttérszín: öröklés; tartalom: "; kijelző: blokk; szűrő: fényerő (.5); magasság: 100%; pozíció: abszolút; szélesség: var (- p); .ribbon: bal: 0; .ribbon: jobb: 0;
Most az az oldal, amelynek az oldala van, most az alábbiak szerint néz ki:
Döntse az oldalakat
Ahhoz, hogy a szalagok oldalai legyenek nézzen hajlítva, kell az oldalakat 45 ° -kal ferdessze le. A átalakítás: skewy () CSS szabály az elemeket függőlegesen ferde.
.szalag: előtt bal: 0; transzformáció: skewy (45 °); .ribbon: után right: 0; transzformáció: skewy (-45deg);
Ahogy láthatjuk az oldalak széleit nem igazodnak az átalakulás után, így kell húzza le őket.
Igazítsa az oldalakat
Nak nek határozza meg a megfelelő hosszúságot amivel le kell mozgatnunk az oldalakat, a trigonometriához fordulunk. Amit meg kell találnunk x, mint y az oldalak szélessége (egyenlő a párnázási méretével) .szalag), és a szög θ 45 ° (a ferde szög).
Az eredmény x azután felére kell csökkenteni, bal és jobb oldala is van.
Ha bármilyen CSS előfeldolgozó ellenőrzést használ, akkor van-e a Cser egyébként hivatkozzon egy érintő diagramra vagy egy számológépre megtudja a szög tangens értékét. Szerencsénk vagyunk barna 45 ° jelentése 1, ami azt jelenti, hogy az x egyenlő y a mi esetünkben.
.szalag: korábban, .ribbon: után háttérszín: öröklés; tartalom: "; kijelző: blokk; szűrő: fényerő (.5); magasság: 100%; pozíció: abszolút; felső: számított (var (- p) / 2); szélesség: var (- p);
Mivel x felére kellett csökkenteni, a Calc () CSS függvény a --p változó.
Végül meg kell illessze az oldalakat a z-tengely mentén is, így adjuk hozzá a z-index: -1 szabályozzon az oldalra, hogy helyezze őket a szalag középső részének mögé.
.szalag: korábban, .ribbon: után háttérszín: öröklés; tartalom: "; kijelző: blokk; szűrő: fényerő (.5); magasság: 100%; pozíció: abszolút; felső: számított (var (- p) / 2); szélesség: var (- p); z- index: -1;
Most, hogy összehangoltuk az oldalakat, elkészült a CSS szalagunk.
Az alábbiakban újra megnézheted az élő demót, kérjük, vegye figyelembe, hogy néhány további stílust is használ.
