Seit der Veröffentlichung der CSS2 Spezifikation im Jahre 1998 hat sich CSS immer mehr zu einem wirklich mächtigen Werkzeug zur Gestaltung von Webseiten entwickelt. Mit den neuen Features der letzten CSS Revision (CSS3) wird die Effizienz und Qualität der Webentwicklung auf einen weitaus höheren Level gebracht. Die wichtigsten CSS3 Techniken und hilfreichen Tools stelle ich heute vor.

CSS3 – diese Techniken sollte jederman beherrschen

Im folgendem stelle ich die Techniken vor, die in der heutigen Webentwicklung schon als ein Muß angesehen werden können, weil sie zum Teil extrem effizient und zeitsparend sind und alte Techniken ersetzen.

Border Radius

Wird von allen modernen Browsern dargestellt.

Um Boxen mit sogenannten runden Ecken zu versehen, waren früher immer aufwendig in Photoshop gefertigte Grafiken nötig, die mit überflüssigem Markup im Quellcode an den richtigen Stellen positioniert werden mussten.

Dank CSS3 sind runde Ecken nun ein Kinderspiel und können easy einer Klasse oder ID im CSS zugewiesen werden. Wichtig zu wissen ist natürlich, dass die Internet Explorer Familie CSS3 nicht darstellen kann.

Das Ergebnis

Der zur Darstellung einer an allen Ecken gleichmäßig abgerundeten Box sieht wie folgt aus:

.testbox {
  background: #D93315;
  padding: 15px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  color: #000;
}

Wenn jedoch nur bestimmte Ecken einer Box abgerundet werden sollen, oder aber der Radius der Rundungen sich an bestimmten Ecken unterscheiden soll, notieren wir unser CSS3 etwas anders:

.testbox2 {
  background: #D93315;
  padding: 15px;
  border-radius: 20px 0px 20px 0px;
  -moz-border-radius: 20px 0px 20px 0px;
  -webkit-border-radius: 20px 0px 20px 0px;
  color: #000;
}

Auch border-radius kann effektiv in Kurzschreibweise notiert werden und erspart uns somit überflüssige Zeilen im CSS.

Werfen wir einen genaueren Blick auf die drei wichtigen Zeilen:

.testbox2 {
  border-radius: 20px 0px 20px 0px;
  -moz-border-radius: 20px 0px 20px 0px;
  -webkit-border-radius: 20px 0px 20px 0px;
}

Die erste Zeile hat zur Zeit nur Auswirkungen auf die neueste Opera Version, ist aber die Schreibweise, die in die fertige CSS3 Spezifikation einfliessen wird. Die zweite Zeile spricht den Firefox an und die dritte alle Webkit-Browser (Safari und Chrome).

Die Kurzschreibweise ist sehr interessant, hierbei können wir von bekannten Kurzschreibweisen wie Padding oder Margin ausgehen. Bei Vier Werten spricht der erste die linke obere Ecke an, der Zweite die rechte obere Ecke, der Dritte die untere rechte Ecke und der Vierte dementsprechend die untere linke Ecke.

Angewendet werden kann diese Technik übrigens auch hervorragend zur Präsentation von Bildern. Alle Internet Explorer stellen unsere farbige Box ohne abgerundete Ecken dar.

Text Shadow

Wird von allen modernen Browsern dargestellt.

Nie war es so einfach, einen Text oder eine Überschrift mit Schatten zu versehen.

Das Ergebnis

Da alle modernen Browserhersteller mittlerweile text-shadow implementiert haben, benötigen wir zur Darstellung nur eine Zeile CSS:

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

Hier ist kein Browserspezifischer Code mehr nötig. Der Internet Explorer stellt in jeder Version diese Überschrift ohne den Textschatten dar, wofür wir ihn alle kräftig liebhaben.

Transparenz (Opacity)

