nl.hideout-lastation.com
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 u hoofdpijn kunnen bezorgen.
In plaats daarvan gaan we iets eenvoudigs maken om u te helpen om vormen en positionering met CSS eerst te 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 lid te worden van een of meer basisvormen, zoals rechthoeken en cirkels. Als we een hartvorm onderzoeken, kunnen we zien dat deze bestaat uit 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 geven. Kies een achtergrondkleur die je mooi vindt.
.hart-vorm {positie: relatief; breedte: 200 px; hoogte: 200 px; achtergrondkleur: rgba (250, 184, 66, 0, 8); } Vervolgens maken we de cirkels.
In plaats van nieuwe elementen toe te voegen, zullen we gebruik maken van de pseudo-elementen, : :before and :after . We stellen eerst de :before pseudo-elementen in 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.
.heart-shape: before {position: absolute; onderkant: 0px; links: -100px; breedte: 200 px; hoogte: 200 px; inhoud: ''; -webkit-grensradius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; grensradius: 50%; achtergrondkleur: rgba (250, 184, 66, 0, 8); } Samen met het vierkant hebben we een resultaat zoals dit:
Daarna maken we de tweede cirkel met het pseudo-element :after met dezelfde stijlen als de eerste cirkel die we hebben gemaakt. Vervolgens plaatsen we het ook op de bovenkant van het vierkant.
.heart-shape: after {position: absolute; top: -100px; rechts: 0px; breedte: 200 px; hoogte: 200 px; inhoud: ''; -webkit-grensradius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; grensradius: 50%; achtergrondkleur: rgba (250, 184, 66, 0, 8); } De resultaten zijn als volgt:
We kunnen deze twee dezelfde stijlen combineren door de selectors voor pseudo-elementen als volgt te groeperen:
.heart-shape: before, .heart-shape: after {position: absolute; breedte: 200 px; hoogte: 200 px; inhoud: ''; -webkit-grensradius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; grensradius: 50%; achtergrondkleur: rgba (250, 184, 66, 0, 8); } .heart-shape: before {bottom: 0px; links: -100px; } .heart-shape: after {top: -100px; rechts: 0px; } Ta-da! We hebben een hartvorm, hoewel het nog niet in de goede richting is. Om het recht te trekken, zullen we CSS3 Transformation 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 "staand" wordt gezien.
.heart-shape {-webkit-transform: roteren (45deg); -moz-transform: roteer (45 graden); -ms-transformatie: roteren (45 graden); -o-transform: roteer (45 graden); transformeren: roteren (45 graden); } En zo ziet ons hart er nu uit.
Het resultaat:
De volledige code van de hartvorm hierboven is als volgt, in HTML:
En op onze CSS zal het zo zijn:
.hart-vorm {positie: relatief; breedte: 200 px; hoogte: 200 px; -webkit-transform: roteren (45deg); -moz-transform: roteer (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-grensradius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; grensradius: 50%; achtergrondkleur: rgba (250, 184, 66, 1); } .heart-shape: before {bottom: 0px; links: -100px; } .heart-shape: after {top: -100px; rechts: 0px; } Merk op dat we nu het alpha-kanaal van de rgba(250, 184, 66, 1) op de achtergrond instellen op 1 om de transparantie te verwijderen. Dit is wat ons Hart ziet.
Nu we een perfecte hartvorm hebben, kunnen we de achtergrond eenvoudig vervangen door een andere kleur (bijvoorbeeld roze of rood). Het enige nadeel hier is dat we vanwege de gestapelde elementen geen rand aan de vorm konden toevoegen . Door een randlijn toe te voegen, ziet het hart er vreemd uit.
Conclusie
Met CSS3 is het maken van een vorm zoals een hartvorm nu gemakkelijk uitvoerbaar. Met de eigenschap randradius kunnen we elementen of zelfs een pseudo-element in een cirkel maken . Met CSS3-transformatie kunnen we de coördinaten van het object gemakkelijk roteren of verplaatsen .
Je wordt alleen beperkt door je creativiteit en verbeeldingskracht!
20 Airport Art-installaties die reizigers teleurstellen
Als u ooit bent vastgelopen op een luchthaven als gevolg van een vertraagde vlucht of omdat u uw aansluitende vluchten te ver uit elkaar heeft geplaatst, kan de wachttijd martelend zijn. Op bepaalde luchthavens zijn er echter kunstwerken die wachten om ontdekt en gewaardeerd te worden . Op sommige plaatsen zijn er creatieve bouwplakkers; op andere plaatsen zijn er hedendaagse kunstinstallaties zoals die je in deze post aantreft
10 Tekenen dat je te ver bent gegaan in freelance ontwerpen
Freelance ontwerp is geweldig, maar niemand die ik tot nu toe ken, is gebleven zoals hij of zij was na jaren van het runnen van een (vaak traumatische) freelance ervaring. Na een tijdje zouden we graag willen denken dat we beetje bij beetje zijn geëvolueerd naar iets dat verder gaat dan de mens, met bovennatuurlijke vermogens of mentaal storende eigenschappen, en dit wil ik vandaag in deze post delen: de 10 gewoonten die je ontwikkelt wanneer je te diep in freelance design valt .
