Jak vytvořit tvar srdce s CSS
CSS3 zvyšuje proveditelnost toho, co můžeme stavět na webových stránkách pomocí HTML a CSS. Můžete najít úžasné příklady, které jsme dříve uváděli. Ale nenechte se příliš daleko před sebou, komplikovaný design bude vyžadovat kódy, které vám mohou způsobit bolest hlavy.
Namísto toho budeme vytvářet něco jednoduchého, abychom vám pomohli nejprve pochopit tvary a umístění pomocí CSS, před propracováním se na pokročilejší návrhy. Vzhledem k tomu, Valentýna je hned za rohem, pojďme vytvořit tvaru srdce pomocí HTML a CSS.
Základy
V podstatě můžeme vytvořit nový tvar spojením jednoho nebo více základních tvarů, jako jsou obdélníky a kruhy. Podíváme-li se na tvar srdce, zjistíme, že se skládá z dva kruhy a obdélník v kombinaci. Prvky HTML jsou v podstatě čtverec nebo obdélník. Díky CSS3 hraničnímu poloměru můžeme obdélník snadno transformovat do kruhu.
Začněte přidáním a Pak jsme to čtverec zadáním šířku a výšku stejně. Vyberte barvu pozadí, která se vám líbí. Další, uděláme kruhy. Namísto přidávání nových prvků využijeme pseudo-elementy, Spolu s náměstím budeme mít takový výsledek: Poté vytvoříme druhý kruh s pseudoprvkem Výsledky jsou následující: Tyto dva stejné styly můžeme kombinovat seskupením selektorů pseudoprvků takto: Ta-da! Máme tvar srdce, i když to ještě není správným směrem. Pro jeho narovnání použijeme transformaci CSS3. Transformace může být dána hlavním prvkům tvaru; zde to znamená náměstí. Při transformaci pseudoprvek automaticky změní svou polohu podle hlavního prvku. Zde otočíme srdce, takže je vidět “stojící”. A tohle naše srdce vypadá teď. Úplný kód tvaru srdce výše je v jazyce HTML následující: A v našem CSS to bude takto: Všimněte si, že nyní nastavujeme alfa kanál kanálu Teď, když máme dokonalý tvar srdce, můžeme nahradit pozadí jinou barvou (např. růžová nebo červená) s lehkostí. Jediná nevýhoda je, že my nelze přidat hranici na tvar vzhledem ke stohovaným prvkům. Přidáním hraniční čáry bude srdce vypadat zvláštně. Díky CSS3, který vytváří tvar tvaru srdce, je nyní snadno proveditelný. Vlastnost border-radius nám umožňuje vytvořit prvky nebo dokonce pseudo-element do kruhu. S transformací CSS3 můžeme otáčet nebo přesouvat souřadnice objektu s lehkostí. Jste omezeni pouze vaší kreativitou a představivostí!
.tvar srdce pozice: relativní; šířka: 200px; výška: 200px; barva pozadí: rgba (250,184,66, 0,8);
:před a :po. Nejdříve jsme nastavili :před pseudo-elementy jako náš první kruh. Děláme to čtverec se stejnou velikostí na šířku a výšku, jako jsme to dělali s div. Pak ji transformujeme do kruhu tak, že jí udělíme hraniční hranu 50% a položíme ji na levou stranu náměstí. .tvar srdce: před pozice: absolutní; dole: 0px; vlevo: -100px; šířka: 200px; výška: 200px; obsah: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; hraniční okraj: 50%; barva pozadí: rgba (250,184,66 , 0,8);
:po se stejnými styly jako první vytvořený kruh. Pak ji také umístíme na vrchol náměstí. .tvar srdce: po pozice: absolutní; nahoru: -100px; vpravo: 0px; šířka: 200px; výška: 200px; obsah: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; hraniční okraj: 50%; barva pozadí: rgba (250,184,66 , 0,8);
.tvar srdce: před, .heart-shape: po position: absolute; šířka: 200px; výška: 200px; obsah: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; hraniční okraj: 50%; barva pozadí: rgba (250,184,66 , 0.8); .heart-shape: before bottom: 0px; vlevo: -100px; .heart-shape: po top: -100px; vpravo: 0px;
.tvaru srdce -webkit-transform: rotate (45deg); -moz-transformace: rotace (45deg); -ms-transformace: rotace (45deg); -o-transformace: rotace (45deg); transformace: rotace (45deg);
Výsledek:
.tvar srdce pozice: relativní; šířka: 200px; výška: 200px; -webit-transformace: rotace (45deg); -moz-transformace: rotace (45deg); -ms-transformace: rotace (45deg); -o-transformace: rotace (45deg); transformace: rotace (45deg); barva pozadí: rgba (250,184,66, 1); .heart-shape: before, .heart-shape: po position: absolute; šířka: 200px; výška: 200px; obsah: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; hraniční okraj: 50%; barva pozadí: rgba (250,184,66 , 1); .heart-shape: before bottom: 0px; vlevo: -100px; .heart-shape: po top: -100px; vpravo: 0px;
rgba (250,184,66, 1) na pozadí 1 průhlednost. Takhle to vypadá naše srdce.
Závěr
