Sådan oprettes hjerteform med CSS
CSS3 hæver muligheden for, hvad vi kan bygge på hjemmesider, der kun bruger HTML og CSS. Du kan finde fantastiske eksempler, som vi tidligere har præsenteret. Men lad os ikke komme for langt foran os selv, et kompliceret design skal bruge koder der kan give dig hovedpine.
I stedet vil vi skabe noget simpelt at hjælpe dig forstå former og positionering med CSS først, før venturing til mere avancerede designs. Da Valentinsdag er lige rundt om hjørnet, lad os lave en hjerteform ved hjælp af HTML og CSS.
Det grundlæggende
Dybest set kan vi skabe en ny form ved at slutte sig til en eller flere grundlæggende former, som firkanter og cirkler. Hvis vi undersøger en hjerteform, kan vi opdage, at den består af to cirkler og et rektangel kombineret. HTML-elementer er i det væsentlige et firkant eller et rektangel. Takket være CSS3 grænseradius kan vi nemt omdanne et rektangel til en cirkel.
Begynd med at tilføje en Så gør vi det til en firkant ved at angive bredden og højden ligeligt. Vælg en baggrundsfarve, du kan lide. Næste op, vi vil lave cirklerne. I stedet for at tilføje nye elementer bruger vi pseudoelementerne, Sammen med firkanten vil vi få et resultat som dette: Derefter opretter vi den anden cirkel med pseudo-elementet Resultaterne er som følger: Vi kan kombinere disse to samme stilarter ved at gruppere pseudo-element selektorer som følger: Ta-da! Vi har en hjerteform, selv om det ikke er i den rigtige retning endnu. For at rette det op bruger vi CSS3 Transformation. Transformation kan gives til de vigtigste elementer i form; her betyder det pladsen. Når transformeren ændres, ændrer pseudoelementet automatisk sin position efter hovedelementet. Her vil vi rotere hjertet, så det ses “stående”. Og sådan ser vores hjerte ud nu. Den komplette kode for hjerteformen ovenfor er som følger, i HTML: Og på vores CSS bliver det sådan: Bemærk, at vi nu angiver alfakanalen for Nu hvor vi har en perfekt hjerteform, kan vi erstatte baggrunden med en anden farve (fx lyserød eller rød) med lethed. Den eneste ulempe her er, at vi kunne ikke tilføje en grænse til formen på grund af de stablede elementer. Tilføjelse af en grænselinje vil gøre hjertet til at se underligt ud. Med CSS3 skabe en form som en Heart form er nu let gennemførlig. Grænseradiusegenskaben tillader os at lav elementer eller endda et pseudo-element i en cirkel. Med CSS3-transformation kan vi rotere eller flyt objektets koordinater med lethed. Du er kun begrænset af din kreativitet og fantasi!
.heart-shape position: relative; bredde: 200px; højde: 200px; baggrundsfarve: rgba (250,184,66, 0,8);
:Før og :efter. Vi indstiller først :Før pseudo-elementer som vores første cirkel. Vi gør det til en firkant med samme størrelse på bredden og højden som vi gjorde med div. Vi omdanner den derefter til en cirkel ved at give den grænsen på 50% og sætte den på venstre side af firkanten. .hjerteform: før position: absolut; bund: 0px; venstre: -100px; bredde: 200px; højde: 200px; indhold: "; -webkit-grænse-radius: 50%; -moz-grænse-radius: 50%; -grænse-radius: 50%; grænseradius: 50%; baggrundsfarve: rgba (250.184,66 , 0,8);
:efter med samme stilarter som den første cirkel, vi skabte. Så placerer vi det også på toppen af pladsen. .hjerteform: efter position: absolut; top: -100px; højre: 0px; bredde: 200px; højde: 200px; indhold: "; -webkit-grænse-radius: 50%; -moz-grænse-radius: 50%; -grænse-radius: 50%; grænseradius: 50%; baggrundsfarve: rgba (250.184,66 , 0,8);
.hjerteform: før, .artform: efter position: absolut; bredde: 200px; højde: 200px; indhold: "; -webkit-grænse-radius: 50%; -moz-grænse-radius: 50%; -grænse-radius: 50%; grænseradius: 50%; baggrundsfarve: rgba (250.184,66 , 0,8); .artform: før bund: 0px; venstre: -100px; .artform: efter top: -100px; højre: 0px;
.heart-shape -webkit-transform: rotere (45deg); -moz-transform: roter (45deg); -ms-transformer: roter (45deg); -o-transformer: roter (45deg); transformer: roter (45deg);
Resultatet:
.heart-shape position: relative; bredde: 200px; højde: 200px; -webkit-transform: roter (45deg); -moz-transform: roter (45deg); -ms-transformer: roter (45deg); -o-transformer: roter (45deg); transformer: roter (45deg); baggrundsfarve: rgba (250.184,66, 1); .artform: før, .artform: efter position: absolut; bredde: 200px; højde: 200px; indhold: "; -webkit-grænse-radius: 50%; -moz-grænse-radius: 50%; -grænse-radius: 50%; grænseradius: 50%; baggrundsfarve: rgba (250.184,66 , 1); .artform: før bund: 0px; venstre: -100px; .artform: efter top: -100px; højre: 0px;
rgba (250.184,66, 1) i baggrunden til 1 for at fjerne gennemsigtigheden. Nu er det her, hvad vores hjerte ser ud.
Konklusion
