CSS 3 – Border
border-color
Sicher ist border-color an sich keine Neuerung, aber die Möglichkeiten, die border-color in CSS 3 bietet sind neu. So kann man z.B. wie im folgenden Beispiel gezeigt einen recht schönen Farbeffekt erzielen.
Wie man im Beispiel sieht gibt es hier einen Farbverlauf, der z.B. für leichte Schatten verwendet werden kann. Hier der Code für das obige Beispiel:
border: 8px solid #000000; -moz-border-bottom-colors: #330000 #550000 #770000 #990000 #BB0000 #CC0000 #EE0000 #FF0000; -moz-border-top-colors: #330000 #550000 #770000 #990000 #BB0000 #CC0000 #EE0000 #FF0000; -moz-border-left-colors: #330000 #550000 #770000 #990000 #BB0000 #CC0000 #EE0000 #FF0000; -moz-border-right-colors: #330000 #550000 #770000 #990000 #BB0000 #CC0000 #EE0000 #FF0000; padding: 10px 10px 10px 25px;
border-radius
Durch border-radius lassen sich einfach abgerundete Ecken erstellen. Webdesigner kennen das, bislang benötigte man immer extra DIVs mit abgerundeten Ecken, die als Images hinterlegt waren. dies war unter Umständen eine Menge Arbeit. Gerade die korrekte Anordnung um andere DIVs und Inhaltselemente.
Dies wird durch border-radius weit vereinfacht, denn man kann direkt die Ecken eines Borders, also eines Rahmens abrunden. Zu beachten ist hierbei natürlich, dass nicht jeder Browser dies unterstützt. Älter Browser geraten bei CSS 3 an ihre Grenzen. Somit wird dann selbstverständlich eine normale Ecke angezeigt und man sollte in evtl. vorhandenen speziellen Stylesheets dann doch wieder auf Images zurückgreifen.
Im Beispiel sieht man (sofern euer Browser dies unterstützt) die abgerundeten Ecken einer Box. Der benötigte Code steht im Beispiel:
border-radius: 15px;
border: 2px solid;
padding: 10px;
In diesem Beispiel ist lediglich ein Wert, also 15px als border-radius gesetzt. Das hat zur Folge, dass der Radius von 15 Pixeln auf alle vier Ecken angewandt wird. Man kann natürlich auch vier Werte setzen, wobei sich der erste Wert auf die linke obere Ecke auswirkt, der zweite auf die rechte obere Ecke, der dritte auf die linke untere und der vierte auf die rechte untere Ecke. So kann man dann Boxen mit nicht symetrisch abgerundeten Ecken erstellen und schöne Effekte auf der Webseite erzielen.
box-shadow
Mit box-shadow gehören lästige Hintergrundbilder, die einen Schatten “simulieren” der Vergangenheit an. Box-shadow ermöglicht es direkt im CSS-Stylesheet einen Schatten für ein Inhaltselement zu setzen. Im folgenden sieht man einige Shadows (werden natürlich auch nur von aktuellen Browsern unterstützt). Der jeweils benötigte Code zur Erstellung dieser Schatten steht in der jeweiligen Box selbst. Wie man sieht ist es möglich verschiedene Farbwerte, sowie den vertikalen und horizontalen Offset zu setzen:
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 5px 5px 10px 10px #888888;
box-shadow: 5px 5px 10px 10px #888888;
-webkit-box-shadow: -8px 8px 0px #888888;
box-shadow: -8px 8px 0px #888888;
-webkit-box-shadow: 10px 10px 25px 5px #888888;
box-shadow: 10px 10px 25px 5px #888888;