CSS3 Gradients: Verläufe ohne Grafiken

Auch einfache und sogar aufwändigere Verläufe (Gradients) sind für CSS3 kein Problem mehr. Der neue Standard kennt Verläufe linear, radial, diagonal, zweifarbig, mehrfarbig und mit Transparenz. Hier kommt lediglich der Browser zum Tragen: Manche sehr alte Browser unterstützen noch keine Verläufe. Andere bieten hingegen Support für zweifarbige, lineare Verläufe und wieder andere beherrschen die gesamte Palette (zum Beispiel moderne Versionen von Safari, Firefox, Chrome). Da die CSS Befehle für Verläufe „per Hand“ sehr aufwändig zu definieren sind, gibt es hier ein tolles Tool, um CSS3 Verläufe zu erstellen. Der Vorteil des Tools: Es werden  – soweit möglich – auch Fallbacks für ältere Browser mitgegeben.

Beispiele

.element {
    background: rgb(246,248,249);
    background: -moz-linear-gradient(45deg,  rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
    background: -webkit-linear-gradient(45deg,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
    background: -o-linear-gradient(45deg,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
    background: -ms-linear-gradient(45deg,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
    background: linear-gradient(45deg,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=1 );
}
.element {
    background: rgb(230,240,163);
    background: -moz-linear-gradient(top,  rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,240,163,1)), color-stop(50%,rgba(210,230,56,1)), color-stop(51%,rgba(195,216,37,1)), color-stop(100%,rgba(219,240,67,1)));
    background: -webkit-linear-gradient(top,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%);
    background: -o-linear-gradient(top,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%);
    background: -ms-linear-gradient(top,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%);
    background: linear-gradient(to bottom,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 );
}

Bewerte diese Seite

 
 
 
 
 
 
 
Bewerten
 
 
 
 
 
 
4 Bewertungen
90 %
1
5
4.5
 

Veröffentlicht von

Kevin Lieser

Kevin Lieser

Kevin Lieser ist ausgebildeter Mediendesigner und seit 2008 mit der TYPO3 Agentur KA Mediendesign unternehmerisch tätig. Seine Leidenschaften sind gutes Webdesign und die PHP Programmierung. Als App Entwickler und Autor mehrerer TYPO3 Extensions engagiert er sich aktiv für die Weiterentwicklung von Webapplikationen und mobilen Anwendungen.