ek

Beiträge zum Thema JS, HTML, CSS & anderem Kram

Das Thema Transition in CSS3 ist so neu nicht mehr, doch nach wie vor aktuell. Das liegt u.a. daran, dass mit Firefox und Chrome neuerdings zwei weitere Browser neben Safari auf dem Markt sind, die diese Funktion unterstützen.

So entwickeln sich CSS-Transitions von der Spielerei zur ernsten Alternative zu JavaScript, wenn es um Animationen im Webdesign geht. Deshalb habe ich 7 Tutorials rausgesucht, die einen Überblick über die Möglichkeiten von CSS-Transitions geben.

1. CSS: Transition Timing Functions

The Art of Web

Der Artikel behandelt die Eigenschaften transition-duration und transition-timing-function, und beschreibt, wie man Dauer und Geschwindigkeit von Animationen beeinflusst.

2. CSS Transforms and Transitions - The OSX Dock example

Mac OSX-Dock realized with- CSS3-Transition

Chris Walker zeigt, wie man den Mac OSX-Dock nur mithilfe von CSS3 nachbauen kann.

3. Going Nuts with CSS Transitions

Polaroid-Gallery with CSS3

Natalie Downe demonstriert, wie man eine Polaroid-Galerie mithilfe von CSS-Transitions baut.

4. Nicer Navigation with CSS Transitions

Nicer Navigations with CSS Transitions

Schöne Anleitung, wie man Website-Navigationen schöner gestalten kann mit CSS3.

5. Create the accordion effect using CSS3

CSS Ninja

Der Akkordeon-Effekt nur mit CSS3 und Transitions realisiert.

6. CSS3 Hover Tabs ohne JavaScript

Dosonaro - Blog

Hover Tabs ohne JavaScript. Über die Praxistauglichkeit dieser Lösung kann man streiten, aber nichtsdestotrotz veranschaulicht sie sehr schön die Möglichkeiten von CSS3.

7. CSS Transitions 101

CSS Transitions on Webdesigner Depot

Zum Abschluss eine schöne Gesamtübersicht zum Thema CSS-Transitions auf Webdesigner Depot.

Ich hoffe, ihr habt ein paar hilfreiche Sachen gefunden. Zwar surfen viele Leute noch immer mit einem veralteten Browser, der keine CSS-Transitions unterstützt, doch trotzdem gibt es Möglichkeiten, diese Technik bereits jetzt einzusetzen. Es sind eben die Details, wenn bspw. ein Link nicht schlagartig beim Hover die Farbe ändert, sondern das langsam tut, die eine moderne Website ausmachen. Hat man keinen modernen Browser, kommt man nicht in den Genuss, kann die Seite aber trotzdem nutzen.

Social Icon-Bar mit jQuery

Um meine Besucher auf meine diversen Profile in Social Communities aufmerksam zu machen, habe ich rechts in der Sidebar eine Social Icon Bar installiert, deren Icons bspw. auf Flickr und Xing verweisen. Und damit das nicht so langweilig ist, habe ich den Spaß noch ein wenig mit jQuery befeuert.

Jetzt möchte ich kurz erläutern, wie das geht. Als erstes brauchen wir ein passendes Icon-Set. Ich habe für dieses Tutorial auf die Matte Black Social Media Icons zurückgegriffen, da diese Sammlung u.a. auch ein Xing-Icon beinhaltet. Die Icons bringen wir nun in einem Grafik-Programm mithilfe des Crop-Tools auf die gewünschte Größe, in meinem Fall 40x40 Pixel.

Icon mit dem Crop-Tool auf die richtige Groesse bringen

Das machen wir mit allen Icons, die wir benötigen. Danach widmen wir uns dem HTML-Teil:

HTML
<ul id="iconbar">
	<li>
		<span class="s1"></span>
		<span class="s2"></span>
		<span class="s3"></span>
		<span class="s4"></span>
		<a href="http://name.tld/feed/" title="Den RSS-Feed abonnieren">
			<img src="images/rss.png" alt="Den RSS-Feed abonnieren" width="40" height="40" title="Den RSS-Feed abonnieren" />
		</a>
	</li>
</ul>

Basis ist eine ungeordnete Liste. Der Übersichtlichkeit halber habe ich nur einen Listenpunkt angegeben. Die Liste kann natürlich beliebig erweitert werden. Innerhalb der Listenelemente sind vier span-Elemente. Diese bilden die Abdeckungen des jweiligen Icons, welche ähnlich einer Blende zu allen Seiten wegfahren, wenn man mit dem Cursor drüber geht.

