Ben's Hobbyhoekje -- Een hart tekenen met CSS

Een hart tekenen met CSS

Het hart hierboven is helemaal getekend met CSS. JavaScript en/of plaatjes komen er niet aan te pas.

Op deze bladzijde wordt besproken hoe je dit kunt aanpakken. De code van het voorbeeld kun je downloaden om zelf te gebruiken.

Er worden twee items besproken:
1. De opbouw van de figuur.
2. Gebruiken in je eigen site.
De opbouw van de figuur
Zie de figuur hiernaast. De figuur is opgebouwd uit een vierkant (groen) dat 45° is verdraaid. Daarbij zijn twee cirkels gemaakt (rood) die slim zijn gepositioneerd ten opzichte van het groene vierkant.
De cirkels zijn gemaakt uit vierkanten, met een afronding met straal = 50%. Die zijn gekoppeld aan het groene vierkant met de pseudo-classes before: en after:.
Om het vierkant over 45° te verdraaien is de CSS-eigenschap transform: rotate gebruikt. Oudere browsers hebben het nodig dat daar een vendor-prefix aan wordt toegevoegd. Ook de toevoeging translateZ(0) is nog nodig.
Het hart is opgebouwd uit elementen die elkaar overlappen. Dat maakt het minder geschikt om het gedeeltelijk doorzichtig te maken met opacity. Als je een half-doorschijnend hart wilt moet je de aanpak met SVG kiezen.
Gebruiken in je eigen site
Maak een <div>-tag met de class hart. Deze <div> moet leeg blijven.
De benodigde CSS zet je in de <HEAD>.
Positioneer het hart door <div class="hart"> te embedden in een andere <div>-tag. Directe positionering is niet mogelijk; de meeste browsers snappen dat niet.
De afmetingen van het hart worden bepaald door de afmetingen van het vierkant, hier 60px.
De vierkanten waar de cirkels mee worden gemaakt zijn even groot, dus ook 60px.
De plaats van de cirkels wordt bepaald ten opzichte van het vierkant, en wel halverwege de zijden.
Hier is dat (top, left) = (-30px, 0) respectievelijk (0, 30px).

Bron: https://css-tricks.com/hearts-in-html-and-css/#more-237640

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:

(Zet dit in de <HEAD>).

<style>
.hart {
background-color: teal;
display: inline-block;
height: 60px; width: 60px;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg) translateZ(0);
}

.hart:before,
.hart:after {
content: "";
background-color: teal;
border-radius: 50%;
height: 60px; width: 60px;
position: absolute;
}

.hart:before {
top: -30px;
left: 0;
}

.hart:after {
left: 30px;
top: 0;
}
</style>

(Zet dit in de <BODY>, op de plaats waar het hart moet verschijnen).

<div style="margin:30px; text-align:center">
<div class="hart"></div>
</div>

Downloaden:

Druk op de knop: File: voorb431.zip, 500 bytes.

Opmerking:

Je kunt dit ook oplossen met SVG, zie het item Een hart tekenen met SVG.