Mit Hilfe von Regular Expressions kann die gewünschte Eingabe konkret definiert werden. Für das Styling kommen dann eine ganze Reihe von Pseudoklassen in Frage.
Author Archive for herr_seeliger
Audio API
Mit Hilfe von Javascript können Nutzer-Erfahrungen mit Audio oder Video sehr individuell gesteuert und angepasst werden.
Audio
#audio verhält sich weitestgehend wie #video: Wir haben das Eltern-Element mit Attributen und über #source wird die Datei geladen.
Video und Effekte
In Verbindung mit #transition und Pseudoklassen entstehen animierte Übergänge.
Youtube Playlist
Youtube bietet mittlerweile auch einen Modus für etwas mehr Datensparsamkeit an.
Video mit Vimeo
Es gibt viele Vorteile Videos über einen externen Anbieter einzubinden. Vor allen anderen Dingen ist es sehr kostengünstig. Das Video zeigt Vision und Wettbewerbsbeitrag unserer 11GMTA für das Projekt 2020 der Stadt Kassel. Vom 4. bis 9. November 2013 war die große Ausstellung dazu in der Documenta Halle in Kassel. 6 Wochen konzentrierte Arbeit im […]
Hintergrundbilder
Mit der Kurzschreibweise #background können mehrere Hintergrundbilder einem Element zugewiesen werden. Die Hintergrundbilder können jeweils mit unterschiedlichen Eigenschaften gestaltet werden.
Bild mit fixer Breite
Bei Bildern mit definierter Breite verhindert die proportionale Höhe eine verzerrte Darstellung. Hier im Beispiel nimmt das Bild die vollständige Breite von dem Eltern-Element ein.
Bild mit fixer Höhe
Bei Bildern mit fixer Höhe verhindert die proportionale Breite eine verzerrte Darstellung.
Vertikales Accordion
Dieses vertikale Accordion basiert auf #flex und Javascript.
Accordion
Accordions öffnen durch Klick und können relativ viel Inhalt platzsparend organisieren, weil sie andere offene Accordions schließen können.
Card 3D Flipp
Die Elemente sind im 3D Raum angeordnet und wenn das Eltern-Element Mauskontakt bekommt, dann dreht sich der Inhalt und über die #transition wird die Animation erzeugt.
Links
#a kann die 4 Pseudoklassen #link, #visited, #hover und #active enthalten. Allerdings ist nicht jede Eigenschaft animierbar, z. B. #text-decoration.
Zoom für ein Hintergrundbild
Der Zoom-Effekt kann z. B. über #background-size umgesetzt und mit der Anwendung von #transform auf das Eltern-Element noch verstärkt werden.
Runde Ecken
#border-radius bestimmt die Rundheit der Ecken.
Drehen
Die Eigenschaft #transform bietet viele Möglichkeiten und mit einer Gradzahl #rotate kann gedreht werden. Eine negative Gradzahl dreht gegen und eine positive Gradzahl mit dem Uhrzeigersinn.
Vergrößerung
Die Eigenschaft #transform bietet viele Möglichkeiten und mit einem Wert größer als 1 bei #scale kann vergrößert werden.