Features
29.10.2013, 00:00 Uhr
12 CSS3-Funktionen für tolle Effekte
Cascading Stylesheets 3 können wesentlich mehr als nur eine Fläche rot einfärben. Das kann man am folgenden Beispiel sehen.
Denken Sie nur an so etwas Einfaches wie einen Hover-Effekt: Lungert die Maus über einem div-Bereich herum, wird in einem anderen Feld erklärender Text angezeigt. So etwas kann beispielsweise einen Menüpunkt oder eine Schaltfläche mit zusätzlichen Informationen versehen.
Bislang mussten Sie für so einen Effekt nicht nur HTML und CSS sondern auch JavaScript bemühen. Mithilfe von CSS3 geht das komplett ohne die Programmiersprache. Siehe folgendes Beispiel. Das sollte in allen aktuellen Browsern funktionieren inklusive des Internet Explorer 9.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS3-Test</title>
<style>
.container{
position:relative;
text-align:center;
padding:20px 0;
width:420px;
margin: 0 auto;
}
.container span{
display:inline-block;
padding:20px 10px;
background-color:#eeee00;
color:#000000;
}
.container span::before{
position:absolute;
width:100%;
content:attr(data-title);
opacity:0;
}
.container span:hover::before{
opacity:1;
}
</style>
</head>
<body>
<div class="container">
<span data-title="Mehr Wissen zu diesem Eintrag">Eine Schaltfläche</span>
</div>
</body>
</html>Neben diesem Feature findet sich in dem Artikel http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/ elf weitere Schmankerl von CSS3. Unbedingt ansehen.
