Schlagwort: verlauf

Gradient Border – CSS3 Adventskalender Tag 1

Tag 1 im CSS3 Advancedkalender und wir gehen gleich ins Eingemachte! ;)

In der CSS Text Level 3 Spezifikation gibt es seit einiger Zeit die Eigenschaft text-decoration-color mit der man die Text-(Link-)Unterlinie andersfarbig gestalten kann. Bisher wird diese Eigenschaft laut MDN nur vom Firefox ab der Version 6 mit dem Prefix -moz- unterstützt. Zukünftig soll es ähnlich wie auch für border oder outline möglich sein für text-decoration Shorthand-Values wie folgt anzugeben:
text-decoration: <text-decoration-line> || <text-decoration-color> || <text-decoration-style> || blink
 anzugeben. Das ist ein Vorteil, wenn weitere Browser das unterstützen. Auf perun.net gibt es bereits einen umfassenden Artikel über CSS3 text-decoration.
Gradient Border – CSS3 Adventskalender Tag 1 weiterlesen

Internet Explorer 10 mit CSS3 linear-gradient Support

Microsoft ist aufgewacht und arbeitet kontinuierlich an der Weiterentwicklung des Internet Explorer. Gestern stellten Sie auf der MIX11 Konferenz in Las Vegas die neue Preview des IE10 vor. Umfangreiche Neuerungen sind bereits integriert.
Internet Explorer 10 mit CSS3 linear-gradient Support weiterlesen

IE9 mit CSS3 border-radius und linear-gradient Problemen

Nach Einführung des IE9 ist es nicht nur Fritz Weisshart aufgefallen, dass der IE9 zwar die propritären CSS-Eigenschaft „filter“ zum Erstellen von Verläufen, wie im IE6-8 zwar weiterhin unterstützt, aber diese nicht so funktionieren wie erhofft.
IE9 mit CSS3 border-radius und linear-gradient Problemen weiterlesen

WebKit ändert CSS3 Gradient Support und orientiert sich am Mozilla Syntax

Letzte Woche änderte das Webkit-Team die Syntax für CSS3 linear-gradient und radial-gradient und orientiert sich jetzt an der vom W3C favourisierten Syntax von Mozilla. Die Integration ist bereits in die Nightly Builds eingeflossen und wird sicherlich demnächst auch in die Webkit-basierenden Browser, wie Chrome oder Safari integriert.

Bisher hatte man recht viel Schreibarbeit, wenn man CSS3 Verläufe browserübergreifend einsetzen wollte. Im CSS3 Adventskalender Tag3 kann man die derzeitige Anweisungen cross-browser-fähig nachlesen. Zukünftig wird Webkit als Übergang auch weiterhin die bestehende Syntax unterstützen.

Man kann also die Eigenschaften für CSS3 Gradient wie folgt angeben:

.linear-top {
/* Für WebKit alt (Safari, Chrome, etc.) */
background: -webkit-gradient(linear, left top, left bottom, ⏎
from(#c8482c), to(#fff));

/* NEU NEU NEU - WebKit (Safari, Chrome, etc.) */
background: -webkit-linear-gradient(top, #c8482c, #fff);

/* Für Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #c8482c, #fff);

/* aktueller W3C working draft */
background: linear-gradient(top, #c8482c, #fff);
}

Ein richtiger Schritt und auch ein Ereignis, bei dem man sieht, dass CSS3 noch in der Entwicklung ist. Trotzdem empfehle ich heute schon CSS3 einzusetzen, wo es geht.

Fun with Border-Radius – CSS Sprechblasen – CSS3 Adventskalender Tag 23

Am vorletztem Tag des CSS3 Adventskalender will ich nochmal ein paar interessante Einsatzmöglichkeiten von border-radius zeigen. Nicht zuletzt auch durch das Gewinnspiel „Gewinne ein Jahres-Abo des Webstandards Magazin“ hat sich border-radius als das CSS3-Feature herauskristalisiert, auch die Zugriffszahlen zeigen das.

Fun with Border-Radius – CSS Sprechblasen – CSS3 Adventskalender Tag 23 weiterlesen

Teaserboxen komplett ohne Bilder – CSS3 Adventskalender Tag 9

Heute im CSS3 Adventskalender mal ein Tutorial „revised“. Bereits im Mai 2010 habe ich zu linear-gradient den Artikel „Teaserboxen mit Verlauf ohne Bilder (CSS3 linear-gradient)“ geschrieben und gezeigt, welche Möglichkeiten uns CSS3 heute schon bietet. Dabei habe ich versucht eine Designvorgabe komplett mit CSS3 umzusetzen und bin zu einem akzeptablen Ergebnis gekommen. So konnte ich den Einsatz von 2 Grafiken / 2 http-Requests mit insgesamt 2kb auf 1 Grafik / 1 Request mit 0,2kb reduzieren und habe gleichzeitig auch das Ergebnis gänzlich ohne Bilder gezeigt. Leider musste ich dabei auf eine grafische Feinheit verzichten (das kleine Pfeilsymbol/Dreieck)

Das zum Anlass genommen, habe ich das Tutorial jetzt erweitert und die Vorlage aus Photoshop 1:1 in CSS3 erstellt.
Teaserboxen komplett ohne Bilder – CSS3 Adventskalender Tag 9 weiterlesen

linear-gradient (Verlauf) – CSS3 Adventskalender Tag 3

Einen einfachen Farbverlauf für Hintergünde in CSS3 zu erstellen bedarf schon etwas Schreibarbeit… Als Webkit 2008 begann die Eigenschaft umzusetzen, orientierten sie sich an der Spezifikation für Canvas. Mozilla entwarf daraufhin einen einfacheren Syntax und dieser Syntax ist derzeit auch der empfohlene des W3C. Bisher ist der Syntax nicht angeglichen.

Als Farbwerte können definierte Farbnamen, Hexadezimalwerte, RGB und HSL, oder RGBa und HSLa verwendet werden (aber was das alles bedeutet, zeigen wir in einem anderen Adventskalender Türchen). Jetzt erstmal ein Code-Beispiel:

linear-gradient (Verlauf) – CSS3 Adventskalender Tag 3 weiterlesen