CSS3 Tutorial – Valentinstags-Herz nur in CSS3
CSS3 Tutorial – Valentinstags-Herz nur in CSS3
Es war wieder einmal soweit. Es war mal wieder Valentinstag. Für Euch Coder, mit viel Liebe zum Webdesign, habe ich zum Valentinstag noch etwas spezielles herausgesucht.
Ich möchte Euch zeigen, wie man nur mit CSS3 ein Valentinstags Herz machen kann.
Wir beginnen mit einem normalen DIV Container:
Beispielcode HTML:
<div class="herzform"></div>
Der Container soll ein Quadrat mit einer beliebigen Farbe sein. Also geben wir dem Div erstmal eine feste Höhe und eine feste Breite. Beiden geben wir den gleichen Wert.
Beispielcode CSS3:
.herzform {
position: absolute;
left: 200px;
top: 150px;
width: 200px;
height: 200px;
background-color: #cd2022;
}
Jetzt haben wir ein Quadrat mit einem satten rot. Zu dem Quadrat müssen wir nun noch zwei Kreise zeichnen. Beginnen wir mit dem ersten Kreis!
Wir verwenden das CSS Pseudo Element before. Damit fügt CSS vor dem Herzform Div einen Container ein. Wir nehemn hier die Breite und Höhe des Quadrates und verschieben es um die halbe Breite nach links. Wir geben ihm einen Border-Radius von 50% damit wir einen schönen Kreis erhalten.
Beispielcode CSS3:
.herzform {
position: absolute;
left: 200px;
top: 150px;
width: 200px;
height: 200px;
background-color: #cd2022;
}
.herzform:before{
position: absolute;
bottom: 0;
left: -100px;
width: 200px;
height: 200px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: #cd2022;
}
Das Ergebnis sollte jetzt folgendermaßen aussehen:
Herzform in CSS3 Schritt 1
Als nächstes fügen wir den zweiten Kreis hinzu. Hierfür verwenden wir nun das CSS Pseudo Element :after. Wir nehmen erneut die Höhe und Breite des Quadrates. Diesen Kreis verschieben wir allerdings um die Hälfte der Höhe nach oben.
Beispielcode CSS3:
.herzform {
position: absolute;
left: 200px;
top: 150px;
width: 200px;
height: 200px;
background-color: #cd2022;
}
.herzform:before{
position: absolute;
bottom: 0;
left: -100px;
width: 200px;
height: 200px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: #cd2022;
}
.herzform:after {
position: absolute;
top: -100px;
left: 0;
width: 200px;
height: 200px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: #cd2022;
}
Da das CSS der beiden Kreise eigentlich fast identisch ist, fassen wir das ganze ein wenig zusammen:
Beispielcode CSS3:
.herzform {
position: absolute;
left: 200px;
top: 150px;
width: 200px;
height: 200px;
background-color: #cd2022;
}
.herzform:before, .herzform:after {
position: absolute;
width: 200px;
height: 200px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: #cd2022;
}
.herzform:before {
top: 0;
left: -100px;
}
.herzform:after {
top: -100px;
left: 0;
}
Jetzt sieht die Herzform schon ganz gut aus. Allerdings liegt sie auf der Seite.
Herzform in CSS3 Schritt 2
Wir müssen sie nur noch drehen:
Beispielcode CSS3:
.herzform {
position: absolute;
left: 200px;
top: 150px;
width: 200px;
height: 200px;
background-color: #cd2022;
}
.herzform:before, .herzform:after {
position: absolute;
width: 200px;
height: 200px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: #cd2022;
}
.herzform:before {
top: 0;
left: -100px;
}
.herzform:after {
top: -100px;
left: 0;
}
.herzform {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
Das Endergebnis sieht nun folgendermaßen aus:
Herzform in CSS3 Schritt 3
Und hier dazu noch der Codepen:
See the Pen CSS3 Herzform by Andreas Lang (@sphinxflash) on CodePen.
Author: Andreas Lang
Andreas Lang konzentriert sich seit zwei Jahrzehnten auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.
