Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

CSS-Tricks: Div-Boxen mit runden Ecken (7 Variationen)

Posted by sura1 - 27. September 2008

Bookmark and Share

Runde Boxen mit CSS gestalten

entnommen aus:

http://little-boxes.de/Beispieldateien/Little Boxes Teil 02
http://green-beast.com/experiments/css_smart_corners

Ich möchte Ihnen im Rahmen meiner verschiedenden Artikel über CSS-Tricks und CSS-Experimente einige Beispiele vorstellen, wie Sie Div-Boxen mit runden Ecken einfach und schnell und nur mit CSS und einigen Grafiken (bzw. grafischen Tricks) formatieren können.

Sie können jedes einzelne Beispiel durch Anklicken der Grafik oder des Demo-Buttons ansehen. Daneben haben Sie außerdem die Möglichkeit, die entsprechenden Zip-Files (html-Datei mit CSS, Grafiken / nicht größer als 50KB) herunterzuladen (siehe Zip-Button!).

Beispiel 1:

Vorgegebene Höhe und Breite durch die eingesetze Grafik

Beispiel 2:

Die Box hat eine feste Breite und wächst in der Höhe mit.  Sie können dies ausprobieren, indem sie die Schriftgröße verändern.

Beispiel 3:

Box wächst in der Höhe und in der Breite (Test: Schriftgröße verstellen!)

Beispiel 4:

Diese Box hat eine feste Breite und wächst nur in der Höhe mit (Test: Schriftgröße verändern)

Beispiel 5:

Diese Box ist flexibel, wächst mit und ist (fast) unkaputtbar.

Beispiel 6:

Diese Box wächst nach allen Seiten mit – bedingt durch den Einsatz von 4 PNG-Grafiken.

Beispiel 7 (nur mit Mozilla-Browser!):

Diese Box funktioniert nur im Mozilla Firefox!

Eine Antwort to “CSS-Tricks: Div-Boxen mit runden Ecken (7 Variationen)”

  1. Super Anleitung, super Download-Möglichkeit!
    Genau mein Ding… herzliches Danke!

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: