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.

…was bisher geschah

Viele Webentwickler setzen allerdings auf die Variante, dass Sie nicht die Text-(Link-)Unterlinie verwenden, sondern ein border-bottom vergeben.

a {
	text-decoration: none;
	border-bottom: 1px solid red;
}

Das hat den Vorteil, dass Zeichenunterlängen nicht durchschnitten werden. Der Border sitzt tiefer, direkt unterm padding bei Blockelementen, unter der line-height-Höhe bei Inline-Elementen. Hier kann man nun auch mit unterschiedlichen Farben variieren, z.B.

a {
	color: #000;
	text-decoration: none;
	border-bottom: 1px solid red;
}

Was allerdings nicht funktioniert, sind Farbverläufe. Man kann lediglich über border-style das Aussehen variieren. Farbverläufe können der Eigenschaft border-color nicht zugewiesen werden.

Generierung von Inhalt über CSS

Man kann sich allerdings mit der Generierung von „Inhalt“ über CSS behelfen. In einigen Tutorials aus dem letzten Jahr haben wir schon mit der Generierung von Inhalten über „content“ gearbeitet. Das machen wir uns auch beim Gradient-Border zu nutze. Wir generieren über ein :after Pseudo-Element leeren Inhalt.

a:after {
	content: '';
	display: block;
	background-color: red
}

Solange wir unseren Inhalt keine Höhe und Breite geben, sehen wir auch keinen Inhalt (hier also keine Hintergrundfarbe).

a:after {
	...
	
	width: 100%;
	height: 1px;
}

Jetzt ist unser 1px großer Inhaltsblock nach dem Link hinzugefügt worden und bewirkt, dass der Text getrennt wird (display: block). Die Linie sitz im Moment auf der gleichen Höhe wie unser 1px Border, da der Beginn von :after gleich border-bottom ist. Um nun den gleichen Effekt wie mit border-bottom nachzustellen, muss man den Block-Formatting-Context verändern, wir fügen Positioning hinzu.

/* Elternelement */
a {
	color: #000;
	text-decoration: none;
	border-bottom: 1px solid red;
	position: relative;
}

Die Anker-Tags werden nun relativ zum Textfluss positioniert, also unverändert. Trotzdem erzeugen wir dadurch für alle Kindelemente (also auch für :before und :after) einen neuen Kontext. Alle Elemente, die nun über position: absolute positioniert werden, orientieren sich am nächsthöheren Elternelement, das relativ positioniert ist. Klingt komisch, ist aber so ;)

a:after {
	...
	
	position: absolute;
	bottom: 0;
	left: 0;
}

Unsere blaue Linie sitz nun am untersten Ende der Inhalts-Box, ist also 1px über border-bottom gerutsch. Somit müsste die generierte Linie noch um -1px nach unten verschoben werden um genau auf der border-bottom zu sitzen. 80% der Arbeit ist getan, jetzt nur noch den Verlauf über linear-gradient hinzufügen und border-bottom im <a> entfernen.

a:after {
	...

	background: -webkit-gradient(linear, left top, right top, from(red), to(blue));
	background: -webkit-linear-gradient(left, red, blue);
	background: -moz-linear-gradient(left, red, blue);
	background: -ms-linear-gradient(left, red, blue);
	background: -o-linear-gradient(left, red, blue);
	background: linear-gradient(to right, red, blue);
}

Ein Problem zeigt sich natürlich mit Inline-Elementen die einen Umbruch haben, hier funktioniert unsere Lösung nicht. Deshalb ist die Technik grundsätzlich nur bei Block-Elementen zu empfehlen. Falls man diese Technik doch auf Inline Elementen (z.B. <a>-Links) anwenden möchte, empfiehlt sich hier die white-space Eigenschaft auf nowrap zu setzen. Falls der Link über eine Zeile gehen würde, würde der „Inline-Block“ komplett auf die neue Zeile rutschen.

