Mit CSS3 abgerundete Ecken und Schlagschatten erstellen

Dank CSS3 öffnen sich dem Webdesigner viele neue Möglichkeiten Elemente visuell hervorzuheben.

In diesem kleinen Tutorial möchte ich Euch die entsprechenden Eigenschaften ein wenig näher bringen.

Die Angaben für die Schlagschatten beziehen sich auf Offset-X, Offset-Y , Blur und Color.

Abgerundeteten Ecken mit gleichem Radius

Das erste Beispiel zeigt eine Standardbox mit vier gleichen Radien und Schlagschatten. Die Angabe -moz-border-radius benötigt Firefox ab Version 4 nicht mehr! Der Schlagschatten ist um 12px nach rechts und 5px nach unten versetzt. Er besitzt außerdem eine Weichzeichnung von 8px und hat die Farbe #888.

margin-left:20px;
padding:25px;
width:350px;
height:200px;
border: 3px solid #5b7ea1;

border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;

box-shadow: 12px 5px 8px #888;
-webkit-box-shadow: 12px 5px 8px #888;
-moz-box-shadow: 12px 5px 8px #888;

Abgerundetete Ecken mit Angabe verschiedener Radien

Im zweiten Beispiel habe ich die einzelnen Ecken separat angesprochen. Die Zuordnung der Werte für die verschiedenen Radien geschieht dabei im Uhrzeigersinn. Der Schlagschatten wurde durch den negativen Wert -10px (Offset-X) nach links geschoben.

margin-left:20px;
padding:25px;
width:350px;
height:200px;
border: 3px solid #5b7ea1;

border-radius: 5px 40px 0px 20px;
-webkit-border-radius: 5px 40px 0px 20px;
-moz-border-radius: 5px 40px 0px 20px;

box-shadow: -10px 10px 15px #888;
-webkit-box-shadow: -10px 10px 15px #888;
-moz-box-shadow: -10px 10px 15px #888;

Angabe verschiedener Radien für einzelne Ecken

Dieses Beispiel zeigt wie man die einzelnen Radien einer bestimmten Ecke ansprechen kann. Der Schlagschatten wurde hier mit dem negativen Wert -8px nach oben geschoben.

margin-left:20px;
padding:25px;
width:400px;
height:280px;
border: 3px solid #5b7ea1;

border-top-left-radius: 120px 50px;
border-bottom-right-radius: 50px 120px;

-webkit-border-top-left-radius: 120px 50px;
-webkit-border-bottom-right-radius: 50px 120px;

-moz-border-radius-topleft: 120px 50px;
-moz-border-radius-bottomright: 50px 120px;

box-shadow: 10px -8px 10px #888;
-webkit-box-shadow: 10px -8px 10px #888;
-moz-box-shadow: 10px -8px 10px #888;