Ganz schön hintergründig

Bilder für Rahmen

7.4.2011 von Dr. Florence Maurice

ca. 3:20 Min
Ratgeber
VG Wort Pixel
  1. Das Background- und Border-Modul von CSS3
  2. Flächendeckend
  3. Schattig in Facetten
  4. 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
Damit dieses Bild als Rahmen benutzt werden kann, muss es per CSS in 9 Teile geteilt werden, die hier über Linien gekennzeichnet sind.
© Internet Magazin

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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.