Um bestimmte Elemente eines Layouts mit einer stufenlos anpassbaren Transparenz zu versehen, waren früher einige Zeilen Browserspezifischer Code nötig. Heute sprechen wir alle modernen Browser mit nur noch einer Zeile Code an:

.box {
opacity: .6;
}

Wenn wir allerdings auch die Internet Explorer zur Darstellung transparenter Elemente überreden wollen, benötigen wir doch noch zusätzlichen; browserspezifischen Code:

.box {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE 8
filter: alpha(opacity=60); // IE 5-7
}

Die einstellbaren Werte gehen von 9 für nichttransparent bis 1 für völlige Transparenz.

Nützliche Tools für den Einstieg in CSS3

Wer mit CSS3 anfängt und einen Einstieg in die Materie wagt, mag am Anfang noch etwas überfordert sein von der Vielfalt der Möglichkeiten. Auch der Profi hat nicht immer alle Variaten im Kopf und kann sofort immer abschätzen, was wie aussehen wird, daher stelle ich hier mal die wichtigsten und interessantesten Tools zum Austesten der CSS3 Effekte vor.

CSS3, please!

CSS3, please! gestattet uns, etliche CSS3 Eigenschaften online auszuprobieren und mit CSS3 etwas »rumzuspielen« und die neuen Eigenschaften für uns zu entdecken. Das tolle an diesem Tool ist, dass es die festgelegten Regeln gleich fertig kopierbar bietet und neben jeder Zeile CSS-Code auch anzeigt, welche Browser damit angesprochen werden. Sehr nützlich!

CSS CREATOR

Der CSS CREATOR zeigt klar und übersichtlich in Tabellenform auf, welche CSS Eigenschaften und Selektoren in welchen Browsern greifen. Wer wissen will, welcher Browser was kann, ist hier richtig!

Text-Shadow Testtool

Dies ist eines der geisten Online-Tools, die ich kenne. Hier wird der Spieltrieb im erheblichen Maße gefördert und man kann hervorragend online austesten, wie sich welche Kombination von Schrift- und Textschattenfarbe auswirkt. Absolut empfehlenswert!

Text-Stroke Testtool

Die selbe Webseite bietet ein weiteres Tool zum Austesten von sogenannten Text-Strokes an, also wie geprägt aussehenden Text Effekten. Leider können Strokes zur Zeit nur Safari und Google Chrome darstellen.

Linear Gradient Tool

Mit CSS3 ist es ebenfalls ganz leicht möglich, Hintergründen oder ähnlichen einen linearen Verlauf zu verpassen. Wie sich welche Einstellungen Auswirken, kann man wunderbar Anhand dieses tollen Linear Gradient Tools testen. Dank dieser sich auf Firefox und Webkit-Browser auswirkenden Eigenschaften braucht es keine aufwendigen Gradient Grafiken mehr.

Transforms

Mit transform lassen sich Elemente aus ihren natürlichen, gradlinigen Fluss bewegen und auf eine sehr interessante Art darstellen. Dies eröffnet den Webentwicklern völlig neue Horizonte bei der Gestaltung von interessanten und neuartigen Websites, da alle modernen Browser diese Eigenschaft darstellen können. Wie immer heißt es natürlich beim Internet Explorer: wir müssen draußen bleiben, worauf natürlich nicht unbedingt Rücksicht genommen werden muß, denn der IE stellt die betreffenden Elemente dann althergebracht gerade dar.

Fazit:

CSS3 ist mittlerweile zu einer sehr mächtigen und gern genutzten Waffe für den Webentwickler geworden und öffnet ihm völlig neue Horizonte. Nie war die Gestaltungsfreiheit bei einem Projekt so groß wie heute und man darf sehr gespannt sein, was die Zukunft noch alles bringen wird.

Ich wünsche viel Spaß beim Einsatz von CSS3 und dem Experimentieren mit den neuen Eigenschaften.

Danke, dass Du diese Seite ausgedruckt hast! Bitte besuche uns gerne wieder, um weitere hilfreiche Artikel zu lesen.