Kā izveidot sirds formu ar CSS
CSS3 paaugstina iespējamību, ko mēs varam izmantot tīmekļa vietnēs, izmantojot tikai HTML un CSS. Jūs varat atrast pārsteidzošus piemērus, ko esam iepriekš parādījuši. Bet neaizmirsīsimies pārāk tālu uz priekšu, sarežģīts dizains būs nepieciešams kodi, kas var dot jums galvassāpes.
Tā vietā mēs radīsim kaut ko vienkāršu, lai palīdzētu jums vispirms izprast formu un pozicionēšanu ar CSS, pirms veicat uzlabojumus. Tā kā Valentīna diena ir tieši ap stūri, izveidosim sirds formu, izmantojot HTML un CSS.
Pamati
Būtībā mēs varam izveidot jaunu formu, savienojot vienu vai vairākas pamatformas, piemēram, taisnstūri un apļus. Ja mēs pārbaudām sirds formu, mēs varam konstatēt, ka tas sastāv no divi apļi un taisnstūris. HTML elementi būtībā ir kvadrāts vai taisnstūris. Pateicoties CSS3 robežu rādiusam, taisnstūri var viegli pārveidot par apli.
Sāciet, pievienojot a Tad mēs to padarām par kvadrātu, norādot platumu un augstumu vienādi. Izvēlieties vēlamo fona krāsu. Tālāk mēs izveidosim lokus. Tā vietā, lai pievienotu jaunus elementus, mēs izmantosim pseidoelementus, Kopā ar laukumu mums būs šāds rezultāts: Pēc tam mēs izveidojam otro apli ar pseidoelementu Rezultāti ir šādi: Šos divus stilus var apvienot, grupējot pseidoelementu selektorus šādi: Ta-da! Mums ir sirds forma, lai gan tas vēl nav pareizajā virzienā. Lai to iztaisnotu, mēs izmantosim CSS3 transformāciju. Pārveidošanu var veikt galvenajiem formas elementiem; šeit tas nozīmē laukumu. Pārveidojot pseidoelements automātiski mainīs savu pozīciju pēc galvenā elementa. Šeit mēs pagriezīsim sirdi tā, lai tā būtu redzama “stāv”. Un tas ir tas, ko mūsu sirds izskatās tagad. Pilns iepriekšminētā sirds formas kods HTML: Un mūsu CSS, tas būs šāds: Ņemiet vērā, ka tagad mēs esam iestatījuši Tagad, kad mums ir ideāla sirds forma, mēs varam aizstāt fonu ar citu krāsu (piemēram, rozā vai sarkanā krāsā). Vienīgais negatīvais ir tas, ka mēs nevarēja pievienot robežu uz formu, kas saistīta ar sakrautiem elementiem. Pievienojot robežlīniju, sirds izskatīsies dīvaini. Ar CSS3 izveidojot tādu formu kā Sirds forma, tagad tā ir viegli izpildāma. Robežu rādiusa īpašums ļauj mums padarīt elementus vai pat pseidoelementu lokā. Ar CSS3 transformāciju mēs varam pagrieziet vai pārvietojiet objekta koordinātas viegli. Jūs ierobežojat tikai jūsu radošums un iztēle!
.sirds forma pozīcija: relatīvais; platums: 200px; augstums: 200px; fona krāsa: rgba (250,184,66, 0,8);
: pirms un : pēc. Vispirms mēs noteicām : pirms pseidoelementi kā mūsu pirmais aplis. Mēs to padarām par kvadrātu ar vienāda lieluma platumu un augstumu, tāpat kā mēs ar div. Tad mēs to pārveidojam par apli, piešķirot tai 50% rādiusu un novietojot to laukuma kreisajā pusē. .sirds forma: pirms pozīcija: absolūta; apakšā: 0px; pa kreisi: -100px; platums: 200px; augstums: 200px; saturs: "; -webkit-robežu rādiuss: 50%; -moz-border-rādiuss: 50%; -o-robežu rādiuss: 50%; robežu rādiuss: 50%; fona krāsa: rgba (250,184,66 , 0.8);
: pēc ar tādiem pašiem stiliem kā pirmais aplis, kuru mēs izveidojām. Tad mēs arī novietojam to laukuma augšpusē. .sirds forma: pēc pozīcija: absolūta; tops: -100px; pa labi: 0px; platums: 200px; augstums: 200px; saturs: "; -webkit-robežu rādiuss: 50%; -moz-border-rādiuss: 50%; -o-robežu rādiuss: 50%; robežu rādiuss: 50%; fona krāsa: rgba (250,184,66 , 0.8);
.sirds forma: pirms, .mūra forma: pēc pozīcija: absolūta; platums: 200px; augstums: 200px; saturs: "; -webkit-robežu rādiuss: 50%; -moz-border-rādiuss: 50%; -o-robežu rādiuss: 50%; robežu rādiuss: 50%; fona krāsa: rgba (250,184,66 , 0.8); .heart-forma: pirms apakšā: 0px; pa kreisi: -100px; .locekļa forma: pēc top: -100px; pa labi: 0px;
.sirds forma -webkit-transform: rotēt (45deg); -moz-transform: pagriezt (45deg); -ms-transform: pagriezt (45deg); -o-transformēt: pagriezt (45deg); transformēt: pagriezt (45deg);
Rezultāts:
.sirds forma pozīcija: relatīvais; platums: 200px; augstums: 200px; -webkit-transform: rotēt (45deg); -moz-transform: pagriezt (45deg); -ms-transform: pagriezt (45deg); -o-transformēt: pagriezt (45deg); transformēt: pagriezt (45deg); fona krāsa: rgba (250,184,66, 1); .mūra forma: pirms, .mūra forma: pēc pozīcija: absolūta; platums: 200px; augstums: 200px; saturs: "; -webkit-robežu rādiuss: 50%; -moz-border-rādiuss: 50%; -o-robežu rādiuss: 50%; robežu rādiuss: 50%; fona krāsa: rgba (250,184,66 , 1); .heart-forma: pirms apakšā: 0px; pa kreisi: -100px; .heart-forma: pēc top: -100px; pa labi: 0px;
rgba (250,184,66, 1) fonā 1 lai novērstu pārredzamību. Tagad mūsu sirds izskatās.
Secinājums
