Mit CSS3 gibt es nun endlich die Möglichkeit die Grafiken auf Websites drastisch zu reduzieren. Anstatt von bg-Grafiken (Hintergrundgrafiken) kann ein nahezu identisches Aussehen rein mit CSS generiert werden. Es gibt jedoch gewisse Beschränkungen. Dazu später mehr
Wie verwendet man CSS3 anstatt Grafiken?
Dazu hier ein Beispiel. Das Beispiel beschreibt den Fall, dass man einen Button als Grafik erstellt hat und einen Hover Effekt.
Ohne CSS3
<div class=“button“>Der Button</div>
Dazu hat man eine entsprechende css Datei mit z.B.
.button {
background: url(‚…./image.png‘) …;
height:…
width:..
Weiter kommt eine CSS Rule die für den Hover Status zuständig ist
.button:hover {
background: url(‚…./image-hover.png‘) …;
Man hat somit für diesen kleinen Button bereits zwei Grafiken(!) im Einsatz. Je nach Größe der Grafik und Dateiformat kommen dort schnell einige kB zusammen.
Welche CSS3 Eigenschaft sind wichtig?
Die wichtigen Eigenschaften sind
„border-radius:“ Dies erlaubt einem die Ecken eines Elementes abzurunden. Dabei gibt es verschiedenste Varianten wie man border-radius verwenden kann.
z.B.
„border-radius:5px“ => alle Ecken werden mit Radius 5px abgerunden
„border-raidus: 5px 4px 3px 2px“ => Jede Ecke hat unterschiedliche Rundungen
uvm. 😉 Einfach mal testen
„background-color:“ Dies ist wichtig, da der Button oder andere Element natürlich einen Hintergrundfarbe haben soll.
z.B. „background-color:gray;“
„box-shadow:“ Dies erlaubt es Schattenwürfe zu generiere. Dort auch einfach mit Firebug oder einem anderen Tool direkt im Browser testen. Man kann alle Parameter verändern, die man braucht
z.B. „box-shadow: 5px 5px 2px gray“
Das war es auch schon. Man benötigt nur diese 3 Eigenschaften und kann damit fast alle Grafiken durch reinen CSS ersetzten.
Was gibt es für Grenzen?
Damit man CSS3 auch sinnvoll anwenden kann, ist es extrem wichtig, dass der Designer entsprechend vernüftige Designs erstellt, die für css3 ausgelegt sind.
Was z.B. nicht geht:
– Hover Effekte bei z.B. Button die eine andere Grafik erfordern (einen Verlauf haben)
– Verläufe im allgemeinen
– Spiegelungen und glanz
Hier ein Beispiel für eine Seite bei der wir (www.konvis.de) sehr viel mit css3 gearbeitet haben
http://www.elektrotechnik-vonbrandis.de/