Nun kann man natürlich die unzähligen Möglichkeiten von linear-gradient ausspielen, z.B. Stop-Punkte oder mehrere Farbwerte einfügen, sowie mit Höhe und Breite varrieren.

vollständiger Code

a {
    color: #000;
    text-decoration: none;
    /* border-bottom: 1px solid #f00; */
    position: relative;
    white-space: nowrap;
}
a:after {
    content: '';
    display: block;
    background-color: red;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: -1px;
    left: 0;
    
    background: -webkit-gradient(linear, left top, right top, from(blue), to(red));
    background: -webkit-linear-gradient(left, blue, red);
    background: -moz-linear-gradient(left, blue, red);
    background: -ms-linear-gradient(left, blue, red);
    background: -o-linear-gradient(left, blue, red);
    background: linear-gradient(to right, blue, red);
}

JSFiddle-Demo

Browser-Support

Da der Internet Explorer leider in keiner aktuellen Version Hintergrundverläufe unterstützt, kann man die Technik nur in modernen Browsern verwenden. Der IE10 wird linear-gradient über den Prefix -ms- unterstützen, bis dahin zeigt er in den Versionen IE8 und IE9 die Fallbackfarbe an.

Internet Explorer <= Version 7 können keinen Inhalt via content generieren. Für diese Browser müsste man also Hintergrundbilder verwenden, die natürlich nicht flexibel sind, was bedeutet man kann diese Technik ausschließlich auf Blockelemente mit fester Breite anwenden.

Link-Tipps

Ein Beispiel ist die Generierung von geometrischen Formen wie z.B. Dreiecke oder Sterne, siehe Shapes Of CSS

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

CSS3 Adventskalender Gewinnspiel

Wir haben vom Galileo-Verlag einige Bücher für unsere große Weihnachtsverlosung erhalten und zusätzlich ein paar Video-Trainings. In Woche 1 verlosen wir die DVD „CSS in der Praxis“ – Hier ein kleiner Einblick:

Um das Video-Training zu gewinnen gebt einfach ein Kommentar ab. Nutzt Ihr mittlerweile CSS3, habt ihr dieses Jahr Projekte mit CSS3 umgesetzt? Teilnahmeschluß ist der 04.12.2010 um 24 Uhr. Der Rechtsweg ist ausgeschlossen. Die Auslosung erfolgt unter Zuhilfenahme von random.org.

Flattr this!

