Kuidas luua südame kuju CSS-iga
CSS3 tõstab teostatavust selle kohta, mida saame ehitada ainult HTML-i ja CSS-i kasutavatele veebisaitidele. Leiad suurepäraseid näiteid, mida oleme varem esile toonud. Ärgem end liiga kaugele ees, keeruline disain vajab koode, mis võivad anda teile peavalu.
Selle asemel loome me teile midagi lihtsat mõistke esmalt CSS-i kujundeid ja paigutust, enne arenenud disainilahenduste tegemist. Kuna Ystävänpäivä on kohe nurga taga, looge HTML ja CSS abil südamekujundus.
Põhitõed
Põhimõtteliselt saame luua uue kuju, ühendades ühe või mitu põhikuju, nagu ristkülikud ja ringid. Kui me uurime südame kuju, leiame, et see koosneb kaks ringi ja ristkülik. HTML-elemendid on sisuliselt ruudukujulised või ristkülikukujulised. Tänu CSS3 piiri raadiusele saame ristküliku lihtsalt ümber kujundada.
Alustage lisades a Seejärel teeme selle ruuduks, määrates võrdse laiuse ja kõrguse. Valige soovitud taustavärv. Järgmisena teeme me ringid. Uute elementide lisamise asemel kasutame pseudoelemente, Koos ruuduga on meil selline tulemus: Pärast seda loome pseudoelemendiga teise ringi Tulemused on järgmised: Neid kahte stiili saab kombineerida pseudoelementide valijate rühmitamisega järgmiselt: Ta-da! Meil on südame kuju, kuigi see pole veel õiges suunas. Selle sirgendamiseks kasutame CSS3 transformatsiooni. Ümberkujundamist võib anda kuju põhielementidele; siin, see tähendab ruutu. Transformeerimisel muudab pseudoelement automaatselt oma positsiooni pärast põhielementi. Siin pöörame südame nii, et see on näha “seisab”. Ja see on see, mida meie süda näeb välja. Ülaltoodud südamekujunduse täielik kood on HTML-is järgmine: Ja meie CSS-is on see selline: Pange tähele, et oleme nüüd seadnud alfakanali Nüüd, kui meil on täiuslik südame kuju, võime asendage taust teise värviga (nt roosa või punane) kergesti. Ainus negatiivne külg on see, et me ei saanud piiri lisada virnastatud elementide tõttu. Piirjooni lisamine muudab südame imelikuks. CSS3-ga luuakse selline kuju nagu süda, mis on nüüd kergesti teostatav. Piiriraadius võimaldab meil seda teha teha elemente või isegi pseudoelementi ringiks. CSS3 transformatsiooniga saame objekti koordinaate pöörata või liigutada kergesti. Teil on piiratud ainult teie loovus ja kujutlusvõime!
.südamekujuline positsioon: sugulane; laius: 200 px; kõrgus: 200 px; taustavärv: rgba (250,184,66, 0,8);
: enne ja : pärast. Kõigepealt seadsime : enne pseudoelemendid kui meie esimene ring. Me teeme selle võrdse suurusega ruudukujulise laiuse ja kõrguse ruudukujuliseks, nagu me koos diviga. Seejärel teisendame selle ringiks, andes talle 50% raadiusega ruudu ja asetades selle ruudu vasakule küljele. .südamekujuline: enne positsioon: absoluutne; alt: 0px; vasakule: -100px; laius: 200 px; kõrgus: 200 px; sisu: "; -webkit-piiri-raadius: 50%; -moz-piiri-raadius: 50%; -o-piiri-raadius: 50%; raadius: 50%; taustavärv: rgba (250,184,66 , 0,8);
: pärast samade stiilidega kui esimene ring, mille oleme loonud. Seejärel asetame selle ka ruudu ülaosale. .südamekujuline: pärast positsioon: absoluutne; top: -100px; paremale: 0px; laius: 200 px; kõrgus: 200 px; sisu: "; -webkit-piiri-raadius: 50%; -moz-piiri-raadius: 50%; -o-piiri-raadius: 50%; raadius: 50%; taustavärv: rgba (250,184,66 , 0,8);
.südamekujuline: enne, .kuju-kujuline: pärast positsioon: absoluutne; laius: 200 px; kõrgus: 200 px; sisu: "; -webkit-piiri-raadius: 50%; -moz-piiri-raadius: 50%; -o-piiri-raadius: 50%; raadius: 50%; taustavärv: rgba (250,184,66 , 0,8); .heart-kujuline: enne alt: 0px; vasak: -100px; .heart-kujuline: pärast top: -100px; parem: 0px;
.südamekujuline -webkit-transform: rotate (45deg); -moz-transform: pöörake (45deg); -ms-transform: pöörake (45deg); -o-transformatsioon: pöörata (45deg); transform: rotate (45deg);
Tulemus:
.südamekujuline positsioon: sugulane; laius: 200 px; kõrgus: 200 px; -webkit-transform: pöörake (45deg); -moz-transform: pöörake (45deg); -ms-transform: pöörake (45deg); -o-transformatsioon: pöörata (45deg); transform: rotate (45deg); taustavärv: rgba (250,184,66, 1); .heart-kujuline: enne, .heart-kujuline: pärast positsioon: absoluutne; laius: 200 px; kõrgus: 200 px; sisu: "; -webkit-piiri-raadius: 50%; -moz-piiri-raadius: 50%; -o-piiri-raadius: 50%; raadius: 50%; taustavärv: rgba (250,184,66 , 1); .heart-shape: enne alumine: 0px; vasak: -100px; .heart-kujuline: pärast top: -100px; parem: 0px;
rgba (250,184,66, 1) taustal 1 läbipaistvuse kõrvaldamiseks. Nüüd on see meie südame välimus.
Järeldus
