t3n News Entwicklung

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

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

Im 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 3.6, 4 und 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.

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

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
Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
3 Antworten
  1. von maik.wendelken am 06.05.2010 (09:01 Uhr)

    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 Teilen
  2. von Sven am 07.05.2010 (06:43 Uhr)

    Igitt, Spam!

    Antworten Teilen
  3. von gradient am 24.05.2010 (22:14 Uhr)

    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 Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS3
Browser-Test: Edge schlägt Chrome, Firefox und Opera bei der Akkulaufzeit
Browser-Test: Edge schlägt Chrome, Firefox und Opera bei der Akkulaufzeit

Microsoft will über einen Test nachgewiesen haben, dass sein Edge-Browser eine deutlich längere Akkulaufzeit am Laptop ermöglicht als die Konkurrenz. Besonders eklatant ist demnach der Unterschied … » weiterlesen

Aus für Plugins in Safari: Jetzt dreht auch Apple Flash ab
Aus für Plugins in Safari: Jetzt dreht auch Apple Flash ab

Beim neuen Betriebssystem macOS Sierra deaktiviert Sierra mehrere Plugins und unterdrückt unter anderem auch Flash-Inhalte. » weiterlesen

Apple bringt Entwickler-Version für den Safari-Browser
Apple bringt Entwickler-Version für den Safari-Browser

Apple hat mit der Safari Technology Preview eine Version seines Browsers speziell für Entwickler vorgestellt. Der Download ist aber für alle Nutzer der aktuellen OS-X-Version möglich. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?