11 klassische CSS-Techniken, vereinfacht mit CSS3

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Wir mussten alle einen Effekt erzielen, der eine zusätzliche Handvoll Divs oder PNGs erforderte. Wir sollten uns nicht auf diese alten Techniken beschränken, wenn ein neues Zeitalter kommt. Dieses neue Zeitalter nimmt die Verwendung von CSS3 an. Im heutigen Tutorial zeige ich Ihnen elf verschiedene zeitaufwändige Effekte, die mit CSS3 ganz einfach erzielt werden können.

CSS3? Was ist das?!

Ich bin sicher, Sie haben von CSS gehört. CSS3 unterscheidet sich in Bezug auf die Syntax nicht wesentlich. Die Leistung von CSS3 ist jedoch viel größer. Wie Sie in diesen elf Techniken sehen werden, können Sie mehrere Hintergründe haben, die Größe dieser Hintergründe, Randradien, Textschatten und mehr dynamisch ändern!

Folgendes sagt die offizielle (oder zumindest meiner Meinung nach offizielle) Website von CSS3, css3.info, zu CSS3:

CSS3 ist das neue Kind in der Stylesheet-Familie. Es bietet aufregende neue Möglichkeiten, um mit Ihren Designs eine Wirkung zu erzielen, ermöglicht es Ihnen, vielfältigere Stylesheets für eine Vielzahl von Anlässen und vieles mehr zu verwenden.

Was wir abdecken werden

Hier sind die 11 Techniken, die ich Ihnen zeigen werde, wie Sie mit CSS3 neu erstellen. Ich zeige Ihnen, wie Sie sie mit CSS2 (oder JavaScript) und dann mit CSS3-Eigenschaften erstellen. Denken Sie daran, dass diese Effekte nur in modernen Browsern funktionieren, die diese CSS3-Funktionen implementieren. Sie können diese am besten mit Safari 4 anzeigen.

1. Abgerundete Ecken

Wahrscheinlich mein Favorit auf dieser Liste - abgerundete Ecken, die einem Entwickler so viele Optionen geben. Sie können in Sekunden eine Schaltfläche mit abgerundeten Ecken erstellen. Am liebsten setze ich einen Verlaufshintergrund, der entlang der x-Achse wiederholt wird, und wende dann abgerundete Ecken an, um eine sehr gut aussehende Web 2.0-Schaltfläche zu erstellen.

Sie können abgerundete Ecken mithilfe von vier zusätzlichen divs oder mithilfe von JavaScript simulieren. Obwohl ein Benutzer diese glatten Ecken nicht sieht, wenn JavaScript deaktiviert ist, denke ich, dass das in Ordnung ist, solange die Website noch so funktioniert, wie sie sollte. Sie können sich über diese Methode informieren, wenn Sie bei der Erstellung abgerundeter Ecken lieber reines CSS verwenden möchten.

Klassischer Weg

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript">
$(function(){
	$('.box').corners('10px');
});
</script>

<div class="box">
	<!--CONTENT-->
</div>

Die klassische Methode verwendet jQuery zusammen mit einem JavaScript-Plugin namens Corners.

CSS3-Weg

<style type="text/css">
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Wie Sie sehen, müssen Sie drei CSS3-Eigenschaften angeben. Schließlich wird es nur einer sein; Sie müssen jetzt drei verwenden, da verschiedene Browser unterschiedliche Eigenschaftsnamen verwenden.

Sehen Sie sich die Demo an.

2. Box Shadow

Box Shadows bieten Ihnen ein sehr leistungsfähiges Werkzeug. In 99% der Fälle, in denen ich entwerfe, verwende ich Schlagschatten für etwas. Ich werde wieder ein jQuery-Plugin verwenden, um mich um den klassischen Weg zu kümmern, denn, ehrlich gesagt, es ist verwirrend, nur mit CSS herauszufinden. Warum sollte ich meine Zeit damit verschwenden, mit negativen Margen herumzuspielen, wenn alles bereits geschrieben ist und Job für mich erledigt? Solange mein Design gut aussieht, wenn Leute JavaScript deaktiviert haben, bin ich mit einem jQuery-Plugin vollkommen zufrieden.

Klassischer Weg

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropShadow.js"></script>
<script type="text/javascript">
$(function(){
	$('.box').dropShadow({
		left: 5,
		top: 5,
		opacity: 1.0,
		color: 'black'
	});
});
</script>

<div class="box">
	<!--CONTENT-->
</div>

Ich benutze das dropShadow Plugin. Einfach und was ich wollte; obwohl ich lieber nur CSS verwenden würde;).

