b.olzplatz für e.learning, me.diensachen und o.nlinekram

CSS-Transitions (2) … ohne JavaScript

Ein erstes "reines CSS"-Beispiel - eine nette Spielerei:

Dieses Anwendungsbeispiel verwendet unprefixed transitions. Funktioniert nicht in Internet Explorer 9 (oder älter) und nicht in Oprea mini. Vgl. https://caniuse.com/#search=transitions


Hier verwende ich übrigens eine unsichtbare Checkbox, die mit dem (als Button gestylte) Klick /Tap auf das Label de-/aktiviert wird. Die Pseudoklasse :checked dient dazu, um das Folgeelement ~ #carway .car zu animieren. Hier die Codes:

HTML

<div id="carwrapper">
  <input id="activatecar" type="checkbox">
  <label for="activatecar">Los / Zurück</label>
  <div id="carway">
    <img class="car" src="car.png">
  </div>
</div>

CSS

#carwrapper {overflow-y: hidden;}

#carwrapper label { /* Button Style */ }
#carwrapper label:hover { /* Button-Hover Style */ cursor:pointer;}

/* Checkbox unsichtbar machen */
#activatecar {display:none;}

/* Straße */
#carway {
  margin-top: 50px;
  width: 100%;
  height: 20px;
  background: lightgrey;
  border-top: 5px dashed #fff;
}
#carway::before {
  content: "";
  height: 20px;
  width: 100%;
  background: lightgrey;
  display: block;
  top: -25px;
  position: relative;
}

/* Auto Startposition */
.car {left:-50px, transition:all 0.5s ease;}

/* Auto Endposition */
#activatecar:checked ~ #carway .car {
  left: 70%;
}

... und hier der Download als Gesamtkunstwerk: Autofahren - die Datei 'car.png' ist in der HTML-Datei hart verlinkt, für den lokalen Offline-Einsatz aber notwendig. Daher hier herunterladbar.


Vielleicht sinnvolleres Beispiel: Ein 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 auch hier (via Adjacent / General Sibling Combinator: + bzw. ~) Folge-Elemente manipuliert: Dem ersten Folgeelement .search-field:focus + .search-submit - also dem "Suchen-Button" - und einem weiteren Folgeelement  .search-field:focus ~ .searchtipps - also den Suchtipps - werden 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:

Beispiel / Download: Animiertes Suchformular


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 ("Cheat-Hover") 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 Touch-Devices.

Beispiel / Download ("Desktop only"): Overlay- und Filter-Beispiele


Drittes Beispiel: Eingabe-Formular mit HTML5-basierter animierter Formularvalidierung. Die mit HTML5 eingeführten Pseudoklassen :valid und :invalid kann man sich nämlich 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:

Beispiel / Download: Formularvalidierung


Und als letztes JavaScript-freies Beispiel noch ein paar Spielereien mit dem Button-Design.

Da hier :hover und :active genutzt werden, ist diese javascript-freie Umsetzung ebenfalls nicht Touchscreen-tauglich. 🙁

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:

Beispiel / Download ("Desktop only"): 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.

Zustimmung zur Datenverarbeitung

Einstellungen zu Cookies

Bitte treffe eine Auswahl. Weitere Informationen zu den Auswirkungen Deiner Auswahl findest Du unter Hilfe, in der Datenschutzerklärung und im Impressum.

Treffe bitte eine Auswahl um fortzufahren.

Deine Auswahl wurde gespeichert!

Weitere Informationen

Erläuterung

Um fortfahren zu können, musst Du eine Cookie-Auswahl treffen. Bitte wähle zwischen

  • Alle Cookies zulassen:
    Alle Cookies dieser Seite ("First-Party-Cookies") sowie z.B. Tracking- und Analyse-Cookies, auch von Drittanbietern ("Third-Party-Cookies") sind zugelassen und können auf Deinem Endgerät gespeichert werden.
  • Nur absolut notwendige Cookies zulassen:
    Es werden keine Cookies gesetzt, es sei denn, es handelt sich um technisch notwendige Cookies.

Details zu Cookies und die Option, Deine Einstellungen nachträglich zu ändern gibt es in der Datenschutzerklärung. Die Anbieterkennzeichnung findest Du im Impressum

Zurück zur Auswahl