Ako vytvoriť tvar srdca pomocou
CSS3 zvyšuje realizovateľnosť toho, čo môžeme stavať na webových stránkach pomocou HTML a CSS. Nájdete tu úžasné príklady, ktoré sme predtým vystupovali. Ale nechajme sa dostať ďaleko pred seba, komplikovaný dizajn bude potrebovať kódy, ktoré vám môžu dať bolesť hlavy.
Namiesto toho vytvoríme niečo jednoduché na to, aby sme vám pomohli pochopiť tvary a umiestnenie s CSS ako prvé, predtým, než sa odvážite na pokročilejší dizajn. Od Valentína je hneď za rohom, vytvorme tvar srdca pomocou HTML a CSS.
Základy
V podstate môžeme vytvoriť nový tvar spojením jedného alebo viacerých základných tvarov, ako sú obdĺžniky a kruhy. Ak skúmame tvar srdca, môžeme zistiť, že je tvorený dva kruhy a obdĺžnik kombinovaný. HTML prvky sú v podstate štvorček alebo obdĺžnik. Vďaka polomeru okrajov CSS3 môžeme ľahko pretvoriť obdĺžnik do kruhu.
Začnite pridaním položky a Potom ju vytvoríme štvorcom tak, že šírku a výšku určujeme rovnako. Vyberte farbu pozadia, ktorá sa vám páči. Ďalej budeme robiť kruhy. Namiesto pridávania nových prvkov budeme využívať pseudoelementy, Spolu s námestím budeme mať takto: Potom vytvoríme druhý kruh s pseudo-prvkom Výsledky sú nasledovné: Tieto dva rovnaké štýly môžeme kombinovať zoskupením voličov pseudo-prvkov nasledovne: Ta-da! Máme tvar srdca, hoci to ešte nie je správnym smerom. Aby sme to narovnali, použijeme transformáciu CSS3. Transformácia môže byť daná hlavným prvkom tvaru; tu, to znamená štvorec. Pri transformácii sa pseudo-element automaticky zmení svoju polohu po hlavnom prvku. Tu budeme otáčať srdce tak, ako to vidíme “stojace”. A to je to, čo naše srdce vyzerá ako teraz. Kompletný kód tvaru srdca uvedený vyššie je v HTML: A na našom CSS, bude to takto: Všimnite si, že sme teraz nastavili alfa kanál Teraz, keď máme dokonalý tvar srdca, môžeme nahraďte pozadie inou farbou (napríklad ružová alebo červená). Jedinou nevýhodou je, že my Nepodarilo sa pridať hranicu do tvaru spôsobeného naskladanými prvkami. Pridanie hraničnej čiary spôsobí, že srdce bude divné. S CSS3 vytváraním tvaru ako tvar srdca je teraz ľahko možné. Vlastnosť okrajového polomeru nám umožňuje robiť prvky alebo dokonca pseudo-element do kruhu. S transformáciou CSS3 môžeme otočte alebo presuňte súradnice objektu S ľahkosťou. Ste obmedzený len vašou tvorivosťou a predstavivosťou!
.tvar srdca poloha: relatívna; šírka: 200px; výška: 200px; farba pozadia: rgba (250,184,66, 0,8);
: before a : po. Najprv sme nastavili : before pseudo-prvky ako náš prvý kruh. Robíme to štvorec s rovnakou veľkosťou na šírke a výške rovnako ako my s div. Potom ju pretvoríme do kruhu tak, že mu dáme okrajový polomer 50% a umiestni ho na ľavú stranu námestia. .tvar srdca: pred pozícia: absolútna; spodné: 0px; vľavo: -100px; šírka: 200px; výška: 200px; obsah: "; -webkit-okraj polomeru: 50%; -moz-okraj polomer: 50%; -hraničný polomer: 50%, polomer okrajov: 50%, farba pozadia: rgba (250,184,66 , 0,8);
: po s rovnakými štýlmi ako prvý kruh, ktorý sme vytvorili. Potom ju umiestnime aj na vrchole štvorca. .tvar srdca: po pozícii: absolútne; top: -100px; správne: 0px; šírka: 200px; výška: 200px; obsah: "; -webkit-okraj polomeru: 50%; -moz-okraj polomer: 50%; -hraničný polomer: 50%, polomer okrajov: 50%, farba pozadia: rgba (250,184,66 , 0,8);
.tvar srdca: pred, srdcový tvar: po (pozícia: absolútna; šírka: 200px; výška: 200px; obsah: "; -webkit-okraj polomeru: 50%; -moz-okraj polomer: 50%; -hraničný polomer: 50%, polomer okrajov: 50%, farba pozadia: rgba (250,184,66 , 0.8);. Tvar srdca: pred dolný: 0px; vľavo: -100px;. Tvar srdca: po top: -100px; right: 0px;
.tvar srdca -webkit-transform: rotácia (45deg); -moz-transform: rotácia (45deg); -ms-transform: rotácia (45deg); -o-transformácia: otočenie (45deg); transformácia: rotácia (45deg);
Výsledok:
.tvar srdca poloha: relatívna; šírka: 200px; výška: 200px; -webkit-transform: rotácia (45deg); -moz-transform: rotácia (45deg); -ms-transform: rotácia (45deg); -o-transformácia: otočenie (45deg); transformácia: rotácia (45deg); farba pozadia: rgba (250,184,66,1); . Tvar srdca: skôr, v tvare srdca: po pozícia: absolútna; šírka: 200px; výška: 200px; obsah: "; -webkit-okraj polomeru: 50%; -moz-okraj polomer: 50%; -hraničný polomer: 50%, polomer okrajov: 50%, farba pozadia: rgba (250,184,66 , 1);. Tvar srdca: skôr ako bottom: 0px; left: -100px;. Tvar srdca: po top: -100px; right: 0px;
rgba (250, 184, 66, 1) v pozadí do 1 ak chcete odstrániť priehľadnosť. Teraz to vyzerá naše srdce.
záver
