CSS3 Workshops, Tutorials und Codeschnipsel

Da CSS3 zur Zeit (19.02.2010) nur sporadisch von einigen Browsern unterstützt wird, können die hier gezeigten Beispiele in den meisten Fällen nur mit Google Chrome sowie der Windows bzw. MAC Version des Safari Browsers betrachtet werden. Die Button im oberen Seitenbereich im HTML5-Portal wurden beispielsweise mit CSS3 bzw. Webkit animiert, beim überfahren mit der Maus wird per Opacity ein Fade-Effekt angezeigt, Browser ohne Webkit-Unterstützung zeigen nichts.

Bitte vergrößer mich...

Wenn dein Browser es kann... Test 1 Test 2 Test 3

Anmerkung: Ach wäre das toll, wenn unter Chrome die Rundungen des Divs so schön gerendert werden würden wie in Apples Safari. Und wie toll wäre es erst, wenn im Safari die Animation so schön rund laufen würde wie unter Google's Chrome. Einfach mal testen :-)

CSS-Datei

div.runderkasten {
	border:solid #4D648B 3px;
	width:200px;
	height:140px;
	-webkit-border-radius: 22px;
	-moz-border-radius: 22px;
	}

	#beispiel0 {
		margin:auto;
		text-align:center;
		-webkit-transition: all 1s ease-in-out;
	}

	#beispiel0:hover {
    	-webkit-transform: rotate(360deg) scale(3);
	}

Animierte Button mit Webkit / CSS3

CSS-Datei

@-webkit-keyframes fade {
0%   { opacity: 1; }
10%  { opacity: 0.8; }
50%  { opacity: 0.4; }
100% { opacity: 1.0; }
}

.css3fade:hover {
-webkit-animation-name: fade;
-webkit-animation-duration: 1s;
}

HTML-Dokument
<img class="css3fade" src="images/test.png">

Beispielgrafik mit einfachem Hover Fade-Effekt:

Animierte Button mit Webkit / CSS3

CSS-Datei

#beispiel1 img {
	-webkit-transform: scale(1);
	-webkit-transition-timing-function: cubic-bezier;
	-webkit-transition-duration: 400ms;
}

#beispiel1 img:hover{
	-webkit-transform: scale(.5);
	-webkit-transition-timing-function: cubic-bezier;
	-webkit-transition-duration: 400ms; 
}

Animierte Button mit Webkit / CSS3

CSS-Datei

#beispiel2 img{
	opacity:1
	-webkit-transition: opacity;
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 400ms;
}

#beispiel2 .drunter{
	position:absolute;
	top:0;
	left:0;
	opacity: 0;
	-webkit-transition: opacity;
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 400ms;
}
	
#beispiel2 .drunter:hover{
	opacity: 1;
	-webkit-transition: opacity;
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 400ms;
}

Hello World

Animierte Button mit Webkit / CSS3

CSS-Datei

#beispiel3 img{
	position:absolute;
	top:0;
	left:0;		
	-webkit-transition: margin-left;
	-webkit-transition-timing-function: ease-in;
	-webkit-transition-duration: 300ms;
}

#beispiel3:hover img{
	margin-left:247px;
}

Hello World

Animierte Button mit Webkit / CSS3

CSS-Datei

#beispiel4 img{
	z-index:0;
}
#beispiel4 .drunter{
	opacity: 1;
	position:absolute;
	-webkit-transform: scale(0);
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 300ms;
}
#beispiel4:hover .drunter{
	-webkit-transform: scale(1);
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 300ms; 
}

Hello World

Natürlich ist noch einiges mehr möglich - eine sehr nette Spielerei garantiert ohne Javascript bietet Xelas Spielwiese, (fast) echte Interaktivität beim Disco-Challenge auf CSS3 Basis. Wer sich für Animationen und insbesondere für die verschiedenen Timings wie linear, ease-in und ease-out sowie cubic-bezier interessiert, findet bei The-Art-of-Web einen interessanten Artikel mit praktischen Beispielen für alle Transition Timing Funktionen.

Video aller CSS3 Effekte unter Google Chrome

HTML5 Tutorials Zur Startseite HTML5 Formulare