Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

CSS3-Howto: Farbverläufe ohne Bilder, nur mit CSS3? So funktioniert’s!

    CSS3-Howto: Farbverläufe ohne Bilder, nur mit CSS3? So funktioniert's!
© kaipity - Fotolia.com

Im Blog der Marit AG zeigt Sven Wolfermann sehr anschaulich, wie man zukünftig mit CSS3 Teaserboxen mit Farbverläufen erstellt, die ganz ohne Bilder auskommen. „Zukünftig“ insofern, weil derzeit allein Firefox 3.6, Safari 4 und Chrome 4 damit entsprechend zurechtkommen. Der Vorteil der CSS3-Methode: Im Vergleich zur Variante mit zwei Bildern (Top/Bottom-Bereich) spart man sich rund 2 KByte Daten ein und benötigt auch zwei HTTP-Requests weniger.

Genutzt wird dafür die neue CSS3-Eigenschaft „linear-gradient“. In dem Tutorial ist nachzulesen, was damit möglich ist, welche Unterschiede bei der Implementierung für Gecko (Firefox) und WebKit (Safari, Chrome) zu beachten sind und welche weiteren Alternativen es aktuell bereits gibt.

Optische Unterschiede bei den verschiedlichen Methoden für Farbverläufe sind kaum ersichtlich
3 Reaktionen
gradient

Ich find den Ansatz von CSS3 toll, die Dinge, die momentan im Web gemacht werden, aber nur durch Hacks möglich sind, tatsächlich in die Sprache einzubauen. Und dadurch dass CSS3 Farbverläufe natürlich auch eine geringere Speichergröße haben als Bilder ist das dem Mobilen Web auch sehr förderlich

Antworten
Sven
Sven

Igitt, Spam!

Antworten
maik.wendelken
maik.wendelken

Liebe Redaktion,

der Link hinter dem Image funktioniert nicht.
http://t3n.de/news/wp-content/uploads/2010/05/CSS3_Farbverläufe.jpg

Habt Ihr einen neuen Praktikanten, der noch nicht weiß das man in URL's keine Umlaute schreibt? :-)

Schönen Tag wünsch ich euch
Beste Grüße
Maik

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen