Jak vytvořit pásu karet CSS
Mluvíme o CSS pásky v designu webu, když proužek krabice (tzv. stuha) zabalí další krabici. Je to poměrně použitá technika návrhu zdobí text, zejména čísla. Na webových stránkách W3C se můžete podívat, jak správně použít CSS pásky obsah struktury jemným způsobem.
Takže v tomto příspěvku uvidíme jak vytvořit jednoduchou pásku CSS můžete použít podpořit záhlaví na vašich webových stránkách. Díky CSS transformace, můžeme vytvořit tento design s mnohem jednodušší kódovou základnu než dříve.
Můžete se podívat na poslední demo níže.
HTML a základní styly
Nejprve vytvoříme tag označíme .karta volič, který představuje a obdélník box bude stuha zabalit kolem.
Také jsme nastavili základní rozměry a barva pozadí s CSS.
.karta barva pozadí: béžová; výška: 300px; okraj: 40px; šířka: 500px;
Střední část pásky
Použijeme Proměnná CSS (dovoluje nám ukládat a opětovně používat hodnotu CSS) volané --str na uložte hodnotu vycpávky. Hodnota polstrování vlastnost používá var (- p) syntaxe pro levé a pravé polstrování pásky tak, aby mohla být snadno rozšířit. --str později opakovaně; který dělá náš kód flexibilní.
.stuha --p: 15px; barva pozadí: rgb (170, 170, 170); výška: 60px; polstrování: 0 var (- p); šířka: 100%;
Na obrázku níže vidíte, jak má vaše demo vypadat v tomto bodě:
Vycentrování pásky
Musíme také vycentrujte stuhu. My zatlačte ji doleva o velikost polstrování (označeno znakem. \ t --str proměnné) pomocí relativního umístění.
.stuha --p: 15px; barva pozadí: rgb (170, 170, 170); výška: 60px; polstrování: 0 var (- p); poloha: relativní; vpravo: var (- p); šířka: 100%;
Aktualizované demo:
Strany pásky
Nyní vytvoříme levé a pravé straně pásky které by se měly zdánlivě ohýbat kolem okraje karty. K tomu používáme obě :před a :po pseudoprvky .stuha.
Oba pseudo-elementy zdědí barvu pozadí .stuha, a používáme filtr: jas (.5) pravidlo trochu ztmavit jejich barvu. Jsou taky absolutně umístěna v rámci jejich (relativně umístěného) rodiče.
Jejich šířka musí být stejné jako velikost polstrování, a umístíme je na levý a pravý konec pásky za použití vlevo: 0 a vpravo: 0 pravidla stylu.
.ribbon: before, .ribbon: after background-color: inherit; obsah: "; zobrazit: blok; filtr: jas (.5); výška: 100%; pozice: absolutní; šířka: var (- p); .ribbon: before left: 0; .ribbon: po vpravo: 0;
Stuha se stranami, které jsme právě přidali, nyní vypadá takto:
Zvedněte boky
Chcete-li vytvořit strany pásky vypadají ohnuté, potřebujeme šikmo o 45 °. transform: skewy () CSS pravidlo skews prvky vertikálně.
.ribbon: before left: 0; transformace: skewy (45deg); .ribbon: po right: 0; transformace: skewy (-45deg);
Jak můžete vidět na okrajích stran nevyrovnávejte po transformaci, tak musíme stáhněte je dolů.
Zarovnejte strany
Na určete správnou délku kterým se musíme pohybovat po stranách dolů, obracíme se na trigonometrii. Potřebujeme najít X, tak jako y je šířka stran (rovná se velikosti polstrování. \ t .stuha) a úhel θ je 45 ° (úhel zkosení).
Výsledný X pak je třeba snížit na polovinu, jak tam je levá a pravá strana také.
Pokud používáte jakoukoliv kontrolu CSS preprocesoru, pokud má opálení funkce, jinak odkazujte na tečnou graf nebo kalkulačku zjistit tečnou hodnotu úhlu. Máme štěstí tan 45 ° je 1, což znamená, že hodnota X rovná y v našem případě.
.ribbon: before, .ribbon: after background-color: inherit; obsah: "; zobrazení: blok; filtr: jas (.5); výška: 100%; poloha: absolutní; horní: calc (var (- p) / 2); šířka: var (- p);
Od té doby X museli být na polovinu, používáme calc () Funkce CSS k provedení rozdělení --str proměnná.
Konečně musíme Zarovnejte strany podél osy z stejně tak přidejme z-index: -1 pravidla, aby strany umístěte je za střední část pásky.
.ribbon: before, .ribbon: after background-color: inherit; obsah: "; displej: blok; filtr: jas (.5); výška: 100%; poloha: absolutní; horní: calc (var (- p) / 2); šířka: var (- p); index: -1;
Teď, když jsme zarovnali strany, náš CSS stuha je hotová.
Níže si můžete znovu vyzkoušet živé demo, uvědomte si prosím, že používá i některé další styly.
