›› Web, Technologie, Forschung und Entwicklung ‹‹


CSS3 Online-Tools

CSS3
CSS3 Webtools

CSS3 als deklarative Sprache für Stilvorlagen (engl. stylesheets), wird bereits seit dem Jahr 2000 als Nachfolge für CSS Level 2 entwickelt. Obwohl noch nicht durch das W3C standardisiert, werden von modernen Browsern bereits jetzt schon viele CSS3-Module unterstützt. In diesem Artikel werden einmal ein paar nützliche Online-Tools für die Erstellung von CSS3-Markup vorgestellt.

Anzeige

Nicht nur im Sinne des Layouting-Mottos "graceful degradation und progressive enhancement" macht es Sinn auf CSS3-Module zu setzen, auch im Hinblick auf mobile Anzeigegeräte wie Smart- Phones und Tablets ist CSS3 bereits jetzt inoffizieller Standard.

Was früher aufwändig mit Grafiken und endlosen DIV-Verschachtelungen realisiert wurde (Stichwort: abgerundete Ecken) lässt sich heute mit ein paar Zeilen CSS-Markups umsetzen.
Die Einsparung an Bandbreite/Ladezeiten ist über eine gesamte Website enorm. Schließlich erübrigt sich das Laden von zusätzlichen Grafiken und damit außerdem auch die Anzahl an HTTP-Requests.

Im folgenden möchte ich ein paar Online-Tools und -Generatoren für "Border-Radius" und "Hintergrund-Gradienten" vorstellen, die bei der Erstellung der CSS-Auszeichnungen äußerst hilfreich sind.

CSS3 - Border Radius

CSS-Gradienten

CSS-Linktipps

 

 

CSS3 - Border Radius

Abgerundete Ecken werden nach derzeitigen Design-Trends wieder etwas dezenter eingesetzt. Dennoch erzielt man auch mit einer nur geringen Abrundung von Buttons oder Boxen um wenige Pixel einen edlen bzw. plastischen Effekt.

Für abgerundete Ecken wurde in CSS3 die Eigenschaft "border-radius" implementiert, die in der folgenden Form angegeben werden kann:

 

    div#myDiv { border-radius: 3px; }

 

icon_ie icon_firefox icon_opera icon_chrome icon_safari

Unterstütz wird diese Eigenschaft von den Browsern IE9+, Firefox 4+, Chrome, Safari 5+, und Opera.

Für ältere Mozilla- und Webkit-basierte Browser kann man zusätzlich die browsereigenen Spezifikationen einfügen.

 

    div#myDiv { -webkit-border-radius: 3px; /* für ältere Webkit Browser */
    -moz-border-radius: 3px; /* für Mozilla Firefox < Version 4 */ border-radius:
    3px; /* W3C Spezifikation */ }

 

Wer sich das Tippen sparen möchte, kann bei Verwendung von Pixeln das folgende Tool von Jacob Bijani verwenden:

Dies kann besonders hilfreich sein, wenn man unterschiedliche Radien für die vier Ecken verwenden möchte.
In diesem Fall könnte der Code wie folgt aussehen:

 

    div#myDiv { -webkit-border-radius: 24px; -webkit-border-bottom-right-radius:
    6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius: 24px;
    -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px;
    border-radius: 24px; border-bottom-right-radius: 6px; border-bottom-left-radius:
    6px; }

 

Das obige Beispiel angewendet auf ein Blockelement sieht z.B. wie folgt aus:

Ein Div mit abgerundeten Ecken

 

Eigenschaften zusammenfassen

Die Eigenschaft Border-Radius kann, wie oben, nur einen Wert oder aber mehrere Werte haben und somit Eigenschaften für die vier Ecken zusammenfassen. Dies geschieht nach dem folgenden Muster:

  • 1 Wert: Alle vier Ecken erhalten dieselbe Rundung
  • 2 Werte: Der erste Wert entspricht "top-left" und "bottom-right", der zweite Wert entspricht "top-right" und "bottom-left"
  • 3 Werte: Der erste Wert bezieht sich auf "top-left", der zweite auf "bottom-left" und "top-right", der dritte Wert auf "bottom-right"
  • 4 Werte: Die Werte beziehen sich auf die vier Ecken im Uhrzeigersinn; angefangen oben links ("top-left", "top-right", "bottom-right", "bottom-left")

 

Ungleiche Radien

Bei den obigen Beispielen wird für jede Ecke eine Abrundung mit konstantem Radius generiert. Man kann für eine Ecke aber auch unterschiedliche Werte für die horizontale und vertikale Richtung angeben. In diesem Fall wächst (oder verkleinert sich) der Radius über den Eckenverlauf.

 

    div#myDiv { border-radius: 18px / 36px; }

 

