Wenn man eine Webseite designt, dann hat man viele Freiheiten die wir voll ausnützen dürfen. Wir entscheiden wie wir eine Webseite programmieren, denn es gibt keinen RICHTIGEN Weg – solange der Kunde zufrieden ist – ist alles erlaubt.
Eine dieser Freiheiten ist auch zu entscheiden ob wir ein Bild verwenden oder ob wir es mit CSS selbst zeichnen. Vorallem wenn ich Kunden sehe die Bilder von +1 GB Grösse in die Webseite einbinden wollen (weils gut aussieht) ists manchmal einfach eine bessere Idee das Ding selbst zu zeichnen.
Heute zeige ich euch also wie ihr ein Herz zeichnen könnt.
Ihr seht es sind gar nicht so viele Zeilen Code um dieses Resultat zu erzeugen
Video
HTML
1 2 3 | <div class="container"> <div class="herz"></div> </div> |
CSS
Damit zentrieren wir den Container in der Browser Mitte-Mitte.
1 2 3 4 5 6 | .container { display: flex; align-items: center; justify-content: center; min-height: 100vh; } |
Und jetzt kommen wir zum Herz Teil:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | .herz { position: relative; width: 100px; height: 100px; } .herz::before, .herz::after { position: absolute; content: ''; left: 50px; top: 0; width: 50px; height: 80px; background-color: #ca0000; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } .herz::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } |
0 Kommentare