Ich habe vor kurzem auf einer Webseite ein hängendes Werbebanner mit verschieden angeordneten Buchstaben gesehen, welches als Bilddatei eingebunden wurde. Sah klasse aus und da habe ich mir gedacht, dass das auch per CSS3 – gänzlich ohne Grafikdateien – umgesetzt werden könnte. Also habe ich mich mal hingesetzt und dabei kam dann das hier raus:

Habt ihr Lust das Banner nachzubauen?

Grundlegendes

Wir legen zunächst einen Div-Container an, in den wir alle weiteren Elemente einbauen.

Der Container bekommt eine feste Breite (900 Pixel) und Höhe (200 Pixel). Als Hintergrund definieren wir einen schicken radialen Hintergrundfarbverlauf in Blautönen. Dazu kommt noch ein dezenter Schlagschatten.

.banner {
	position: relative;
	width: 900px;
	height: 200px;
	margin: 50px auto;
	background: #f0f9ff;
	background: -moz-radial-gradient(center, ellipse cover,  #f0f9ff 0%, #2789b6 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f0f9ff), color-stop(100%,#2789b6));
	background: -webkit-radial-gradient(center, ellipse cover,  #f0f9ff 0%,#2789b6 100%);
	background: -o-radial-gradient(center, ellipse cover,  #f0f9ff 0%,#2789b6 100%);
	background: -ms-radial-gradient(center, ellipse cover,  #f0f9ff 0%,#2789b6 100%);
	background: radial-gradient(center, ellipse cover,  #f0f9ff 0%,#2789b6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#2789b6',GradientType=1 );
	box-shadow: 0 0 15px #333;
	overflow: hidden;
}

Die einzelnen Buchstaben

Wir definieren einen weiteren Container, in den wir die einzelnen Buchstaben anordnen werden. Auch dieser bekommt eine feste Breite (780 Pixel), um ihn mittels margin innerhalb des übergeordneten Containers zentrieren zu können.

.banner .inhalt {
	width: 780px;
	margin: 0 auto;
}

Widmen wir uns nun den einzelnen Buchstaben des Banners. Wir fügen diese jeweils als Absatz (p) ein. Damit die Buchstaben auch horizontal angeordnet werden, floaten wir sie nach links. Der Optik wegen kommt noch einen Rahmen oben und unten hinzu.

.banner .inhalt p {
	position: relative;
	float: left;
	font-weight: bold;
	font-size: 64px;
	padding: 25px 15px 15px 15px;
	border-top: 5px solid #2789B6;
	border-bottom: 5px solid #2789B6;
	background: #fff;
	margin: 40px 15px 0 0;
}

Wo wir gerade bei der Optik sind, definieren wir einen Box-Schatten nach außen sowie einen Schatten nach innen, der den Buchstaben-Elementen einen „Used“-Look gibt. Auch der Text soll einen Schatten erhalten. Und wo wir gerade beim Thema Text sind, bauen wir mittels @import einen netten Google Web Font ein; ich habe mich für „Bree Serif“ entschieden.

@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

.banner .inhalt p {
	font-family: 'Bree Serif', serif;
	text-transform: uppercase;
	text-shadow: 2px 2px 3px #333;
	box-shadow: 5px 5px 10px #333, inset 0 0 50px #ddd;
}

Damit wären wir nun hier:

Versetzte Buchstaben

Um die Buchstaben versetzt anzuordnen, nutzen wir die Pseudo-Klasse (nth-child). Wir wollen jeden zweiten Buchstaben um 2 Grad und jeden dritten Buchstaben um minus 3 Grad drehen. Dafür definieren wir:

.banner .inhalt p:nth-child(2n) {
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	transform: rotate(2deg);
}

.banner .inhalt p:nth-child(3n) {
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}

Zusätzlich sollen die Buchstaben nach oben fahren, wenn diese mit der Maus gehovert werden:

.banner .inhalt p:hover {
	top: -10px;
}

Damit das nicht so abgehackt aussieht, animieren wir den Übergang mittels transition:

.banner .inhalt p {
	-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;
}

Aufhängen

Das Banner soll hängen und dazu benötigen die Buchstaben-Elemente ein Loch an der oberen Seite. Dazu nutzen wir das Pseudo-Element :before. Das Loch bekommt eine Größe von 10 x 10 Pixeln. Mittels border-radius machen wir daraus einen Kreis und definieren mit box-shadow einen innenliegenden Schatten. Das Loch zum Aufhängen zentrieren wir und positionieren es absolut.

.banner .inhalt p:before {
	position: absolute;
	content: "";
	left: 50%;
	top: 10px;
	margin-left: -5px;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	box-shadow: inset 1px 1px 3px #666;
	background: #eee;
}

Das Pseudo-Element :after nutzen wir zum Aufhängen, also für den Faden. Dieser erhält eine Länge von 60 und eine Breite von 2 Pixeln. Der Faden wird, wie schon das Loch, absolut und zentriert positioniert und erhält noch einen dezenten Schlagschatten.

.banner .inhalt p:after {
	position: absolute;
	content: "";
	width: 2px;
	height: 60px;
	top: -46px;
	left: 50%;
	margin-left: -1px;
	background: #aaa;
	box-shadow: 1px 0 3px #555;
}

Zwischenergebnis:

Logo einbauen

OK. Eine Bilddatei nutze ich dann doch, nämlich das WordPress-Logo, welches wir als Hintergrund des Banners einbauen. Bei :hover des Banners soll das Logo animiert vergrößert und ausgeblendet werden. Ein netter Effekt, oder?

Das Logo bauen wir als zusätzliche Div-Klasse ein. Wir positionieren das Logo absolut und zentrieren es horizontal sowie vertikal. Die Bilddatei hat eine Größe von 256 x 256 Pixeln. Bei einer Höhe von 200 Pixeln müssen wir das Logo also um minus 28 Pixeln nach oben versetzt anordnen (200 – 256 / 2). Horizontal zentrieren wir das Logo bei einer Breite von 900 Pixeln mit einem Abstand von 322 Pixeln vom linken Rand (900 – 256 /2).

Wir wollen, dass das Logo dezent im Hintergrund erscheint. Daher nehmen wir der Bilddatei die Sichtbarkeit und setzen diese auf 50%. Für die animierte Ausblendung des Logos definieren wir gleich die transition-Anweisung mit einer Laufzeit von einer halben Sekunde.

.banner .logo {
	position: absolute;
	top: -28px;
	left: 322px;
	opacity: .5;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

Das Logo wird also innerhalb einer halben Sekunde vergrößert und ausgeblendet. Das definieren wir mittels transform wie folgt:

.banner:hover .logo {
	opacity: 0;
	-webkit-transform: scale(5);
	-moz-transform: scale(5);
	-o-transform: scale(5);
	-ms-transform: scale(5);
	transform: scale(5);
}

Und damit ist der Stylesheet-Teil abgeschlossen. Nun müssen wir das Banner nur noch in die Webseite einbauen.

HTML-Code

Für den Einbau verwendet ihr diesen Code:

<div class="banner">
	<div class="logo">
	<img src="../images/wp_logo_256.png" alt="WordPress-Logo">
	</div>
		<div class="inhalt">
			<p>w</p>
			<p>o</p>
			<p>r</p>
			<p>d</p>
			<p>p</p>
			<p>r</p>
			<p>e</p>
			<p>s</p>
			<p>s</p>
		</div>
</div>

Fertig.

Browserkompatibiliät

Was gibt es noch zum Thema Browser zu sagen? Da wir jede Menge CSS3-Schnickschnack nutzen, ist die Browser-Kompatibilität doch etwas eingeschränkt. Die neuen Versionen von Chrome, Firefox, Opera und Safari stellen das Banner korrekt dar. Lediglich der Internet Explorer 9 kann einige CSS3-Befehle (transition und text-shadow) nicht verarbeiten, das eigentliche Banner wird aber korrekt angezeigt.

Wie immer gibt es eine Live-Demo

und den Download

für diejenigen, die keine Lust auf nachbauen haben.

Viel Spass damit.