Kaip sukurti širdies formą su CSS
CSS3 padidina galimybes, kurias galime sukurti svetainėse, kuriose naudojamas tik HTML ir CSS. Galite rasti nuostabių pavyzdžių, kuriuos mes anksčiau rodėme. Tačiau nepasieksime pernelyg toli prieš save, sudėtingas dizainas reikalauja kodų, kurie gali suteikti jums galvos skausmą.
Vietoj to, mes padėsime jums sukurti kažką paprasto pirmiausia suprasite CSS formas ir pozicionavimą, prieš išvykdami į pažangesnius dizainus. Kadangi Valentino diena yra tiesiog už kampo, sukurkime širdies formą naudojant HTML ir CSS.
Pagrindai
Iš esmės mes galime sukurti naują formą, sujungdami vieną ar daugiau pagrindinių formų, pvz., Stačiakampių ir apskritimų. Jei ištirsime širdies formą, galime pastebėti, kad jis susideda iš du apskritimai ir stačiakampis. HTML elementai iš esmės yra kvadratiniai arba stačiakampiai. CSS3 pasienio spindulio dėka stačiakampį galima lengvai paversti apskritimu.
Pradėkite pridėdami a Tada mes jį padalome, nurodydami vienodą plotį ir aukštį. Pasirinkite norimą fono spalvą. Toliau mes padarysime ratą. Užuot pridėję naujų elementų, pasinaudosime pseudo elementais, Kartu su aikštele turėsime tokį rezultatą: Po to sukuriame antrąjį ratą su pseudo elementu Rezultatai yra tokie: Šiuos du stilius galime sujungti, grupuodami pseudo elementų selektorius taip: Ta-da! Mes turime širdies formą, nors tai dar nėra teisinga kryptimi. Norėdami jį ištaisyti, naudosime CSS3 transformaciją. Galima transformuoti pagrindinius formos elementus; čia, tai reiškia aikštę. Kai transformuojama, pseudo elementas automatiškai pakeis savo padėtį po pagrindinio elemento. Čia sukasi širdis, kad būtų matoma “stovėti”. Ir tai yra mūsų širdies išvaizda. Pilnas pirmiau pateiktos širdies formos kodas yra HTML: Ir mūsų CSS, tai bus tokia: Atkreipkite dėmesį, kad dabar mes nustatome alfa kanalą Dabar, kai mes turime puikią širdies formą, galime pakeisti foną į kitą spalvą (pvz., rožinė arba raudona). Vienintelis trūkumas yra tai, kad mes nepavyko pridėti sienos prie sukrautų elementų. Pridėjus sienos liniją, širdis atrodys keista. Su CSS3 sukuriant tokią formą, kaip dabar, širdies forma yra lengvai pasiekiama. Pasienio spindulio nuosavybė leidžia mums sukurti elementus ar net pseudo elementą į apskritimą. Su CSS3 transformacija galime pasukti arba perkelti objekto koordinates lengvai. Jūs ribojate tik savo kūrybiškumas ir vaizduotė!
.širdies formos pozicija: santykinis; plotis: 200px; aukštis: 200px; fono spalva: rgba (250,184,66, 0,8);
: anksčiau ir : po. Pirmiausia nustatėme : anksčiau pseudo elementai kaip mūsų pirmasis ratas. Padarome jį vienodo dydžio kvadratu, kurio plotis ir aukštis lygiai taip pat, kaip ir su div. Tada mes jį paverčiame apskritimu, suteikdami jam 50% spindulio ir įdėjus jį į kairę aikštės pusę. .širdies forma: prieš pozicija: absoliutus; apačioje: 0px; kairėje: -100px; plotis: 200px; aukštis: 200px; kiekis: "; -webkit-pasienio spindulys: 50%; -moz-border-spindulys: 50%; -o-pasienio spindulys: 50%; pasienio spindulys: 50%; fono spalva: rgba (250,184,66 , 0,8);
: po su tais pačiais stiliais, kaip ir pirmasis sukurtas ratas. Tada mes taip pat išdėstome jį aikštės viršuje. .širdies forma: po pozicija: absoliutus; viršuje: -100px; dešinėje: 0px; plotis: 200px; aukštis: 200px; kiekis: "; -webkit-pasienio spindulys: 50%; -moz-border-spindulys: 50%; -o-pasienio spindulys: 50%; pasienio spindulys: 50%; fono spalva: rgba (250,184,66 , 0,8);
.širdies formos: prieš, .heart-formos: po pozicija: absoliutus; plotis: 200px; aukštis: 200px; kiekis: "; -webkit-pasienio spindulys: 50%; -moz-border-spindulys: 50%; -o-pasienio spindulys: 50%; pasienio spindulys: 50%; fono spalva: rgba (250,184,66 , 0.8); .heart-shape: prieš apačioje: 0px; kairėje: -100px; .heart-forma: po top: -100px; dešinė: 0px;
.širdies formos -webkit-transform: rotate (45deg); -moz-transform: pasukti (45deg); -ms-transform: pasukti (45deg); -o-transformuoti: pasukti (45deg); transformuoti: pasukti (45deg);
Rezultatas:
.širdies formos pozicija: santykinis; plotis: 200px; aukštis: 200px; -webkit-transformacija: pasukti (45deg); -moz-transform: pasukti (45deg); -ms-transform: pasukti (45deg); -o-transformuoti: pasukti (45deg); transformuoti: pasukti (45deg); fono spalva: rgba (250,184,66, 1); .heart-formos: prieš, .heart-formos: po pozicija: absoliutus; plotis: 200px; aukštis: 200px; kiekis: "; -webkit-pasienio spindulys: 50%; -moz-border-spindulys: 50%; -o-pasienio spindulys: 50%; pasienio spindulys: 50%; fono spalva: rgba (250,184,66 , 1); .heart-shape: prieš apačioje: 0px; kairėje: -100px; .heart-forma: po top: -100px; right: 0px;
rgba (250,184,66, 1) fone 1 pašalinti skaidrumą. Dabar tai atrodo mūsų širdyje.
Išvada
