Mit CSS sorgt man normalerweise für die Darstellung und das Layout eines HTML Dokuments. Doch mittlerweile ist mit CSS weit mehr möglich als Texte, Tabellen und Bilder zu gestalten. Geometrische Figuren wie Kreise und Dreiecke sind mit CSS3 kein Problem mehr. Aus gegebenem Anlass zeige ich euch nun wie ihr mit ein wenig CSS3 eurer Freundin/Freund zum Valentinstag ein schönes CSS Herz schenken könnt.
Der große Vorteil von mit CSS gestalteten Figuren ist, das diese nicht über externe Dateien (Bilder) eingebettet werden müssen und somit auch Bandbreite gespart werden kann. Zudem lassen sich Farbe und Größe schnell und einfach verändern. Wer also eher auf pinke Herzen steht, kann dies ohne Grafik Programm problemlos und schnell ändern. Ein Nachteil besteht allerdings: nicht alle Browser unterstützen die verwendeten CSS Eigenschaften und Pseudoelemente. In aktuellen Browsern wird es aber kein Problem geben, die CSS-Herzen korrekt darzustellen.
Das Grundgerüst
Als Grundlage für unser Herz brauchen wir nicht mehr als ein normales HTML Dokument mit einem Blockelement. Ein <div> eignet sich hierführ am Besten. Das <div> wird zu unserem Herzen, hier können wir natürlich auch noch eine nette Beschriftung für unser Herz hernehmen.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Valentinsherz mit reinem CSS!</title>
<link type="text/css" rel="stylesheet" media="all" href="style.css" />
</head>
<body>
<div class="herz">
<h2>Herzliche Grüße</h2>
</div>
</body>
</html>
Komplexe Figuren bestehen zu meist aus mehreren geometrischen Grundformen. Ein Stern beispielsweise, lässt sich mit zwei übereinander liegenden Dreiecken realisieren. Da wir aber keine <div>-Suppe produzieren wollen bleibt uns nichts anderes übrig als die Pseudoelemente :before und :after zu verwenden.
Mit CSS3 unser Herz formen
Für unser Herz benötigen wir außer den beiden Pseudoelementen einige tolle neue CSS3 Eigenschaften. Wir werden mit dem bereits bekannten border-radius arbeiten und um die Elemente an die richtige Stelle zu verschieben mit transform und transform-origin arbeiten. Die beiden Pseudoelemente werden mit position: absolute an die richtige Stelle verschoben, was impliziert, das unser einfaches <div class="herz"> als position: relative deklariert werden muss. Genug gesagt, ran an die Arbeit:
@import url(http://fonts.googleapis.com/css?family=Lemon);
body {
width: 700px;
margin: 2em auto 0;
background: #ddd;
font-family: Lemon, Georgia, sans-serif;
position: relative;
}
div.herz {
position: relative;
width: 700px;
height: 630px;
}
div.herz h2 {
position: absolute;
z-index: 50;
top: 90px;
left: 200px;
width: 300px;
text-align: center;
font-size: 42px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
color: #fff;
line-height: 1.4;
}
div.herz:before,
div.herz:after {
position: absolute;
content: "";
left: 350px;
top: 0;
width: 350px;
height: 560px;
background: red;
-webkit-border-radius: 350px 350px 0 0;
-moz-border-radius: 350px 350px 0 0;
-ms-border-radius: 350px 350px 0 0;
-o-border-radius: 350px 350px 0 0;
border-radius: 350px 350px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
div.herz:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
Zuerst einmal hab ich eine passende Schriftart aus den Google Web Fonts eingebunden. Wenn euch diese nicht gefällt, ersetzt sie einfach. Dem Herzen ansich geben wir außer einer festen Höhe und Breite nichts besonderes mit. :before und :after werden absolut zum Herzen, links bzw. rechts positioniert und anschließend um 45° bzw. -45° gedreht (transform: rotate(45deg);). Um kein eckiges Herz zu haben ist es natürlich noch wichtig einen border-radius anzugeben welcher uns eine komplette Rundung verschafft. transform-origin ist unser Ausgangspunkt (hier ist eine tolle Erklärung).
Das war es im großen und ganzen schon. Was schenkt ihr eurer Freundin zum Valentinstag? 😀