20 Gedanken zu „Gradient Border – CSS3 Adventskalender Tag 1“

  1. Erst einmal vielen Dank für das erste Türchen. Jeden Tag ein Goodie ist eine gute Sache :-)

    Ich arbeite mich aktuell in CSS 3 weiter ein und will ein Projekt für mobile Geräte damit umsetzen. Dieses Jahr kam es allerdings innerhalb eines Projekts noch nicht zum Einsatz.

    Viele Grüße
    André

  2. Vielen Dank für diesen hervorragenden Tipp! Ich bin zur Zeit dabei, alle meine Webseiten mit CSS3 aufzupolieren. Hier ein um ein halbes Grad gedrehtes DIV, da ein box-shadow und hier und da ein hover-scale für Menüs etc.

    Goodbye flash!

  3. CSS3 ist mittlerweile mein ständiger Begleiter. Man muss ein wenig rücksichtslos gegenüber alten Browsern werden und dann macht es auch richtig Spaß (ohne schlechtes Gewissen ;)

  4. Hi,

    ja so fängt ein Tag gut an ; ) Gleich mal ein gutes Tutorial am Morgen. Also ich setze CSS3 eigentlich schon standardmäßig ein. Vor allem die abgerundeten Ecken sind sehr beliebt bei den Kunden. Und darauf zu verzichten bis sich ein Internet Explorer auf den neusten Stand befindet? Nein, das muss nicht sein ; )
    Freu mich schon auf die nächsten Tage, und hoffe auf mein Glück im Gewinnspiel.

    Viele Grüße @ all

  5. CSS 3 ist eine tolle Sache. Leider sind noch zu viele alte Browser im Umlauf. Dies erschwert die Umsetzung und macht z.Zt. auch für einfache Dinge Javascript noch nicht überflüssig. Dennoch sollte man die Neuerungen einsetzen, auch wenn die browserspezifischen Angaben etwas nervig sind.

  6. Ich setze CSS3 eigentlich schon häufig ein. Jedoch immer so, dass es auch bei älteren Browser gut aussieht, auch wenn runde Ecken usw. fehlen.
    LG
    Michael

  7. Schöner Tipp… ;) Ich persönlich habe dieses Jahr bereits CSS3 eingesetzt, auch wenn es sich Hauptsächlich auf Verläufe, Runde ecken etc. beschränkte… Ein Artikel der mal genauer auf komplexere Selektoren eingeht wäre etwas… ;)

  8. Bei CSS3 bin ich noch etwas zurückhaltend.

    Es ist auch teilweise einfach mühsam drei verschiedene Anweisungen zu schreiben…

  9. CSS3 gehört bei mir neben HTML5 und jQuery (UI, Mobile) zu den guten Vorsätzen für das Jahr 2012.
    Leider hatte ich aus Zeitmangel noch keine Gelegenheit mich näher damit zu beschäftigen, da ich nicht aus der Webentwicklerecke komme, sondern noch Old-School-Desktop-Programmierer bin.
    Aber ich finde den Bereich so spannend, daß ich mir einfach ein Projekt zaubern werde.

  10. Das ist mal ein Adventskalender, mit praktischen Tipps und nicht mit unbrauchbarem vollgemüllt! Ich hoffe, ich werde damit viel lernen können :)

  11. Moin moin,

    also auch von mir erstmal einen herzlichen Dank für die Idee des CSS3-Adventskalenders und auch für das erste Türchen (auch wenn heute schon der 2. ist… *g).

    Bisher war CSS3 noch nicht in meinem Fokus, da ich mich um andere Projekte kümmern musste, aber das neue Jahr wird wird mir Spielraum zum Lesen und Testen geben. Tutorials dieser Art erleichtern einem den Ein- und Umstieg.

    Freue mich schon auf die weiteren Türchen.

  12. Danke für die coole Idee. Wäre selbst wohl nicht darauf gekommen. :)

    Zum Thema:

    Ja, CSS3 wird voll eingesetzt. Ich habe das Glück, dass ich für viele interne Projekte zuständig bin. Dementsprechend kann man davon ausgehen, dass alle mit dem neuesten FF, Chrome oder Safari unterwegs sind. Das macht dann richtig Spaß!

    Aber auch einigen Kunden ist es teilweise echt egal, ob der Verlauf im IE angezeigt wird oder ob die Ecken abgerundet sind. Das ist ein guter Schritt nach vorne!

  13. Auch ich habe schon in mehreren Projekte CSS3 eingesetzt. Teils vereinzelt und dezent aber jetzt auch in einem Aktuellen Projekt (noch in der Entwicklungsphase) ohne Kompromisse. Zum Glück kann man ja vieles mit JS abfangen und wer sagt den eigentlich, das es in allen Browsern gleich aussehen muss? Ich halte das da also auch wie Alex und kann meine Kunden in der Regel auch davon überzeugen. ;)

  14. Hi!

    Coole Sache der Kalender! Vielen Dank für die Mühe!

    Jeden Tag ein wenig mehr Wissen :)

    CSS3 is noch nicht im Einsatz – aber who knows … evtl. bald?!

    Schöne Weihnachtszeit!

  15. Ist zwar nicht aus dem Adventskalender von diesem Jahr :) aber genau das habe ich gesucht! Vielen Dank!

Kommentare sind geschlossen.