16. Mai 2010 von Dieter | 1 Kommentar | drucken
Fließende Farbübergänge mit CSS3
Früher wurden für zeitliche Verzögerungen beim Erscheinen von Farben JavaScript eingesetzt (siehe hierzu beispielsweise die mit dem Internet Explorer (IE) von Blau zu Rot werdenden glühenden Links auf meiner privaten Website www.dieter-welzel.de“).
Heutzutage können moderne Browser so etwas mit Hilfe der CSS3-Eigenschaft Transition darstellen.
Hierauf bin ich über den Artikel “Sexy Interactions with CSS Transitions” auf carsonified.com gestoßen (CSS-Datei für die Beispiele). Dort werden vier verschiedene Beispiele vorgeführt. Hier auf der Website Webseiten-Infos.de habe ich gleich mal die Beispiele 1 und 3 eingebaut.
Moderner Browser heißt in diesem Fall:
- Safari Version 3.1.2 oder höher
- Google Chrome
- Opera Version 10.5 oder höher
- Firefox 3.7 alpha oder höher (also aktuell leider noch keine finale Version)
Beispiel 1 (Wechsel der Hintergrundfarbe) habe ich bei mir nicht mit Zitat-Boxen, sondern Eingabefeldern, sprich den Formularfeldern input[type=text] und textarea des Kontaktformulars sowie des Kommentarformulars realisiert. Der CSS-Code dafür in meiner CSS-Datei sieht auszugsweise wie folgt aus:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | input[type=text], textarea { border: 1px solid #0C5005; background: #FFF; padding: 3px; color: #111; transition: all .3s linear; -o-transition: all .3s linear; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; } input[type=text]:focus, textarea:focus, input[type=text]:hover, textarea:hover { background: #F5F0E6; color: #111; } |
Dem aufmerksamen Beobachter wird auffallen, dass auch der in meinem Blogbeitrag “Aktive Eingabefelder visuell hervorheben” beschriebene breitere Rand von dem fließenden Übergang betroffen ist. Ein netter Nebeneffekt.
Beim Beispiel 3 (Wechsel der Vorder- und Hintergrundfarbe bei Links) habe ich den CSS-Code mit dem Präfix -o für den Opera herausgenommen. Grund: Der Farbwechsel von weiß nach grün sah dort unschön aus, weil dazwischen kurz rot aufflackerte. Zudem sprang dann die horizontale Navigation, wenn die Maus darüber war (Hover-Effekt). Der CSS-Code dafür sieht in meiner CSS-Datei auszugsweise wie folgt aus:
1 2 3 4 5 6 7 8 9 10 11 12 | a { color: #390; text-decoration: none; transition-duration: .3s; -moz-transition-duration: .3s; -webkit-transition-duration: .3s; } a:focus, a:hover, a:active { text-decoration: none; color: #FFF; background-color: #2F6325; } |
Richtig interessant wird diese CSS-Eigenschaft Transition, wenn sie auch von der finalen Version des Firefox und dem Internet Explorer (IE) unterstützt wird und die Unterstützung vom Opera auch bei transition-duration ohne Aufflackern funktioniert.
CSS3 ist die Zukunft.
Wie findest Du diese Spielerei?
Völlig überflüssig oder wie ich als Start in eine einfachere Zukunft für die Gestaltung von Webseiten?
Infos
Webseite veröffentlicht am Sonntag, den 16. Mai 2010, um 23:15 Uhr, zuletzt geändert am Montag, den 6. Juni 2011, um 20:59 Uhr.
Kategorie: Webdesign
Schlagworte: Browser, CSS3, Hintergrundfarbe, JavaScript, moderne Browser, transition, Webdesign, Webseite, Website
Statistik: 259 Blogbeiträge, 682 Schlagworte, 1.557 Kommentare, 112 Feedleser
1. Tweets die Fließende Farbübergänge mit CSS3 | Webseiten-Infos.de erwähnt -- Topsy.com
Pingback vom 16. Mai 2010 um 23:28
[...] Dieser Eintrag wurde auf Twitter von Dieter Welzel erwähnt. Dieter Welzel sagte: Fließende Farbübergänge mit CSS3 http://tinyurl.com/365ua4e [...]