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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…