Kako ustvariti obliko srca s CSS
CSS3 dviguje izvedljivost tega, kar lahko gradimo na spletnih straneh, ki uporabljajo samo HTML in CSS. Tu lahko najdete neverjetne primere, ki smo jih pred tem predstavili. Toda ne preveč segajmo od sebe, zapleteno oblikovanje potrebuje kode, ki vam lahko povzročijo glavobol.
Namesto tega bomo ustvarili nekaj enostavnega, da vam pomaga najprej razumeti oblike in pozicioniranje s CSS, preden se podate na naprednejše modele. Ker je Valentinov dan za vogalom, ustvarimo obliko srca z uporabo HTML in CSS.
Osnove
V bistvu lahko ustvarimo novo obliko tako, da združimo eno ali več osnovnih oblik, kot so pravokotniki in krogi. Če pogledamo obliko srca, lahko ugotovimo, da jo sestavljajo dva kroga in pravokotnik skupaj. Elementi HTML so v bistvu kvadratni ali pravokotni. Zahvaljujoč radiju CSS3 lahko pravokotnik preprosto pretvorimo v krog.
Začnite z dodajanjem Nato naredimo kvadrat tako, da enako določimo širino in višino. Izberite želeno barvo ozadja. Naslednjič bomo naredili kroge. Namesto dodajanja novih elementov bomo uporabili psevdoelemente, Skupaj s kvadratom bomo imeli tak rezultat: Po tem izdelamo drugi krog s psevdoelementom Rezultati so naslednji: Ta dva sloga lahko združimo tako, da združimo selektorje psevdoelementov na naslednji način: Ta-da! Imamo obliko srca, čeprav še ni v pravi smeri. Da bi jo poravnali, bomo uporabili CSS3 Transformation. Preoblikovanje je mogoče dati glavnim elementom oblike; tukaj, to pomeni kvadrat. Ko se preoblikuje, bo psevdoelement samodejno spremenil svoj položaj po glavnem elementu. Tukaj bomo vrteli srce, tako da ga bomo videli “stojalo”. In tako izgleda naše srce. Celotna koda zgornje oblike srca je v HTML-ju: In na naši CSS bo tako: Opazimo, da smo zdaj nastavili alfa kanal Zdaj, ko imamo popolno obliko srca, lahko ozadje zamenjajte z drugo barvo (npr. roza ali rdeča). Edina slabost je, da mi ni bilo mogoče dodati meje zaradi oblike zloženih elementov. Dodajanje mejne črte bo naredilo srce čudno. Z CSS3, ki ustvarja obliko, kot je oblika srca, je zdaj enostavno izvedljivo. Lastnost mejnega polmera nam omogoča naredite elemente ali celo psevdoelement v krog. Z transformacijo CSS3 lahko zavrtite ali premaknite koordinate predmeta z lahkoto. Omejeni ste samo z vašo ustvarjalnostjo in domišljijo!
.srčna oblika položaj: relativna; širina: 200px; višina: 200px; barva ozadja: rgba (250,184,66, 0,8);
: prej in : after. Najprej smo nastavili : prej psevdoelementi kot naš prvi krog. Naredimo kvadrat z enako velikostjo na širini in višini, kot smo naredili z div. Nato ga pretvorimo v krog, tako da mu damo obrobni polmer 50% in ga postavimo na levo stran kvadrata. .oblika srca: pred položaj: absolutno; spodaj: 0px; levo: -100px; širina: 200px; višina: 200px; vsebina: "; -bok-meja-polmer: 50%; -moz-border-radius: 50%; -o-obmejni polmer: 50%; obrobni polmer: 50%; barva ozadja: rgba (250,184,66 , 0,8);
: after enake sloge kot prvi krog, ki smo ga ustvarili. Nato ga postavimo tudi na vrh kvadrata. .oblika srca: po položaju: absolutno; vrh: -100px; desno: 0px; širina: 200px; višina: 200px; vsebina: "; -bok-meja-polmer: 50%; -moz-border-radius: 50%; -o-obmejni polmer: 50%; obrobni polmer: 50%; barva ozadja: rgba (250,184,66 , 0,8);
.srčna oblika: pred, srce: po položaj: absolutno; širina: 200px; višina: 200px; vsebina: "; -bok-meja-polmer: 50%; -moz-border-radius: 50%; -o-obmejni polmer: 50%; obrobni polmer: 50%; barva ozadja: rgba (250,184,66 , 0,8); srce-oblika: pred spodaj: 0px; levo: -100px;. Srčna oblika: po top: -100px; desno: 0px;
.srčna oblika -webkit-transform: vrtenje (45deg); -moz-transform: rotate (45deg); -ms-transform: rotate (45deg); -o-transform: vrtenje (45deg); transform: rotate (45deg);
Rezultat:
.srčna oblika položaj: relativna; širina: 200px; višina: 200px; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -ms-transform: rotate (45deg); -o-transform: vrtenje (45deg); transform: rotate (45deg); barva ozadja: rgba (250,184,66,1); srce-oblika: pred, srce-oblika: po položaj: absolutno; širina: 200px; višina: 200px; vsebina: "; -bok-meja-polmer: 50%; -moz-border-radius: 50%; -o-obmejni polmer: 50%; obrobni polmer: 50%; barva ozadja: rgba (250,184,66 , 1); .heart-shape: pred bottom: 0px; levo: -100px; .heart-shape: po top: -100px; desno: 0px;
rgba (250.184,66, 1) v ozadju 1 za odstranitev preglednosti. To je zdaj naše srce.
Zaključek
