Webdesign: Schicke Designeffekte mit HTML5 & CSS3
Lesezeit: 5 Minuten
Die kreativen Möglichkeiten im Webdesign haben sich in den letzten Jahren explosiv durch die technischen Fortschritte von HTML5 und CSS3 verbeitert. Wir zeigen hier eine Auswahl von interessanten CSS3 Effekten!
Besuche uns auf LinkedIn.
Du willst keine Neuigkeiten verpassen? Folge uns doch einfach auf LinkedIn!
LinkedIn ProfilAnmeldung zu dem medani-Newsletter
Die kreativen Möglichkeiten im Webdesign haben sich in den letzten Jahren explosiv durch die technischen Fortschritte von HTML5 und CSS3 verbeitert. HTML5 ist dabei inzwischen Standard und CSS3 wird so häufig eingesetzt, dass es zumindest inoffizieller Standard ist. Wir zeigen hier eine Auswahl von interessanten CSS3 Effekten, die das Arbeiten mit dem Web auf ein Neues – und wieder einmal in der Geschichte des Webdesigns – besonders spannend machen!
Animierte Infografiken
Durch die Möglichkeiten mit CSS3 komplexe Formen zu zeichnen und mit dem Bildformat .SVG auch größenunabhängige Vektorbilder in Websites einzubinden, ergeben sich auch für interaktive Grafiken Neuerungen. Besonders zu Gute kommen diese technischen Erweiterungen nämlich informationsintensiven Websites, die durch Informationsgrafiken benutzerfreundlicher werden.
Weil Infografiken nun sowohl direkt mit CSS auf und für den Screen gezeichnet werden können und vektorbasierte .svg Bilder Pixelbilder ersetzen, gibt es keine Grenzen was die Bildschirmauflösung der Bilder betrifft. Grafiken können damit in unzähligen Geräten Retina ready (hochauflösend auch in starker Vergrößerung auf kleinen Screens) perfekt dargestellt werden. Es gibt keine ausgefransten Kanten mehr, sondern schmeidige Linien, Ecken und Kurven.
Button Transitions
Was bis vor kurzem schwer ohne Flash im Web möglich war, kann jetzt auch auf andere Art realisiert werden. Buttons bleiben nicht länger statische zweidimensionale Boxen, die beim Mouse Over die Farbe verändern. Was mit CSS möglich ist, zeigen wir hier. Geht man auf dieser Seite mit der Maus auf einen Textlink (hier in rot), wird dieser in der Desktop-Ansicht mit einem auffälligen Roll Over Effekt herausgehoben.