In diesem Beitrag möchte ich euch zeigen, wie man mit ganz einfachen Mitteln einen Schatteneffekt an beliebige Block-Elemente hinzufügen kann. Der Clou dabei ist jedoch, dass dafür kein HTML angefasst werden muss, sondern dies ausschließlich über normale CSS Mittel funktioniert.
Ja klar, werden jetzt einige rufen. Dafür kann man ja einfach die CSS Deklaration box-shadow verwenden! Richtig. CSS3 erlaubt es seit einiger Zeit, mit box-shadow schöne Schatteneffekte an beliebige HTML Elemente zu zaubern und ist dabei ziemlich flexibel.
Aber leider ist es wie mit vielen neuen Dingen - einige Browser unterstützen es noch nicht, oder nur mit speziellen Browserprefixen wie -moz-, -o- oder -webkit-. Dies bedeutet, man muss diese Deklaration für jeden Browser in seiner speziellen Schreibweise wiederholen und bläst damit sein Stylesheet unnötig auf. Und selbst dann werden ältere Browser wie IE8 (und niedriger) oder Opera 10.10 (oder niedriger) nicht unterstützt.
Aus diesem Grund möchte ich euch eine weitere Möglichkeit vorstellen, wie man noch einen Schatten erstellen kann.
Gestatten, Pseudo-Elemente :before und :after
CSS2 bietet schon seit einiger Zeit die Möglichkeit mit Hilfe der Pseudo-Elemente :before und :after Inhalte vor bzw. nach Elementen per CSS hinzuzufügen. So lässt sich zum Beispiel mit folgender Anweisung vor allen Link-Elementen ein Text hinzufügen:
a:before {content: "Ich bin ein Link: "}
Und das alles, ohne etwas am HTML selbst ändern zu müssen. Und ein weiterer Vorteil für uns ist, dass diese Pseudo-Elemente auch schon von einigen älteren Browserversionen unterstützt werden und zudem noch ohne spezielle Prefixe auskommen.
Wie entsteht nun der Schatteneffekt?
Wir nutzen den Umstand, dass der so hinzugefügte Text vom Browser als Block-Element behandelt wird, wenn dieser auch auf ein Block-Element angewandt wird. Er verhält sich also genau so, als wenn wir ein neues DIV-Element hinzugefügt hätten.
Wenn wir dieses Element nun noch mit einer Hintergrundfarbe versehen und entsprechend positionieren, können wir so einen passablen Schatteneffekt erzeugen. Wie genau dies aussieht, könnt ihr nun (endlich) hier sehen:
Da habt ihr es. Ist der Schatten nicht schön?
Jetzt werde ich euch noch schnell den dazu notwendigen Code zeigen und schon steht euch nichts mehr im Wege, um solche Schatten selbst in euren Seiten zu verwenden.
Hier das HTML:
Diese Box hat einen schönen Schatten.
Wenn Ihr mit der Maus darüberfahrt, seht ihr auch,
dass sich der Schatten der Größe der Box anpasst.
Und hier das entsprechende CSS:
#box {
background-color: green;
position: relative;
width: 50%;
text-align: center;
margin: 0px auto;
padding: 10px;
color: #fff;
font-family: sans-serif;
margin-bottom: 20px;
}
#box:hover {
font-size: 150%;
}
.shadowme:after {
content: "";
background-color: lightGrey;
position: absolute;
bottom: -5px;
right: -5px;
width: 100%;
height: 5px;
}
.shadowme:before {
content: "";
background-color: lightGrey;
position: absolute;
top: 5px;
right: -5px;
width: 5px;
height: 100%;
}
Ich wünsche Euch viel Spaß damit und bei Fragen oder Hinweisen könnt ihr gerne die Kommentarfunktion verwenden. :)