Teilen 2 Twittern 0
von , 05.05.2010

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

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.

css3 farbverlaeufe
Optische Unterschiede bei den verschiedlichen Methoden für Farbverläufe sind kaum ersichtlich

Weitere Artikel zu Tutorials



Empfohlene Produkte

Kommentare: 4 Tweets: 0 Facebook-Likes: 2
05.05.2010

4 Antworten

  1. von maik.wendelken 06.05.2010 (09:01Uhr) 1.

    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

  2. von Sven 07.05.2010 (06:43Uhr) 2.

    Igitt, Spam!

  3. von gradient 24.05.2010 (22:14Uhr) 3.

    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

  4. von Die besten Webdesign-Links vom Mai 2010 01.06.2010 (10:07Uhr) 4.

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

Deine Meinung


(wird nicht veröffentlicht)