Ako vytvoriť pásku CSS
Hovoríme o tom CSS pásky vo webovom dizajne, keď a pásik boxu (nazývaná páska) obalí inú škatuľu. Je to pomerne používaná konštrukčná technika zdobiť text, najmä nadpisy. Na webových stránkach W3C môžete zistiť, ako môžu správne použiť CSS pásky obsah štruktúry jemným spôsobom.
Takže v tomto príspevku budeme vidieť ako vytvoriť jednoduchú stuhu CSS ktoré môžete použiť na rozšíriť nadpisy na vašich webových stránkach. Vďaka Transformácie CSS, môžeme vytvoriť tento dizajn s oveľa jednoduchšou kódovou základňou ako predtým.
Môžete sa pozrieť na posledné demo nižšie.
HTML a základné štýly
Najprv vytvoríme a značku, ktorú označujeme .karta selektor, ktorý predstavuje a obdĺžnik box bude páska obal okolo.
Takisto nastavíme základné rozmery a farba pozadia s CSS.
.karta farba pozadia: béžová; výška: 300px; margin: 40px; šírka: 500px;
Stredná časť pásky
Použijeme a Premenná CSS (nám umožňuje ukladať a znovu použiť hodnotu CSS) --p na uložte hodnotu polstrovania. Hodnota vypchávka nehnuteľnosť používa var (- p) syntax pre ľavé a pravé paddings pásky tak, aby to mohlo byť ľahko rozšíriť. --p neskôr bude premenná viacnásobné použitie; že náš kód je flexibilný.
.stuha - p: 15px; farba pozadia: rgb (170,170,170); výška: 60px; polstrovanie: 0 var (- p); šírka: 100%;
Na obrazovke nižšie uvidíte, ako má vyzerať demo na tomto mieste:
Zostrihnutie pásky
Musíme tiež uprostred pásky. my posuňte ju doľava podľa veľkosti výplne (označené značkou --p premenná) pomocou relatívneho umiestnenia.
.stuha - p: 15px; farba pozadia: rgb (170,170,170); výška: 60px; polstrovanie: 0 var (- p); pozícia: relatívna; pravé: var (- p); šírka: 100%;
Aktualizované demo:
Strany pásky
Teraz vytvoríme ľavej a pravej strane pásky to by sa malo zdanlivo ohýbať okolo okraja karty. Na tento účel používame oba : before a : po pseudo-prvky z .stuha.
Oba pseudoelementy zdedia farbu pozadia .stuha, a používame filter: jas (.5) pravidlo, aby trochu stmavili ich farbu. Sú tiež absolútne umiestnená v rámci ich (relatívne umiestneného) rodiča.
Ich šírka musí byť rovnaké ako veľkosť paddingu, a umiestňujeme ich na ľavý a pravý koniec pásky pomocou vľavo: 0 a doprava: 0 pravidlá štýlu.
.stuha: pred, .ribbon: po background-color: inherit; obsah: "; zobrazenie: blok; filter: jas (.5); výška: 100%; pozícia: absolútna; šírka: var (- p); doprava: 0;
Stuha s bočnými stranami, ktoré sme práve pridali, vyzerá takto:
Skosenie strán
Na vytvorenie strán pásky vyzerajú ohnuté, musíme vyklopte strany o 45 °. transformovať: šikmý () Pravidlo CSS skresľuje prvky vertikálne.
.stuha: pred left: 0; transformácie: Skew (45deg); .ribbon: po vpravo: 0; transformácie: Skew (-45deg);
Ako vidíte okraje strán nie sú zarovnané po transformácii, takže musíme vytiahnite ich.
Zarovnajte strany
na určiť správnu dĺžku ktorou potrebujeme posunúť strany dole, sa obrátime na trigonometriu. Potrebujeme nájsť X, ako y je šírka bokov (rovná sa veľkosti čalúnenia .stuha) a uhla θ je 45 ° (uhol skosenia).
Výsledok X potom je potrebné znížiť na polovicu, pretože tam sú aj ľavá a pravá strana.
Ak používate akýkoľvek preprocesor CSS, skontrolujte, či má opálenie funkcia, inak sa obráťte na tangenciálnu tabuľku alebo kalkulačku zistiť tangenciálnu hodnotu uhla. Máme šťastie ako tan 45 ° je 1, čo znamená, že hodnota X sa rovná y v našom prípade.
.stuha: pred, .ribbon: po background-color: inherit; obsah: ", zobrazenie: blok, filter: jas (.5), výška: 100%, poloha: absolútne, horná: calc (var (- p) / 2);
od tej doby X museli byť na polovicu, používame vypočítané () Funkcia CSS na vykonanie rozdelenia --p premenlivý.
Nakoniec musíme vyrovnajte strany pozdĺž osi z tak tiež pridajte z-index: -1 pravidlo na stranách, aby sa umiestnite ich za strednú časť pásky.
.stuha: pred, .ribbon: po background-color: inherit; obsah: ", zobrazenie: blok, filter: jas (.5), výška: 100%, pozícia: absolútne, top: calc (var (- p) / 2) index: -1;
Teraz, keď sme zarovnali strany, je naša CSS páska hotová.
Nižšie môžete znova pozrieť naživo demo, prosím berte na vedomie, že používa aj niektoré ďalšie stylingy.
