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.