Als nächstes kommt der jQuery-Teil:

JavaScript
jQuery(function ($) {
	$('body').addClass('js_active');
	$('#iconbar li').each(function(i) {
		$(this).hover(function() {
			$('span.s1', this).stop().animate({'left' : '-20px'}, {queue:false,duration:500});
			$('span.s2', this).stop().animate({'top' : '-20px'}, {queue:false,duration:500});
			$('span.s3', this).stop().animate({'right' : '-20px'}, {queue:false,duration:500});
			$('span.s4', this).stop().animate({'bottom' : '-20px'}, {queue:false,duration:500});
		}, function() {
			$('span.s1', this).animate({'left' : '0'}, {queue:false,duration:500});
			$('span.s2', this).animate({'top' : '0'}, {queue:false,duration:500});
			$('span.s3', this).animate({'right' : '0'}, {queue:false,duration:500});
			$('span.s4', this).animate({'bottom' : '0'}, {queue:false,duration:500});
		});
	});
});

Als erstes fügen wir dem body-Element die Klasse "js_active" hinzu. Dadurch werden die span-Elemente sichtbar. So ist dafür gesorgt, dass die Social Icon Bar auch ohne Effekt funktioniert, wenn der Besucher JavaScript deaktiviert hat. Als nächtes wird mit der each()-Funktion auf die einzelnen Elemente der ungeordneten Liste zugegriffen. Fährt der Besucher mit dem Cursor über eines der Listen-Elemente, fahren die span-Elemente ausgelöst durch die animate()-Funktion von jQuery in die jeweils vorgegebene Richtung. Der Wert 500 gibt an, dass dieser Vorgang eine halbe Sekunde dauern soll. Bewegt man den Cursor vom Listen-Element weg, gehen die span-Elemente wieder in ihre Ausgangsposition.

Zum Schluss muss das ganze natürlich noch ansprechend mithilfe von CSS ausgerichtet werden:

CSS
#iconbar {
	clear: left;
	overflow: hidden;
	list-style: none;
}

#iconbar li {
	width: 40px;
	height: 40px;
	margin-right: 10px;
	float: left;
	position: relative;
	overflow: hidden;
	border: 1px solid #999;
	-moz-border-radius: 2px;
	-khtml-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

#iconbar li span {
	display: none;
}

body.js_active #iconbar li span {
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	background-color: #FFF;
	opacity: 0.7;
	cursor: pointer;
}

.s1 {
	left: 0;
	top: 0;
}

.s2 {
	top: 0;
	right: 0;
}

.s3 {
	right: 0;
	bottom: 0;
}

.s4 {
	bottom: 0;
	left: 0;
}

Die Listen-Elemente sind 40 Pixel breit und hoch, und werden nach links gefloated. Wichtig beim Listen-Element sind die Angaben position: relative;, damit die darin liegenden span-Elemente absolut positioniert werden können, und overflow: hidden;, damit die span-Elemente beim Mouseover auch wirklich verschwinden. Zusätzlich geben wir den Listen-Elementen noch eine leichte Eckenrundung mit.

Die span-Elemente sind durch die CSS-Angabe display: none; eigentlich unsichtbar. Ist JavaScript allerdings im Browser des Besuchers aktiviert, bekommt das body-Element die Klasse "js_active" hinzugefügt und es greift die darunter liegende Stylesheet-Angabe. Die span-Elemente sind nun 20x20 Pixel groß und absolut positioniert. Durch die Angabe opacity: 0.7; werden sie außerdem leicht durchsichtig und geben einen Blick auf das dahinter liegende Icon frei. Durch die Angabe cursor: pointer; wird der Cursor schon beim Überfahren der span-Elemente zur - für Links charakteristischen - Hand. Das erhöht die User Experience.

Zum Schluss werden die einzelnen span-Elemente noch positioniert und schon ist die Social Icon Bar fertig. Ihr könnt sie wie ich in die Sidebar integrieren oder unter jeden Blog-Eintrag für die Bookmark-Links. Möglichkeiten gibt es wie immer viele.

Solltet ihr noch Fragen haben oder Probleme auftreten, nutzt die Kommentar-Funktion und scheut euch nicht, mir Fragen zu stellen. Ansonsten danke ich für eure Aufmerksamkeit und - falls euch der Artikel gefallen hat - würde mich freuen, wenn ihr ihn einschlägigen Bookmark-Diensten zuführt.