CSS3-Weg

<style type="text/css">
.box {
box-shadow: 5px 5px 2px black;
-moz-box-shadow: 5px 5px 2px black;
-webkit-box-shadow: 5px 5px 2px black;
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Die Werte für die Eigenschaften des Feldschattens sind: x-offset y-offset blur color. Viel einfacher als das Importieren von zwei JavaScript-Dateien und VIEL einfacher als das Herumspielen mit Hintergrundbildern und negativen Rändern.

Sehen Sie sich die Demo an.

3. Textschatten

Wenn Sie jemals ein Tutorial zum Erstellen des Buchdruckeffekts in Photoshop gelesen haben, wissen Sie, dass der Schlagschatteneffekt verwendet wird. Es ist wirklich einfach, Buchdruck zu erstellen. Folgen Sie einfach diesem Tutorial bei Line25 von Chris Spooner.

Klassischer Weg

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.fonts {
position: relative;
}
.fonts .font {
position: absolute;
z-index: 200;
}
.fonts .second {
top: 1px;
color: #000;
z-index: 100;
}
</style>

<div class="fonts">
	<span class="font">The quick brown fox jumps over the lazy dog.</span>
	<span class="font second">The quick brown fox jumps over the lazy dog.</span>
</div>

Anstatt ein jQuery-Plugin zu verwenden, benutze ich nur einige einfache CSS-Tricks, um den Text absolut hinter der anderen Textkopie zu positionieren. Das einzig schlechte daran, CSS3 in dieser Situation nicht zu verwenden, ist, dass Sie zwei Kopien des Textes erhalten, wenn CSS deaktiviert ist.

CSS3-Weg

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.font {
text-shadow: 0 1px 0 #000;
}
</style>

<span class="font">The quick brown fox jumps over the lazy dog.</span>

Wenn Sie unscharfe Textschatten verwenden möchten (die dritte "Option" in der Eigenschaft "text-shadow"), weiß ich nicht, wie Sie dies mit reinem CSS und ohne Bilder erreichen würden.

Sehen Sie sich die Demo an.

4. Ausgefallene Schriftart

Wir haben schon lange davon geträumt, aber Sie können endlich "ausgefallene Schriftarten" im Web anzeigen, ohne sich auf JavaScript verlassen zu müssen. Dies führt natürlich zu Problemen beim Verteilen kostenpflichtiger Schriftarten über das Internet. Jedenfalls präsentiere ich Ihnen @ font-face.

Klassischer Weg

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/loyal.js"></script>
<script type="text/javascript">
$(function(){
	Cufon.replace('.classic .font');
});
</script>
<style type="text/css">
.font {
font-size: 20px;
}
</style>

<span class="font">The quick brown fox jumps over the lazy dog.</span>

Ich entschied mich, Cufón zu verwenden, um den Text zu ersetzen. Ich werde nicht erklären, wie man es benutzt, weil Jeffrey bereits einen großartigen Screencast hat.

CSS3-Weg

<style type="text/css">
@font-face {
font-family: 'Loyal';
src: url('loyal.ttf');
}
.font {
font-family: Loyal;
font-size: 20px;
}
</style>

<span class="font">The quick brown fox jumps over the lazy dog.</span>

Wir erstellen eine Schriftfamilie mit @font-face und verwenden sie dann als Wert für die Schriftfamilie. Michael Owens hat hier vor ungefähr einem Monat einen Artikel geschrieben, der @font-face recht gut erklärt.

Sehen Sie sich die Demo an.

5. Deckkraft

Wenn Sie kürzlich die Neugestaltung der Envato-Website besucht haben, haben Sie möglicherweise bemerkt, dass viele transparente Elemente vorhanden sind. Obwohl dies mit transparenten PNGs erreicht wird, können Sie mithilfe der Opazitätseigenschaft einen ähnlichen Effekt erzielen. Jetzt gibt es die Opazitätseigenschaft schon eine Weile, aber unser geliebter IE hat seine eigenen Eigenschaften.

Klassischer Weg

<style type="text/css">
.box {
opacity: .6; // all modern browsers (this is CSS3)
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE 8
filter: alpha(opacity=60); // IE 5-7
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

CSS3-Weg

<style type="text/css">
.box {
opacity: .6;
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Mit CSS3 haben wir gerade zwei Eigenschaften beseitigt, die spezifisch für IE waren. Ist das nicht großartig?!

Sehen Sie sich die Demo an.

6. RGBA

Jeder weiß, wofür RGB steht (rot, grün, blau), aber wofür steht das A? Es steht für Alpha, was sich auf die Transparenz bezieht.

Abgesehen von abgerundeten Ecken ist RGBA meine am zweithäufigsten verwendete CSS3-Eigenschaft. Manchmal möchte ich Navigationslinks nur ein paar hellweiße/schwarze Hintergründe hinzufügen, wenn ein Benutzer mit der Maus darüber fährt. Es ist viel einfacher, als für jede Farbe ein neues Bild zu erstellen. Mit ein wenigPHP wird es jedoch viel einfacher.

Klassischer Weg

Da dies kein PHP-Artikel ist, werde ich nicht auf PHP eingehen. Speichern Sie diese Datei einfach als rgba.php und wenn Sie eine bestimmte RGBA-Farbe benötigen, machen Sie die Hintergrundfarbe als URL (rgba.php?r=R&g=G&b=B&a=A).

<?php
$image = imagecreatetruecolor(1, 1);
$r = (int)$_GET['r'];
$g = (int)$_GET['g'];
$b = (int)$_GET['b'];
$a = (float)$_GET['a'];
$white = imagecolorallocate($image, 255, 255, 255);
$color = imagecolorallocatealpha($image, $r, $g, $b, 127*(1-$a));
imagefill($image, 0, 0, $white);
imagefilledrectangle($image, 0, 0, 1, 1, $color);

header('Content-type: image/png');
imagepng($image);
?>

Wenden Sie das jetzt einfach auf eine Div an...

<style type="text/css">
.box {
background: url(rgba.php?r=239&g=182&b=29&a=.25);
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

CSS3-Weg

<style type="text/css">
.box {
background: rgba(239, 182, 29, .25);
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Sehen Sie sich die Demo an.

7. Hintergrundgröße

Die Eigenschaft für die Hintergrundgröße ist eine erstaunliche Sache, die Sie beim Erstellen eines flüssigen Layouts auf Ihrem Werkzeuggürtel haben sollten. Ein Beispiel hierfür könnte sein, wenn Sie ein Hintergrundbild für einen Container für die Seitenleiste haben. Die klassische Methode hierfür würde eine Optimierung erfordern, damit das Bild entlang der y-Achse wiederholt wird. Mit CSS3 ist es jedoch so, als würde man eine weitere Hintergrundeigenschaft hinzufügen.

Klassischer Weg

<style type="text/css">
.box {
position: relative;
overflow: hidden;
}
	.box img {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 50%;
	z-index: 100;
	}
	.box .content {
	position: absolute;
	z-index: 200;
	}
</style>

<div class="box">
	<div class="content">
		<!--CONTENT-->
	</div>
	<img src="http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg" alt="" />
</div>

CSS3-Weg

<style type="text/css">
.box {
background: #ccc url(http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg) no-repeat;
-webkit-background-size: 50%; /* Safari */
-o-background-size: 50%; /* Opera */
-khtml-background-size: 50%; /* Konqueror */
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Leider ist diese Eigenschaft zum Zeitpunkt dieses Schreibens nicht in Firefox (V3.5.2) implementiert.

Sehen Sie sich die Demo an.

8. Mehrere Hintergründe

Ah, mehrere Hintergründe. Sie geben den Entwicklern ein sehr leistungsfähiges Werkzeug. Ich kann mir so viele Dinge vorstellen, die mehrere Divs erfordern, nur um mehr als einen Hintergrund zu haben. Der häufigste Ort befindet sich in einem Header-Bereich der Website, aber das ist nur das erste, woran ich gedacht habe.

Klassischer Weg

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/bg.png) repeat-x;
}
	.box2 {
	width: 100%;
	height: 100%;
	background: url(images/text.png) center center no-repeat;
	}
</style>

<div class="box">
	<div class="box2">
		<!--CONTENT-->
	</div>
</div>

Die klassische Methode ist ziemlich offensichtlich. Wickeln Sie das Div einfach mit einem anderen Div ein und so weiter für jeden Hintergrund, den Sie benötigen. Produziert gut aussehenden Code, nicht wahr?

CSS3-Weg

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Die Syntax ist in dieser sehr einfach zu verstehen. Alles, was Sie für die verschiedenen Hintergründe tun, ist, zwischen jedem ein Komma einzufügen! Dies ist jedoch wieder eine begrenzte Eigenschaft und nur in Safari.

Sehen Sie sich die Demo an.

9. Spalten

Das ist die interessanteste CSS3-Eigenschaft, die ich je gesehen habe. Es ist nicht etwas, was man im Webdesign oft sieht. Ich habe nur ein- oder zweimal zeitungsähnliche Kolumnen gesehen; Ich mag jedoch, wie der Effekt aussieht, wenn er richtig gemacht wird. Normalerweise würden Sie den Inhalt in Divs aufteilen und diese Divs schweben lassen, aber ich habe ein jQuery-Plugin gefunden, das die Spalten dynamisch rendert.

Klassischer Weg

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.columnize.js"></script>
<script type="text/javascript">
$(function(){
	$('.columns').columnize({
		columns: 2
	});
});
</script>
<style type="text/css">
.column {
padding-right: 10px;
}
.column.last {
padding: 0;
}
</style>

<div class="columns">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

Ich habe den Spalten einen kleinen Abstand hinzugefügt, damit der Text nicht gegeneinander zertrümmert wird.

CSS3-Weg

<style type="text/css">
.columns {
-moz-column-count: 2;
-webkit-column-count: 2;
}
</style>

<div class="columns">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

Es gibt eine Handvoll anderer CSS3-Spalteneigenschaften, die Sie anwenden können. Zu Demonstrationszwecken habe ich jedoch nur die Anzahl der Spalten angegeben. Wenn Sie mehr über diese anderen Eigenschaften erfahren möchten, lesen Sie die mehrspaltige Seite unter CSS3.info.

Sehen Sie sich die Demo an.

10. Randbild

Ich hatte keine Ahnung von der Eigenschaft des Rahmenbilds, bis ich auf Firefox 3.5 aktualisiert und auf die Website von Chris Spooner gegangen bin und festgestellt habe, dass seine Post-Bilder Bildrahmen hatten. Ich persönlich habe kein Interesse an dieser Immobilie, aber das wird mich nicht davon abhalten zu erklären, wie ich sie erreichen kann.

Klassischer Weg

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.borderImage.js"></script>
<script type="text/javascript">
$(function(){
	$('.classic .box').borderImage('url(images/border.png) 27 27 27 27 round round');
});
</script>
<style type="text/css">
.box {
border-width: 20px;
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Anstatt die Zeit damit zu verbringen, mehrere Divs zu erstellen und das Hintergrundbild um das Div herum zu wiederholen, habe ich ein jQuery-Plugin gefunden, das die Arbeit für mich erledigt. Es heißt borderImage und funktioniert genau so, wie es sollte.

CSS3-Weg

<style type="text/css">
.box {
border-width: 20px;
-webkit-border-image: url(images/border.png) 27 round;
-moz-border-image: url(images/border.png) 27 round;
border-image: url(images/border.png) 27 round;
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Wie Sie sehen können, ist die Eigenschaft des Rahmenbilds etwas seltsam. W3 erklärt, wie es VIEL besser berechnet wird.

Sehen Sie sich die Demo an.

11. Animationen

Okay, wer mag es nicht, wenn ein Element sanft nach links rutscht oder eingeblendet wird, wenn Sie über etwas schweben? Animationen sind großartig, um die Benutzeroberfläche zu verbessern, aber stellen Sie sicher, dass Sie nicht über Bord gehen! Die einzigen Browser, die CSS3-Animationen unterstützen, sind Webkit-basierte Browser. Die einzige andere Möglichkeit, Animationen anzuzeigen, ist die Verwendung von JavaScript. Ich werde jQuery verwenden, weil es meine Lieblings-JavaScript-Bibliothek ist (wenn Sie es noch nicht erraten haben).

Klassischer Weg

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('.box').hover(function(){
		$(this).stop().animate({
			top: '20px'
		}, 300);
	}, function(){
		$(this).stop().animate({
			top: '0'
		}, 300);
	});
});
</script>
<style type="text/css">
.box {
position: relative;
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

CSS3-Weg

<style type="text/css">
.box {
position: relative;
-webkit-transition: top 300ms linear;
}
.box:hover {
top: 20px;
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Beide Codefragmente machen gleich Sachen: Schieben Sie die div 20 Pixel über einen Zeitraum von 300 ms nach unten. Denken Sie daran, dass der CSS3-Code nur in Webkit-Browsern funktioniert!

Sehen Sie sich die Demo an.

Abschluss

Wir sind schon fertig: 11 CSS-Techniken, die mit CSS3 in (hoffentlich naher) Zukunft viel einfacher werden. Natürlich wird es eine Weile dauern, bis wir uns in allen Browsern zu 100% auf diese Eigenschaften verlassen können.

Vergessen Sie nicht, diese anderen Nettuts+ -Tutorials zu lesen, in denen CSS3 behandelt wird:

Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts+ RSS-Feed, um weitere tägliche Tipps und Artikel zur Webentwicklung zu erhalten.