medani-pixel
news
17
Okt 13

Webdesign: Schicke Designeffekte mit HTML5 & CSS3

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!

Einleitung

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.

medani-web-und-design-artikel5-Bild1

quelle: the guardian

Auch in aktuellen WordPress Themes werden animierte Infografiken eingesetzt, wie zum Beispiel im Theme Bee.

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.

Unsere Meinung: Sehr schick!

medani-web-und-design-artikel5-bild1a

quelle: webdesignerdepot

 

Markante Artikel-Überschriften strukturieren die schlicht gehaltene Seite grafisch. Die eingebundene Animation sorgt für den Wow-Effekt.

medani-web-und-design-artikel5-bild1b

 

Die Kategorie-Buttons werden hier mit diesem Transition Effekt wie eine Filmklappe von links unten nach rechts oben bewegt. Außerdem werden die Portfolio-Felder darunter wie mit Kaleidoskopen bewegt. Beide Effekte sind alleine mit CSS hergestellt und verzichten zur Gänze auf Javascript oder Ajax.

medani-web-und-design-artikel5-bild3

quelle: cssdesignawards / trama

 

Bewegt man die Maus über das Home-Logo, legt das runde Logo eine 360° Umdrehung zurück. Auch dass die Bilder bei Mouse Over smooth vergrößert werden, ist ein mittlerweile schon sehr verbreiterter Effekt, der ebenfalls der Buttons Transition Effekte von CSS zu verdanken ist.

medani-web-und-design-artikel5-bild5

quelle: webdesignerdepot

 

SENDEN
SENDEN