CSS3 neue Feature für coole Browser

Manch einer wird sagen: “Alter Hut!” oder “Kennen wir doch schon!”, andere wissen nicht einmal das CSS in verschiedenen Versionen existiert.

Da ich mir gerade neue Strukturen schaffe (dazu in einem späteren Beitrag mehr) und dazu Klienten-Fragebögen erstellen, um eventuelle Projektanfrage effizienter abfeiern zu können, bin ich über diverse CSS3 Hacks und neue Funktionen gestolpert.

Grundsätzlich ändert sich an der bisher bekannten Syntax nichts. Aber es kommen unglaublich coole Features hinzu. Natürlich werden diese nur von fortschriftlichen Browsern unterstützt (Mozilla, Safari, Chrome, etc.). Benutzer des wieder einmal überholten Internet Explorers (ja, auch die neuste Version 8 des IE ist schon wieder OUT OF DATE), bleiben wie immer aussen vor. Mittlerweile ist fast lächerlich wie die Entwickler bei M$ hinter der allgemeinen Entwicklung her hinken. Aber dies sei anderes Thema.

Mit CSS3 werden Schatten für fast jedes Element eingeführt (Text, Div-Layer, Formularelemente, usw.). Und abgerundete Ecken.
Im Moment muss man sich noch einer etwas umständlichen Syntax bedienen um die beiden genannten Features nutzen zu können, da die Unterstützung noch nicht native eingebaut ist und das W3C die endgültige Syntax noch nicht freigegeben hat. Mit der zusätzlichen Deklaration “-moz-” für Mozilla, Firefox, etc. bzw. “-webkit-” für Safari und Chrome vor dem eigentlichen Attribut kann man die neuen Features verwenden.

Ein Beispiel:
CSS:
.layer {
background: #666;
border: 1px solid #555;
color: #fff;
padding: 5px 10px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
HTML:
<div class="layer">Lorem ipsum ad qui amet dolore, vitae cetero quaerendum mel ea.</div>

Ergibt:

Und einen Schatten erzeugt man wie folgt:
CSS:
.layer {
background: #666;
border: 1px solid #555;
color: #fff;
padding: 5px 10px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: 5px 5px 15px #000;
-moz-box-shadow: 5px 5px 15px #000;
box-shadow: 5px 5px 15px #000;
}
HTML:
<div class="layer">Lorem ipsum ad qui amet dolore, vitae cetero quaerendum mel ea.</div>

Ergibt:

Die Schattennummer ist am interessantesten, denn mann kann einen Schatten auch nach innen legen (funktioniert leider seit der neusten Safariaktualisierung nur noch im FF, aber die Safarientwickler wissen um dieses Problem und wollen es schnellstmöglich beheben):
CSS:
.layer {
background: #666;
border: 1px solid #555;
color: #fff;
padding: 5px 10px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: inset 0px 0px 15px #000;
-moz-box-shadow: inset 0px 0px 15px #000;
box-shadow: inset 0px 0px 15px #000;
}
HTML:
<div class="layer">Lorem ipsum ad qui amet dolore, vitae cetero quaerendum mel ea.</div>

Ergibt:

Und jetzt das Beste: einen äußeren Schatten kann man mit einem inneren Schatten kombinieren:
CSS:
.layer {
background: #666;
border: 1px solid #555;
color: #fff;
padding: 5px 10px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: inset 0px 0px 15px #000, 0px 0px 15px #000;
-moz-box-shadow: inset 0px 0px 15px #000, 0px 0px 15px #000;
box-shadow: inset 0px 0px 15px #000, 0px 0px 15px #000;
}
HTML:
<div class="layer">Lorem ipsum ad qui amet dolore, vitae cetero quaerendum mel ea.</div>

Ergibt: