CSS-Transitions Teil 2: Anwendungsbeispiele OHNE JavaScript

Wie immer: Alle Beispiele sind eigenständige HTML-Dateien, die den gesamten HTML- & CSS- (und evtl. JavaScript-) Code enthalten. Einfach herunterladen und experimentieren / optimieren 🙂

… ohne JavaScript:

Ein erstes Beispiel ist das – auch auf dieser Webseite zur Anwendung kommende – animierte Sucheingabefeld. Dafür wird der Pseudoklasse :focus (welche ja vergeben wird, sobald der Cursor – bei Touch Devices: Finger – im Suchfeld landet) eine andere Definition (hier: Breite und Rahmenfarbe) mitgegeben als dem „unfocused“ Suchfeld und diesem außerdem eine CSS-Transition mitgegeben.

Außerdem werden hier dem ersten Folgeelement (Adjacent sibling combinator: + ) .search-field:focus + .search-submit – also dem „Suchen-Button“ – und einem weiteren Folgeelement (General Sibling Combinator: ~ ) .search-field:focus ~ .searchtipps – also den Suchtipps – ebenfalls für den Fall der „Suchfeld-Fokussierung“ über CSS-Transitions animierte Style-Definitionen mitgegeben.

Das Beispiel der verzögerten Einbeldung der Suchtipps zeigt die Macht der CSS-Eigenschaft transition-delay:

>> Animierte Sucheingabe


Im zweiten Beispiel geht es um übereinander positionierte und via Pseudoklasse :hover auszublendende Elemente. Das erste Anwendungsszenario des „Bilderrätsels“ ist übrigens von Stephan Hellers lesenswertem Artikel auf webkrauts.de inspiriert.

Der zweite Beispielteil ist ein via :hover entfernter CSS-Weichzeinungsfilter. Mehr zu CSS-Filtern im Beitrag CSS: Filter-Effekte.

Ohne JavaScript ist dieses Beispiel nicht „Touchscreen-tauglich“, da es die :hover-Klasse natürlich nicht gibt. Für einen JavaScript-Workaround zur Vergabe einer „Ersatzklasse“ finden Sie evtl. eine Anregung im Beitrag :hover-Effekte für Touchscreens.

>> Overlay- und Filter-Beispiele


Drittes Beispiel: HTML5-basierte Formularvalidierung. Die mit HTML5 eingeführten Pseudoklassen :valid und :invalid kann man sich ebenfalls für CSS-Transitions zunutze machen. Dabei wird der Feldinhalt automatisch oder nach angegebenen pattern (mit Regulären Ausdrücken) tlw. in Abhängigkeit von der type-Angabe des jeweiligen input-Elements überprüft – ganz ohne JavaScript:

>> Formularvalidierung


Und als letztes JavaScript-freies Beispiel noch ein paar Spielereien mit dem Button-Design. Dabei mache ich mir vor allem die CSS-Eigenschaften text-shadow und box-shadow zunutze, um einen räumlichen Effekt zu erzielen. Wer’s mag:

>> Button-Design

 

Zum ersten Teil der Serie gehts hier:

CSS-Transitions Teil 1: Überblick

… und zum nächsten hier:

CSS-Transitions Teil 3: Anwendungen MIT JavaScript

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.