My Favorit HTML5/CSS3 Features
Naturgemäß (?) funktionieren die Beispiele allesamt nicht im Internet Explorer.
WebKit (Safari, Gecko) Browser sowie Gecko (FireFox) Browser sollten die meisten Beispiele anzeigen können. Wo nicht, habe ich es dokumentiert.
Was mich ärgert ist, daß sowohl FireFox als auch Safari immer noch jeweils eigene Attribute für die gleichen Dinge verwenden. Im praktischen Leben muß man also immer die Safari- und Mozilla Attribute angeben. Es wird Zeit, daß nicht nur die Funktionen sondern endlich auch auch die Attributnamen und -Wert genormt werden bzw. die bereits genormten Namen auch von den Browser verwendet werden.
Text-Shadow:
Beispiel:
Code:
<div style="text-shadow: 5px 5px 10px black;">
Text mit Schatten
</div>
Das Attribut text-shadow scheint derzeit das einzige CSS3-Attribut zu sein, daß kein vorangestelltes -moz oder -webit benötigt.
Die Werte:
- Versatz nach rechts
- Versatz nach unten
- Schattentiefe
- Farbe
Box-Shadow:
Beispiel:
Code:
<div style="-moz-box-shadow: 5px 5px 10px black;-webkit-box-shadow: 5px 5px 10px black;">
Sample-Box
</div>
Die Attribute haben die gleiche Bedeutung wie bei text-shadow.
rgba:
Beispiel:
Code:
<div style="background-color: rgba(0,0,0, 0.5);">
Box 2
</div>
Die Werte:
- Die ersten 3 Werte sind der normaler rgb-code
- Wert 4 ist die Opazität
Rounded box:
Beispiel 1:
Code:
<div style="-moz-border-radius: 10px;-webkit-border-radius: 10px;">
Sample-Box
</div>
Beispiel 2:
Code:
<div style="
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
">
Sample-Box
</div>
Achtung: bei den Namen der Einzel-Ecken können sich Safari und Firefox nicht über die Attributnamen einigen.
Transformation:
Beispiel:
Code:
<div style="
-moz-transform: rotate(5deg) scale(1.2) translate(100px, 0) skew(20deg, 10deg);
-webkit-transform: rotate(5deg) scale(1.2) translate(100px, 0) skew(20deg, 10deg);
">
Sample-Box
</div>
Als Werte für die Transformation können eine oder mehrere Transformationsfunktionen angegeben werden. Neben den hier genannten gibt es noch weitere.
Transition (Animation):
Works on Safari and is supposed to work in FireFox 3.7
Beispiel 1:
Code:
<style>
.transition{
-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
}
.transition:hover{
background-color: blue; /* animated */
color: yellow; /* not animated */
}
</style>
<div class="transition">
move mouse over me
</div>
Erklärung:
Das Attribut -[moz||webkit]-transition bewirkt erst einmal gar nichts. Erst wenn durch irgendeine Operation ein CSS-Wert geändert wird, kommt der transition-Wert zum Tragen: Das hier angegebene Attribut wird dann animiert geändert.
Im Beispiel wird der Wert per CSS-Hover geändert, genauso gut geht es aber per JavaScript.
Es geht auch -[moz||webkit]-transition: all 1s
Beispiel 2 (Transition + Transform):
Code:
<style>
.transition{
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
}
.transition:hover{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
</style>
<div class="transition">
move mouse over me
</div>
multi column:
Code:
<style>
.columns_2{
-moz-column-count: 2;
-moz-column-gap: 20px;
-moz-column-rule: solid silver 1px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
-webkit-column-rule: solid silver 1px;
}
</style>
<div class="columns_2">
...
</div>
Günter Mittwoch, Mai 26, 2010 09:06 AM