Hoe vorm je een hartvorm met CSS
CSS3 verhoogt de haalbaarheid van wat we kunnen bouwen op websites met alleen HTML en CSS. U kunt verbazingwekkende voorbeelden vinden die we eerder hebben genoemd. Maar laten we niet te ver op onszelf lopen, een ingewikkeld ontwerp zal codes nodig hebben die je hoofdpijn kunnen bezorgen.
In plaats daarvan gaan we iets eenvoudigs maken om u te helpen eerst vormen en positionering met CSS begrijpen, voordat u zich waagt aan geavanceerdere ontwerpen. Omdat Valentijnsdag net om de hoek is, laten we een hartvorm maken met HTML en CSS.
De basis
Kortom, we kunnen een nieuwe vorm creëren door een of meer basisvormen, zoals rechthoeken en cirkels, samen te voegen. Als we een hartvorm bekijken, kunnen we zien dat die bestaat twee cirkels en een rechthoek gecombineerd. HTML-elementen zijn in wezen een vierkant of rechthoek. Dankzij de CSS3-grensradius kunnen we een rechthoek gemakkelijk in een cirkel transformeren.
Begin met het toevoegen van een Vervolgens maken we er een vierkant van door de breedte en hoogte gelijk te specificeren. Kies een achtergrondkleur die je mooi vindt. Vervolgens maken we de cirkels. In plaats van nieuwe elementen toe te voegen, zullen we gebruik maken van de pseudo-elementen, Samen met het vierkant hebben we een resultaat zoals dit: Daarna maken we de tweede cirkel met het pseudo-element De resultaten zijn als volgt: We kunnen deze twee dezelfde stijlen combineren door de selectors voor pseudo-elementen als volgt te groeperen: Ta-da! We hebben een hartvorm, hoewel het nog niet in de goede richting is. Om het recht te trekken, zullen we CSS3 Transformatie gebruiken. Transformatie kan worden gegeven aan de belangrijkste vormelementen; hier, dat betekent het vierkant. Wanneer getransformeerd, zal het pseudo-element automatisch zijn positie veranderen volgend op het hoofdelement. Hier zullen we het hart draaien zodat het gezien wordt “staand”. En zo ziet ons hart er nu uit. De volledige code van de hartvorm hierboven is als volgt, in HTML: En op onze CSS zal het zo zijn: Merk op dat we nu het alfakanaal van de Nu we een perfecte hartvorm hebben, kunnen we dat vervang de achtergrond in een andere kleur (bijvoorbeeld roze of rood) met gemak. Het enige nadeel hier is dat wij kon geen rand toevoegen naar de vorm toe te schrijven aan de gestapelde elementen. Als u een randlijn toevoegt, ziet het hart er vreemd uit. Met CSS3 is het maken van een vorm zoals een hartvorm nu gemakkelijk uitvoerbaar. De grens-straaleigenschap staat ons toe aan maak elementen of zelfs een pseudo-element in een cirkel. Met CSS3-transformatie kunnen we dat roteer of verplaats de coördinaten van het object met gemak. Je wordt alleen beperkt door je creativiteit en verbeeldingskracht!
.hartvorm positie: relatief; breedte: 200 px; hoogte: 200 px; achtergrondkleur: rgba (250,184,66, 0,8);
:voor en :na. We hebben eerst de :voor pseudo-elementen als onze eerste cirkel. We maken er een vierkant van gelijke grootte op voor de breedte en hoogte, net als bij de div. We transformeren het vervolgens in een cirkel door het een grensradius van 50% te geven en het aan de linkerkant van het plein te plaatsen. .hartvorm: voor positie: absoluut; onderkant: 0px; links: -100px; breedte: 200 px; hoogte: 200 px; inhoud: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; grensradius: 50%; achtergrond-kleur: rgba (250.184,66 , 0,8);
:na met dezelfde stijlen als de eerste cirkel die we hebben gemaakt. Vervolgens plaatsen we het ook op de bovenkant van het vierkant. .hartvorm: na positie: absoluut; top: -100px; rechts: 0px; breedte: 200 px; hoogte: 200 px; inhoud: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; grensradius: 50%; achtergrond-kleur: rgba (250.184,66 , 0,8);
.hartvorm: voor, .hart-vorm: na positie: absoluut; breedte: 200 px; hoogte: 200 px; inhoud: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; grensradius: 50%; achtergrond-kleur: rgba (250.184,66 , 0.8); .heart-shape: before bottom: 0px; left: -100px; .heart-shape: after top: -100px; right: 0px;
.hartvorm -webkit-transform: roteren (45 graden); -moz-transformatie: roteren (45 graden); -ms-transformatie: roteren (45 graden); -o-transform: roteer (45 graden); transformeren: roteren (45 graden);
Het resultaat:
.hartvorm positie: relatief; breedte: 200 px; hoogte: 200 px; -webkit-transform: roteren (45deg); -moz-transformatie: roteren (45 graden); -ms-transformatie: roteren (45 graden); -o-transform: roteer (45 graden); transformeren: roteren (45 graden); achtergrondkleur: rgba (250,184,66, 1); .heart-shape: before, .heart-shape: after position: absolute; breedte: 200 px; hoogte: 200 px; inhoud: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; grensradius: 50%; achtergrond-kleur: rgba (250.184,66 , 1); .heart-shape: before bottom: 0px; left: -100px; .heart-shape: after top: -100px; right: 0px;
rgba (250.184,66, 1) op de achtergrond van 1 om de transparantie te verwijderen. Dit is wat ons Hart ziet.
Conclusie
