php-homepage.com

CSS3, die neuen Möglichkeiten um Webseiten zu gestalten

Während html5 schon längst als Standard eingeführt wurde, ist CSS3 noch immer in Entwicklung und wird laufend um features erweitert.
Von daher wird es in absehbarer Zeit keine "offizielle Verabschiedung von CSS3 geben, wie bei CSS2.1 (W3C Empfehlung vom Juni 2011). Trotzdem werden viele Funktionen von CSS3 schon von den meisten Browsern unterstützt, aber eben nicht von allen.

Warum sollte man also CSS3 verwendeten?

Nicht jeder kann auf die (schrumpfende) Anzahl der Nutzer mit veralteten Browser-Versionen verzichten,
doch irgendwo muss man ja langsam anfangen. Viele Funktionen bzw. Effekte lassen sich mit CSS3 viel besser realisieren, als mit veralteten Workarounds wie Sprites, rounded corners, gradient - Anordnung von Pixelgrafiken als Hintergrund usw. Und sollte ein Besucher einen älteren Browser verwenden, kommt er/sie halt nicht in den vollen grafischen Genuss, die Seite funktioniert ja trotzdem.

Interessante Möglichkeiten mit CSS3

Ich möchte hier nur auf einige der interessantesten Neuerungen und Verbesserungen von CSS3 eingehen,
die in der Praxis Erleichterungen für den Webdesigner bringen und einen Mehrwert für den Nutzer haben. die vollständige Liste der Möglichkeiten von CSS3 findet man hier.

Praktische Möglichkeiten von CSS3


border-radius - "runde Ecken"

Mit border-radius lassen sich unter CSS3 "runde Ecken" ganz einfach ohne Grafiken realisieren.
Dazu gibt man dem Container (Div oder anderes Block Element) eine border und ev. Hintergrundfarbe und fügt dann die Eigenschaft border-radius hinzu.
siehe folgendes Beispiel:

runde Ecken mit border-radius
abgerundete Ecken mit "border-radius"

gradient

Farbverläufe mit reinem CSS3 realisieren: gradient Erklärung mit Beispielen

box-shadow und text-shadow

Mit diesen CSS3 Eigenschaften lassen sich Schatteneffekte für Text einfach realisieren.
Ganz ohne Grafiken natürlich, doch leider erst (teilweise)Unterstützung ab ie10.
Schatteneffekte mit CSS3
Schatten mit CSS3, Achtung noch keine volle Unterstützung kleiner als ie12!

media queries

Mobile ready mit media queries - jedem das passende Stylesheet;
Detailierte Beschreibung mit Beispielen

-----------------------------------

folgend noch weitere CSS3 Eigenschaften

transform - endlich lassen sich Elemente auch drehen
column - Text innerhalb eines Containers mehrspaltig anzeigen lassen
Web Fonts - Eigene Schriftarten mit Quellenangabe, unabhängig von Betriebssystem und Browser
neue Möglichkeiten Selektoren zu definieren/anzusprechen
Funktionen, Berechnungen und sogar Animationen ohne Skripte realisierbar
Liste noch nicht vollständig...