CSS3-Effekte

Allgemeines

Mit CSS3 können Websites ansprechend und modern gestaltet werden. Es spart dem Entwickler viel Arbeit, da bisher erstellte Grafiken in vielen Fällen nicht mehr notwendig sind.

Z. B. können Schatten von Schriften und Boxen, abgerundete Ecken, transparente Hintergrundfarben usw. im Handumdrehen erstellt werden. Auch Animationen sind nun über CSS3 möglich und das Design kann einfach für verschiedene Bildschirm-Auflösungen und mobile Endgeräte wie Smartphones oder Tablets erstellt werden.

Achtung
Nicht alle Browser unterstützen schon alle neuen CSS3-Effekte.
Bei manchen ist es nötig sogenannte Vendor-Prefixe zu verwenden.

Browserkompatibilität - Vendor Prefixes

Um die Kompatibilität mit älteren Browsern zu gewährleisten, sollte man die entsprechenden Vendor-Prexife einsetzen.
Bei einer entsprechenden CSS3-Eigenschaft müssen die Werte für jeden Browser einzeln angegeben werden. Als letztes sollte die korrekte Schreibweise der Eigenschaft ohne Prefix definiert werden.

-moz
-webkit
-o
-ms

					
						div {
							-webkit-transform: rotate(30deg);
							-ms-transform: rotate(30deg);
							transform: rotate(30deg);
						}
Hinweis
Die Prefixe sind nicht mehr bei allen Eigenschaften notwendig, schaden aber nicht. Ein gute Übersicht finden sie hier.

Einige CSS3-Effekte

Border-Radius

					
					.borderradius {
						border-radius: 20px 10px;
					}

Box-Shadow

					
					.boxshadow {
						box-shadow: 5px -5px 10px 5px rgba(0,0,0,0.5);
					}

Inner-Shadow

					
					.innershadow {
						box-shadow: 10px -10px 10px 0px #999 inset;
					}

Box-Shadow & Radius

					
					.boxshadowradius {
						border-radius: 20px 10px;
						box-shadow: 10px -10px 10px 0px rgba(0,0,0,0.5);
					}

RGBA

					
					.rgba {
						background-color: rgba(40, 100, 60, 0.5);
					}
Hinweis
Mit dem letzten Wert lässt sich die Transparenz der Farbe einstellen. 1 = Voll abdeckend; 0.5 = 50 % Transparenz.
Hinweis
Mit opacity und rgba() gibt es unterschiedliche Möglichkeiten wie Hintergrundfarben oder Hintergrundbilder transparent gemacht werden können.
Beispiele für opacity, rgba() anzeigen

Linearer Gradient

					
					.linearergradient {
						background: linear-gradient(45deg, red, blue);
					}

Fading Gradient

					
					.fadinggradient {
						background: linear-gradient(45deg, rgba(0,0,0,0),rgba(0,0,0,1));
						height: 300px;
					}

Text-Shadow

Das ist ein Text mit Schatten.

					
					.textshadow {
						text-shadow: 2px 2px 3px #666;
					}

Buchdruck Schatten

Buchdruck

					
					.buchdruck {
						background-color: #888;
						text-shadow: 2px -1px #666, 0px 1px #FFF;
						padding: 10px;
					}

Mehrere Hintergründe

					
					.multiple-backgrounds {
						width: 200px;
						height: 225px;
						background-color: #F00; /* Fallback */
						background-image: url('../images/bg-image-vogel.png'), url('../images/bg-image-wiese.png');
						background-position: center bottom, left top;
						background-repeat: no-repeat;
					}

Transformationen

rotate()

					
					.rotate:hover {	
						-webkit-transform: rotate(30deg);
						-ms-transform: rotate(30deg);
						transform: rotate(30deg);
					}

translate()

					
					.translate:hover {
						-webkit-transform: translate(50px, 100px);
						-ms-transform: translate(50px, 100px);
						transform: translate(50px, 100px);
					}

scale()

					
					.scale:hover {
						-webkit-transform: scale(1.5, 1.5);
						-ms-transform: scale(1.5, 1.5);
						transform: scale(1.5, 1.5);
					}

Transitions

duration, linear

					
					.duration:hover {
						width: 300px;
						transition: width 0.5s linear;
					}

delay, ease-in

					
					.delay:hover {	
						-webkit-transform: rotate(30deg);
						-ms-transform: rotate(30deg);
						transform: rotate(30deg);
						transition: 0.5s ease 1s;
					}

Multiple Transitions

					
					.ease-in-out:hover {
						width: 300px;		
						-webkit-transform: rotate(30deg);
						-ms-transform: rotate(30deg);
						transform: rotate(30deg);
						transition: 0.5s ease 1s, width 0.7s ease-out;
					}

S/W-Effekt mit Hover

Wiese
					
					img.grayscale {
						transition: filter 0.5s ease-in-out; /* leichte Verzögerung beim Hover-Effekt */
						-webkit-filter: grayscale(100%);
						filter: grayscale(100%);
					}

					img.grayscale:hover {
						-webkit-filter: grayscale(0%);
						filter: grayscale(0%);
					}

CSS3-Effekte - Generator

Hier finden Sie einige Links zu Online-Tools, mit denen Sie CSS3-Effekte erstellen können.
CSS3 Maker
CSS3 Generator
Enjoy CSS
CSS3 Gradient Generator