Ganz schön hintergründig

Bilder für Rahmen

Im Firefox ist die Eigenschaft mit dem herstellerspezifischen Präfix -moz- realisiert, für Chrome und Safari brauchen Sie das herstellerspezifische Präfix -webkit-. Damit benötigen Sie insgesamt drei Angaben für den Schatten um die Box:

-moz-box-shadow: #042618 6px 6px 5px
;
-webkit-box-shadow: #042618 6px 6px
5px;
box-shadow: #042618 6px 6px 5px ;

Der Internet Explorer interpretiert boxshadow erst ab Version 9. Für ältere IEs können Sie auf verschiedene Filter zurückgreifen, beispielsweise auf den Drop- Shadow-Filter:

-ms-filter:"progid:DXImageTransform.
Microsoft.DropShadow(color=#333,
offx=3, offy=3)";
filter:progid:DXImageTransform.
Microsoft.DropShadow(color=#333,
offx=3, offy=3);

image.jpg

© Internet Magazin

Damit dieses Bild als Rahmen benutzt werden kann, muss es per CSS in 9 Teile geteilt werden, die hier über Linien gekennzeichnet sind.

Geben Sie hinter DropShadow die Farbe und den X- und Y-Offset an. Eine Möglichkeit, den Grad der Unschärfe zu bestimmen, besteht allerdings nicht.Will man auf die Unschärfe nicht verzichten, lässt sich dies mit etwas zusätzlichem Aufwand ebenfalls mithilfe eines anderen Filters simulieren.Der folgende Code erstellt eine eingefärbte Box mit einem unscharfen Rand:

<div style="width:200px; height:
200px;background-color:#333;filter:
progid:DXImageTransform.Microsoft.
Blur(pixelradius=10); -ms-filter:
"progid:DXImageTransform.Microsoft.
Blur(pixelradius=10)">Box</div>

Für einen Schlagschatten im IE platzieren Sie diese Box hinter dem Element, das mit einem Schlagschatten versehen werden soll. Details für diese Lösung finden Sie im Dev.Opera-Netzwerk (Link im Kasten).

Bilder für Rahmen

Link-Tipps

nicolasgallagher.com/multiple-backgrounds- and-borders-with-css2/ css-tricks.com/examples/Starry-NightCSS3/ css-tricks.com/auto-moving-parallaxbackground/ www.alistapart.com/articles/supersize-that-background-please/ dev.opera.com/articles/view/crossbrowser-box-shadows/ ejohn.org/blog/border-image-infirefox/ code.google.com/p/curved-corner/

Obwohl border-style viele verschiedene Rahmentypen inklusive verschiedener 3D-Effekte anbietet, werden diese kaum genutzt, da sie wenig Kontrolle bieten. Volle Kontrolle hingegen haben Sie durch die in CSS3 neu eingeführte Möglichkeit, für Rahmen Hintergrundbilder zu verwenden.Dabei stellt sich zuerst die Frage: Wie soll das Bild auf den Rahmen verteilt werden? Schließlich hat das Bild im Normalfall andere Ausmaße als die Box, für die es als Rahmen fungieren soll.Deswegen müssen Sie angeben, wie das Bild aufgeteilt werden soll. Bilder für Rahmen werden in neun Bereiche zerschnitten: vier Eckelemente, vier Mittelstücke und ein innerer Bereich. Wo das Schneidemesser ansetzen soll, geben Sie bei border-image über vier Zahlen an: Die erste bestimmt, wo das Schneidewerkzeug von oben schneidet, die zweite Zahl von rechts, die dritte Zahl von unten, die vierte von links. Werte ohne Einheiten werden dabei als Pixel interpretiert, daneben sind auch Prozentzahlen möglich.Im Beispiel ist das Bild insgesamt 225px breit, sodass 75 als Wert zum Schneiden ein guter Wert ist - es ist genau die Größe eines der Quadrate. Da von allen Richtungen aus 75px genommen werden sollen, genügt eine Angabe:

border-image: url(rahmenbild.png)
75 stretch;

Außerdem müssen Sie auch noch bestimmen, wie die Mittelteile, die der flexible Teil sind, auf den größeren Platz aufgeteilt werden sollen: Attraktive Optionen sind stretch (gedehnt, bis der Bereich ausgefüllt wird), round (wiederholt, aber im Bedarfsfall auch skaliert, sodass immer ganze Bildelemente reinpassen) oder repeat (wiederholt, eventuell abgeschnitten). Webkit basierte Browser interpretieren round als repeat.Damit können wir ein erstes Beispiel erstellen. Die Browser benötigen border-image mit ihren Präfixen.

border-width: 30px;
-webkit-border-image: url
(rahmenbild.png) 75 stretch;
-moz-border-image: url
(rahmenbild.png) 75 stretch;
-o-border-image: url(rahmenbild.png)
75 stretch;
border-image: url(rahmenbild.png)
75 stretch;

Eine schöne Einsatzmöglichkeit für border-image ist die Erstellung flexibler, aber gleichzeitig gestylter Buttons. borderimage wird von allen aktuellen Browsern, außer dem Internet Explorer in der Version 9 unterstützt.

Ein Kreis über border-radius

Abgerundete Ecken über border-radius dürfen bei der Vorstellung des border- und background-CSS3-Moduls natürlich auf gar keinen Fall fehlen. Gerade border-radius ist wohl die bekannteste und am besten beschriebene CSS3-Eigenschaft. Die Abrundung geht einfach: Hinter border-radius geben Sie den Radius für die Rundung an. Firefox benötigt bis Version 4 diese Angabe mit dem -moz-Präfix. Für ältere Webkit- Browser würden Sie entsprechend auch das -webkit-Präfix brauchen. Chrome ab Version 5.0, Safari ab 4.0 ebenso wie IE 9 unterstützen border-radius ohne Präfix.Damit lassen sich viele Formen erzeugen - bis hin zu einem simplen Kreis: Hierfür braucht man als Ausgangsbasis ein Quadrat. Dann wählen Sie einen Radius, der halb so groß ist wie die Breite/Höhe des Quadrats:

height: 200px;
background-color: #08882A;
-moz-border-radius: 100px;
border-radius: 100px;

Für den IE kleiner als Version 9 können Sie runde Ecken durch eine .htc-Datei nachbessern (Details siehe Kasten "Link-Tipps"). Der Einsatz von CSS3 bietet Ihnen viele Vorteile: Effekte wie runde Ecken oder Schatten lassen sich ohne Bilder realisieren. Das bedeutet für den Webdesigner eine einfachere Wartung und vereinfachte Anpassungen. Und schließlich auch eine bessere Performance der Webseite durch die reduzierte Anzahl an http-Requests. Andere Features wie die mehrfachen Hintergrundbilder verschlanken den HTML-Code, was ebenfalls nicht zu verachten ist.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…