Farbverlauf mit reiner CSS - Demonstration
09.09.2005 | Webdesign | 10 Kommentare | Print
Man kann mit CSS viel anfangen. Chris Hester zeigt wie man mit purem CSS einen Farbverlauf im Hintergrund der Webseite realisiert. Erstaunlich!
Wer dachte Farbverläufe sind etwas für Hintergrund-Grafiken, der muss umdenken. Chris Hester hat einen Farbverlauf mit purem CSS erstellt. Per Generator kann jeder seinen eigenen Farbverlauf erstellen. Spannend das Ergebnis. Pfiffige Leser unter Euch werden bald für die kniffligen Teile der Lösung Ihre eigenen Ideen entwickelt haben. Danke also Chris für die Idee.
[via: DrWeb Weblog]
PS:
An dieser Stelle möchte ich einmal darauf hinweisen, dass ein Dr-Web-Weblog ohne Kommentare ist wie die Suppe ohnen Salz. Uninteressant! Da das DrWeblog Beiträge zudem auch ohne Verweis auf die Quellen veröffentlicht, lassen ich hier einmal ausdrücklich einen Link weg, nenne aber meine Quelle. Ab und an ist es auch an der Zeit, umzudenken!
War der Artikel für Euch wertvoll? Wollt Ihr Euch den Beitrag als Bookmark merken?
Einfach RSS-Feed abonnieren oder das Lesezeichen mit anderen Menschen teilen:
Kommentare und verweisende Trackbacks
zum Beitrag: Farbverlauf mit reiner CSS - Demonstration
Kommentare
1 | Björn schreibt am 09.09.2005, 19:41:
Schönes Demo. Nur wie ich mir gedacht habe mit 256 Elementen. Das fördert Divitis. Man müsste dann noch Container mit Inhalten drüberlegen. In dieser Form ist es unpraktikabel.
Nichts desto trotz finde ich es gut, dass es immer wieder experimentierfreudige Webdesigner gibt.
2 | Jörg schreibt am 09.09.2005, 19:48:
Erinnert mich stark an Dein Sommerloch, Björn!
Je mehr Effekte, desto mehr Ballast im Code.
Trotzdem interessant, kreativ Grenzen auszuloten.
3 | Dominik schreibt am 09.09.2005, 20:25:
Jetzt bin ich aber enttäuscht! Ich habe irgendeine ausgefuxte Superidee erwartet - und dann sowas: einige hundert DIV-Elemente mit Höhe 1px die alle einzeln gefärbt werden - und die Berechnung der Farben geschieht auch noch durch ein PHP Script. Das ist nun wirklich kein Kunststück und neu ist die Idee sicher auch nicht.
Dann doch lieber eine reine Javascript Lösung - wieso eigentlich nicht? Der kleine Prozentsatz, der kein JS aktiviert hat muss dann halt optisch einen wahrscheinlich kleinen Abstrich machen - ich denke das ist vertretbar im Hinblick auf den Overhead an Quellcode/die Übertragungsmenge (16kb für 255 Farben, ca. 65 Byte pro Farbe - ein PNG benötigt etwa 2Byte pro Farbe [bei einem 1px Breiten Bild]). Ausserdem wird das ganze auch auf Browsern geladen, die keine Bilder darstellen und somit höchstwahrscheinlich mit dem Farbverlauf ebenfalls nichts anfangen können (mobile Devices z.B.) und den Traffic lieber gespart hätten.
Schade, ich hatte mich beim Lesen des Titels in meinem RSS Reader so gefreut :/
4 | Jörg schreibt am 09.09.2005, 20:41:
@Dominic:
Vielleicht ist es einfach eine willkommene Anregung, einmal selbst in der Sache kreativ zu werden und um die Ecke zu denken. Sollte ich den Impuls gesetzt haben, hat sich der Beitrag doch gelohnt, oder?
BTW, wieder mal ein gutes Beispiel, wie man allein durch eine zugkräftige Überschrift die Leute aus dem Feedreader ins Netz bekommt.
Sollte uns das zum Nachdenken bringen?
5 | Christine schreibt am 13.09.2005, 08:42:
Es stimmt, dieser Beitrag kann maximal als Anregung verstanden werden, auch mal etwas neues auszuprobieren. Praktikabel ist diese Lösung sicherlich nicht.
Im Bezug auf das "Dr-Web-Weblog" muss ich dir voll und ganz zustimmen. Früher habe ich diese Seiten gerne besucht, aber seit der Umstellung finde ich es absolut nicht mehr Userfreundlich. Ohne Kommentare lebt ein Weblog einfach nicht! Wer die Konfrontation mit dem User scheut, für den ist ein Weblog sicher das falsche Medium.
6 | Chris schreibt am 30.09.2005, 13:45:
Interessant, aber in der Praxis würde ich das nicht einsetzen. Für soetwas ist CSS nicht gedacht, ein Hintergrundbild ist sinnvoller und zudem ohne Divitis einsetzbar.
Liest Dr. Web hier mit? Externe Links werden zumindest inzwischen verlinkt. ;)
7 | Jörg schreibt am 30.09.2005, 14:31:
Ob DrWeb hier mitliest, kann ich nicht sagen. Links sind nun mal das Salz in der Internet-Suppe. Auch oder gerade wegen der Fachthematik erwarte ich nicht nur ein nettes Design, sondern einfach auch etwas mehr.
Mich interessieren zum Beispiel keine Themen mehr, bei denen ich aus EINEM Browser noch das Letzte oder Neueste rauskizle, solange alle anderen Browser dabei auf der Strecke bleiben. Ein Design sollte heute in den meisten üblichen modernen Browser annähernd gleich aussehen.
Fast jedes Webdesigner-Weblog kommt heute mit einem eigenen Template-Design daher. Man kann sicher übergangsweise ein Template borgen um schnell zu starten, aber sicher nicht für lange.
8 | René schreibt am 27.10.2005, 02:21:
Ich stehe der Idee auch eher kritisch entgegen!
Neben den vielen anderen Vorteilen, sehe ich in CSS eher eine Arbeitserleichterung und eine Reduzierung des Quellcodes. Und das bringt diese Idee nicht wirklich! Warum malen wir nicht gleich Bilder mit CSS? Jedes Pixel bekommt eine Hintergrundfarbe ...
9 | Kevin schreibt am 26.12.2005, 22:03:
Hi,
Der Code ist aber ziemlich undurchsichtig :-/.
Ich bin selber auf die Idee (erst vor ein paar Tagen) gekommen, als Ich eine Grafik mit Hintergrundfarbverlauf mit den GDLiB Funktionen erstellen wollte.
In nem Forum hat mir jemand gezeigt, wie sich der Farbverlauf errechnen lassen könnte.
http://kevin-k.com/php_snippets/?site=div_farbverlauf
Dieser Code ist um einiges kleiner.
Warum sich das so errechnen läßt, weiß Ich bis jetzt nicht, aber hauptsache es tut :=)!
Gruß Kevin
10 | Chris Hester schreibt am 10.06.2010, 01:43:
René schrieb:
"Warum malen wir nicht gleich Bilder mit CSS? Jedes Pixel bekommt eine Hintergrundfarbe ..."
Versuchen Sie:
http://www.designdetector.com/tips/CSSPencils.php
:-)
Trackback-URL: http://www.einfach-persoenlich.de/m33/etb.cgi/305
Einfach persönlich kommentieren:
Kommentare des Beitrages per RSS-Feed verfolgen?
Mit dem RSS-Kommentar-Feed kannst Du die Kommentare dieses Beitrages einfach persönlich verfolgen und im Blick behalten, einfach:
