Hvordan lage hjerteform med CSS
CSS3 løfter muligheten til det vi kan bygge på nettsteder ved hjelp av bare HTML og CSS. Du kan finne fantastiske eksempler som vi tidligere har omtalt. Men la oss ikke komme for langt foran oss selv, en komplisert design vil trenge koder som kan gi deg hodepine.
I stedet skal vi lage noe enkelt for å hjelpe deg forstå former og posisjonering med CSS først, før venturing til mer avanserte design. Siden Valentinsdag er rett rundt hjørnet, la oss lage en hjerteform ved hjelp av HTML og CSS.
Det grunnleggende
I utgangspunktet kan vi lage en ny form ved å bli med i en eller flere grunnformer, som rektangler og sirkler. Hvis vi undersøker en hjerteform, kan vi finne ut at den består av to sirkler og et rektangel kombinert. HTML-elementer er i hovedsak et firkant eller rektangel. Takket være CSS3 grense radius kan vi enkelt omdanne et rektangel til en sirkel.
Begynn med å legge til en Da gjør vi det til en firkant ved å spesifisere bredden og høyden like. Velg en bakgrunnsfarge du liker. Neste opp, vil vi lage sirkler. I stedet for å legge til nye elementer, vil vi gjøre bruk av pseudo-elementene, Sammen med torget vil vi få et slikt resultat: Deretter lager vi den andre sirkelen med pseudo-elementet Resultatene er som følger: Vi kan kombinere disse to samme stilene ved å gruppere pseudo-elementvelgerne som følger: Ta-da! Vi har en hjerteform, selv om det ikke er i riktig retning ennå. For å rette opp det, bruker vi CSS3 Transformation. Transformasjon kan gis til hovedelementene i form; her betyr det torget. Når transformert, vil pseudoelementet automatisk endre posisjonen etter hovedelementet. Her vil vi rotere hjertet slik at det blir sett “stående”. Og slik ser vårt hjerte ut nå. Den komplette koden til hjerteformen ovenfor er som følger, i HTML: Og på vår CSS vil det være slik: Legg merke til at vi nå angir alfakanalen til Nå som vi har en perfekt hjerteform, kan vi erstatt bakgrunnen til en annen farge (for eksempel rosa eller rød) med letthet. Den eneste ulempen er at vi kunne ikke legge til en ramme til formen på grunn av de stablede elementene. Hvis du legger til en kantlinje, får hjertet til å se rart ut. Med CSS3 å skape en form som en Hjerteform er det nå lett å gjøre. Grensen-radiusegenskapen tillater oss å lage elementer eller til og med et pseudo-element i en sirkel. Med CSS3-transformasjon kan vi roter eller flytte objektets koordinater enkelt. Du er begrenset bare av din kreativitet og fantasi!
.hjerteform posisjon: relativ; bredde: 200px; høyde: 200px; bakgrunnsfarge: rgba (250,184,66, 0,8);
:før og :etter. Vi satte først på :før pseudo-elementer som vår første sirkel. Vi gjør det til et torg med samme størrelse på bredde og høyde som vi gjorde med div. Vi forvandler det til en sirkel ved å gi den en grense på 50% og sette den på venstre side av torget. .hjerteform: før posisjon: absolutt; bunn: 0px; venstre: -100px; bredde: 200px; høyde: 200px; innhold: "; -webkit-grense-radius: 50%; -moz-grense-radius: 50%; -grense-radius: 50%; grense-radius: 50%; bakgrunnsfarge: rgba (250.184,66 , 0,8);
:etter med samme stiler som den første sirkelen vi opprettet. Da plasserer vi også den på toppen av torget. .hjerteform: etter posisjon: absolutt; toppen: -100px; høyre: 0px; bredde: 200px; høyde: 200px; innhold: "; -webkit-grense-radius: 50%; -moz-grense-radius: 50%; -grense-radius: 50%; grense-radius: 50%; bakgrunnsfarge: rgba (250.184,66 , 0,8);
.hjerteform: før, .artform: etter posisjon: absolutt; bredde: 200px; høyde: 200px; innhold: "; -webkit-grense-radius: 50%; -moz-grense-radius: 50%; -grense-radius: 50%; grense-radius: 50%; bakgrunnsfarge: rgba (250.184,66 , 0.8); .hjertform: før bunn: 0px; venstre: -100px; .hjertetype: etter toppen: -100px; høyre: 0px;
.hjerteform -webkit-transformer: roter (45deg); -moz-transform: roter (45deg); -ms-transformer: roter (45deg); -o-transformer: roter (45deg); transformer: roter (45deg);
Resultatet:
.hjerteform posisjon: relativ; bredde: 200px; høyde: 200px; -webkit-transform: roter (45deg); -moz-transform: roter (45deg); -ms-transformer: roter (45deg); -o-transformer: roter (45deg); transformer: roter (45deg); bakgrunnsfarge: rgba (250.184,66, 1); .Hjärtformet: før, .Hjärtformet: etter posisjon: absolutt; bredde: 200px; høyde: 200px; innhold: "; -webkit-grense-radius: 50%; -moz-grense-radius: 50%; -grense-radius: 50%; grense-radius: 50%; bakgrunnsfarge: rgba (250.184,66 , 1); .artform: før bunn: 0px; venstre: -100px; .hjertetype: etter toppen: -100px; høyre: 0px;
rgba (250, 184,66, 1) i bakgrunnen til 1 for å fjerne gjennomsiktigheten. Nå er dette slik vårt hjerte ser ut.
Konklusjon
