Runde Boxen: Spielerein mit CSS3

Mit runden Ecken reißt man heut niemand mehr vom Hocker.
Doch leider gab es lange Zeit kein richtiges Heilmittel was überall läuft. Mozilla und IE und co.,jeder hat sein eigenes Süppchen gekocht.

-moz-border-radiusfür Firefox,
-webkit-border-radius“ für Safari und Chrome,
-khtml-border-radius“ für Konqueror

Aber jetzt ist die Lösung da. Seit dem Jahr 2000 ist die dritte Version von CSS da. Darin ein ganz besonderer Befehl:

border-radius

Die Werte dazu kann man in px, pt aber auch als em und % angeben. Entweder alt bekannt in der typischen vierer Kombination
oder einzeln per „border-top-right-radius„, „border-bottom-right-radius„, „border-bottom-left-radius“.

/* border: 1px solid #ff0000;border-top-left-radius: 25px;border-top-right-radius: 25px;border-bottom-right-radius: 25px;border-bottom-left-radius: 25px; */

 

/* border: 1px solid #ff0000;border-top-right-radius: 25px;border-bottom-left-radius: 25px; */

 

 

/* border: 1px solid #ff0000;border-top-left-radius: 25px;border-top-right-radius: 25px; */

 

/* border: 1px solid #ff0000;border-radius: 25px 25px 25px 25px; */

Schatten ist dabei auch kein Problem. Der sogenannte Schlagschatten hat ebenfalls einen eigenen Befehl bekommen.
Unabhängig davon ob die Box rund oder normale 90° Winkel hat:

Demo:

/* border: 1px solid #ff0000;border-top-left-radius: 25px;border-top-right-radius: 25px;border-bottom-right-radius: 25px;border-bottom-left-radius: 25px;box-shadow: 10px 10px 5px #cefa42; */

 

 

/* border: 1px solid #ff0000;box-shadow: 10px 10px 5px #cefa42; */

Eine weitere Lustige Spielerei ist das nächste Beispiel. Der Schlagschatten passt sich da der Boxform direkt an.

Demo:

/* border: 2px solid #ff0000;border-radius: 150px 300px 105px 200px / 100px 50px 100px 50px; box-shadow: 8px 15px 20px #cefa42; */

Der Fantasie sind da keine grenzen Gesetzt.
Viel Spaß…
Toby

Kommentar verfassen