Das obige Beispiel angewendet auf ein Blockelement sieht z.B. wie folgt aus:

Abgerundete Ecken mit unterschiedlichen horizontalen und vertikalen Radien

 

Weitere Beispiele und Erläuterungen findet Ihr unter:
http://www.css3.info/preview/rounded-border/

 

Einen weiteren Generator für die Border-Radius-Eigenschaft gibt es bei css3generator.com. Bei diesem Tool werden ältere Mozilla-Browser bereits nicht mehr berücksichtigt, sodass lediglich die W3C-Spezifikation und jene für ältere Webkit-basierte Browser zurückgegeben wird.

 

 

CSS-Gradienten

Farbverläufe wie man sie z.B. von Buttons kennt müssen dank CSS3 ebenfalls nicht mehr über Grafiken realisiert werden. Vielmehr kann man nahezu beliebige (lineare) Gradienten über die "background"- bzw. "background-image"-Eigenschaft und den Wert "linear-gradient" definieren.

 

    div#myDiv { background: linear-gradient(to bottom, #ffaf4b 0%,#ff920a
    100%); /* W3C-Spezifikation */ }

 

icon_ie.gif icon_firefox icon_opera icon_chrome icon_safari

Unterstütz (werden) wird diese Eigenschaft von den Browsern IE10+, Firefox 16+, Chrome 26+, Safari 7+, und Opera 12.1+.

Für ältere Mozilla-, Opera und Webkit-basierte Browser kann man zusätzlich die browsereigenen Spezifikationen einfügen.
Für den Internet Explorer (Versionen 6-9) gibt es die Möglichkeit die "filter"-Eigenschaft zu nutzen. Allerdings sollte zumindest für den IE9 eine andere Variante für Gradienten verwendet werden, da es sonst zu Problemen bei der Darstellung in Verbindung mit der "border-radius"-Eigenschaft kommt. Erläuterungen hierzu folgen weiter unten.

 

    div#myDiv { background: #ffaf4b; /* Alte Browser */ background: -moz-linear-gradient(top,
    #ffaf4b 0%, #ff920a 100%); /* FF3.6+ */ background: -webkit-gradient(linear,
    left top, left bottom, color-stop(0%,#ffaf4b), color-stop(100%,#ff920a));
    /* Chrome, Safari4+ */ background: -webkit-linear-gradient(top, #ffaf4b
    0%,#ff920a 100%); /* Chrome10+, Safari5.1+ */ background: -o-linear-gradient(top,
    #ffaf4b 0%,#ff920a 100%); /* Opera 11.1+ */ background: -ms-linear-gradient(top,
    #ffaf4b 0%,#ff920a 100%); /* IE10+ */ background: linear-gradient(to bottom,
    #ffaf4b 0%,#ff920a 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffaf4b',
    endColorstr='#ff920a',GradientType=0 ); /* IE6-9 */ }

 Das obige Beispiel sieht wie folgt aus:

Ein Div mit dezentem Farbverlauf von oben (hell, #ffaf4b) nach unten (dunkler, #ff920a)

 

Online Gradient Generator

Gerade bei diesen Gradienten-Markups mit den vielen Browser-eigenen Definitionen empfiehlt sich natürlich die Verwendung eines Online-Generators.

 

Bei diesem Online-Tool lassen sich die meisten Parameter komfortabel einstellen. So z.B. auch die Ausgabe der Farbcodes (Hex, RGB, HSL) sowie Alpha-Transparenzen. Auf diese Weise lassen sich mehrfarbige und mehrstufige Gradienten mit unterschiedlicher Richtung erzeugen.

Sehr gut funktioniert auch das auslesen von Gradienten aus Bilddateien. Einfach die Bilddatei mit einem Gradienten (z.B. einen Button) hochladen und schon wird dar passende CSS-Code erstellt.

Für den Internet Explorer 9 kann man sich zusätzlich eine Gradienten-Definition per SVG ausgeben lassen.

 

    div#myDiv { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI
    /* IE9 SVG */ }

 

Zu beachten ist hierbei, dass für betroffene Elemente die "filter"-Eigenschaft auf "none" gesetzt werden muss (filter:none!important;)

 

Wenn man bei älteren Projekten z.B. nur die Gradienten mittels "linear-gradient" erstellt hat, kann man sich hierfür auch im Nachhinein die Daten als SVG für den IE9 holen.

 

 

Linktipps - CSS-Online-Tools - zusammengefasst

Toolseiten, die ich im Zusammenhang mit CSS3 häufig aufsuche:

Border-Radius

 

CSS-Gradienten