Alle Beiträge mit dem Schlagwort „JavaScript”

Seiten: 1 2 3 4 5 6 ... 12 13

16. Mai 2010 von Dieter | 1 Kommentar

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:

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: , , , , , , , ,

Kommantare verfolgen | Trackback URL

einen Kommentar schreiben

0 Kommentare und 1 Trackback/Pingback

  1. 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 [...]

Kommentar schreiben (Datenschutzerklärung)

Kommentarformular





Erstkommentare und Kommentare mit Links werden moderiert.

Übersicht der Tastaturkürzel für Smilies

Abonnieren ohne einen Kommentar abzugeben

Seiten: 1 2 3 4 5 6 ... 12 13