Interessante CSS3-Experimente mit Text-Shadow und Transitions
Image may be NSFW.
Clik here to view.
Es gibt so viele tolle Experimente und Dinge, die Sie mit den Eigenschaften und Möglichkeiten, die CSS3 Ihnen bietet, erstellen können. Heute möchte ich Ihnen zeigen, wie Sie mit Hilfe von Textschatten (Text-Shadow) und mit Transitions (Übergängen) mit sogenannten Unschärfe-Effekten in 7 verschiedenen CSS3-Menüs experimentieren können.
Die Grundidee, welche dahintersteckt, ist eigentlich ganz einfach. Wenn Sie mit der Maus über einen einzelnen Menüpunkt fahren, kommt dabei die CSS-Eigenschaft [hover] zum Einsatz. Dieses einzelne Menüelement erscheint dabei scharf, die restlichen Menüpunkte bleiben im Hintergrund und erscheinen als verwischt oder unscharf.
Den Originalartikel von der Webseite Tympanus.net/Codrops finden Sie hier: Blur Menu with CSS3 Transitions
Wichtig für Browserverwendung und Mobilversionen!
Die folgenden 7 tollen CSS3-Menüs mit Hover-Effekten und Verwendung von Tranistions und Textschatten funktionieren nur in den gängigsten und modernsten Browsern. In den Mobilversionen (Smartphone, Tablets) werden die Mouse-Over-Effekte teilweise fehlerhaft bis gar nicht dargestellt.
Ganz speziell möchte ich Sie auch auf den IE-Browser aufmerksam machen, welcher die CSS3-Eigenschaften Trainsitions (Übergange) als auch Text-Shadow (Textschatten) nicht unterstützt. Der Verfasser des Tutorials hat in den Download-Beispielen ein zusätzliches CSS-Stylesheet für den Internet Explorer (IE) eingebaut, damit die Menüelemente auch dort richtig angezeigt werden.
HTML-Formatierung
Der Aufbau der HTML-Struktur ist bei allen 7 Menüs immer gleich und sieht wie folgt aus:
CSS-Formatierung
Anschließend kommen wie zur Erstellung der CSS-Datei. Dabei sind die Styles für die ungeordnete Liste (ul) und für die Listenelemente (li) in allen 7 Beispielen immer dieselben.
Einzig die Link-Elemente (a href) werden von Menü zu Menü gesondert bearbeitet und modifiziert. Der Grundaufbau des CSS-Stylesheets sieht also folgendermaßen aus:
.bmenu{
padding: 0px;
margin: 0 0 10px 0;
position: relative;
}
.bmenu li{
font-size: 50px;
display: block;
}
Nach dieser kurzen Einleitung möchte ich Ihnen die CSS-Formatierung für die Beispiele 1 bis 7 vorstellen. Um gleich zu sehen, wie die Menüs funktionieren, habe ich zu jedem Menü eine kleine GIF-Datei erstellt. Die ausführliche Erläuterung zur Gestaltung der CSS-Dateien finden Sie im Original-Artikel!
Blur Menu #1
Image may be NSFW.
Clik here to view.
.bmenu li a{
color: transparent;
display: block;
text-transform: uppercase;
text-shadow: 0px 0px 5px #fff;
letter-spacing: 1px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.bmenu:hover li a{
text-shadow: 0px 0px 5px #0d1a3a;
}
.bmenu li a:hover{
color: #fff;
text-shadow: 0px 0px 1px #fff;
padding-left: 10px;
}
Blur Menu #2
Image may be NSFW.
Clik here to view.
.bmenu li a{
display: block;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(89,22,20,0.3);
color: #581514;
padding: 5px 20px;
margin: 2px;
background: rgba(255,255,255,0.2);
letter-spacing: 1px;
-webkit-transform: skew(-12deg);
-moz-transform: skew(-12deg);
-o-transform: skew(-12deg);
-ms-transform: skew(-12deg);
transform: skew(-12deg);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.bmenu:hover li a{
color: transparent;
text-shadow: 0px 0px 10px #fff;
background: rgba(88,22,22,0.2);
-webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
-o-transform: skew(0deg);
-ms-transform: skew(0deg);
transform: skew(0deg);
}
.bmenu li a:hover{
background: transparent;
text-shadow: 1px 1px 10px rgba(89,22,20,0.6);
color: #581514;
}
Blur Menu #3
Image may be NSFW.
Clik here to view.
.bmenu li a{
white-space: nowrap;
color: transparent;
display: block;
text-transform: uppercase;
text-align: center;
text-shadow: 0px 0px 6px #fff;
letter-spacing: 1px;
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.6s linear;
-moz-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
-ms-transition: all 0.6s linear;
transition: all 0.6s linear;
}
.bmenu:hover li a{
text-shadow: 0px 0px 15px #fff;
}
.bmenu li a:hover{
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
Blur Menu #4
Image may be NSFW.
Clik here to view.
.bmenu li a{
display: block;
text-transform: uppercase;
text-shadow: 0px 0px 2px #eeb213;
color: #eeb213;
padding: 5px 20px;
margin: 2px;
background: rgba(0,0,0,0.7);
letter-spacing: 1px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.bmenu:hover li a{
text-shadow: 0px 0px 10px #eeb213;
color: transparent;
background: rgba(0,0,0,0.2);
}
.bmenu li a:hover{
background: rgba(0,0,0,1.0);
text-shadow: 0px 0px 1px #eeb213;
}
Blur Menu #5
Image may be NSFW.
Clik here to view.
.bmenu li a{
color: transparent;
display: block;
text-transform: uppercase;
text-shadow: 0px 0px 4px #fff;
letter-spacing: 1px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.bmenu:hover li a{
text-shadow: 0px 0px 6px #fff;
}
.bmenu li a:hover{
color: #fff;
text-shadow: 0px 0px 1px #fff;
padding-left: 10px;
}
Blur Menu #6
Image may be NSFW.
Clik here to view.
.bmenu li a{
white-space: nowrap;
display: block;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(71,80,23,0.3);
color: #fff;
padding: 5px 20px;
margin: 2px;
background: rgba(255,255,255,0.2);
letter-spacing: 1px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.bmenu li:first-child a{
-webkit-border-radius: 15px 15px 0px 0px;
-moz-border-radius: 15px 15px 0px 0px;
border-radius: 15px 15px 0px 0px;
}
.bmenu li:last-child a{
-webkit-border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
border-radius: 0px 0px 15px 15px;
}
.bmenu:hover li a{
text-shadow: 0px 0px 10px #fff;
color: transparent;
}
.bmenu li a:hover{
background: transparent;
text-shadow: 1px 1px 10px rgba(71,80,23,0.6);
color: #c4d85a;
}
Blur Menu #7
Image may be NSFW.
Clik here to view.
.bmenu{
padding: 50px 0px;
margin: 0 auto;
position: relative;
background: rgba(0,0,0,0.7);
width: 500px;
height: 400px;
-webkit-border-radius: 250px;
-moz-border-radius: 250px;
border-radius: 250px;
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
}
.bmenu:hover{
background: rgba(0,0,0,0.2);
}
.bmenu li{
font-size: 40px;
display: block;
line-height: 66px;
}
.bmenu li a{
white-space: nowrap;
color: transparent;
display: block;
text-align: center;
text-transform: uppercase;
text-shadow: 0px 0px 3px #fff;
letter-spacing: 1px;
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.bmenu:hover li a{
text-shadow: 0px 0px 10px #fff;
}
.bmenu li a:hover{
text-shadow: none;
color: #fff;
background: rgba(129,6,29,0.8);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
{
Im Originalartikel Blur Menu with CSS3 Transitions haben Sie auch die Möglichkeit, die fertigen CSS-Menüs als Demo anzusehen oder aber die gesamten fertigen CSS3-Menüs auf Ihren Computer herunterzuladen.