Webdesign Daily – 5 kostenlose CSS-Tutorials
Kommentare

CSS vereinfacht den Programmiercode von Webseiten und definiert zum Beispiel Farbe (color), Schrifttyp (font-family) oder Außenabstand (margin) der Inhalte. Wie man CSS in der Praxis effektiv und einfach einsetzen kann, zeigen fünf kostenlose CSS-Tutorials, die wir für Euch gesammelt haben. Wolltet Ihr schon immer eine Infografik mit CSS-Animationen erstellen oder einfach nur Eure Webseite auf Vordermann bringen? Folgende Tutorials zeigen Euch, wie es geht:

Infografik mit CSS-Animationen

Infografiken sind im Netz besonders beliebt, denn die Macht der Bilder überwindet Sprachbarrieren und eignet sich hervorragend, um viele Informationen anschaulich zu verdichten. Tympanus.net bietet eine Anleitung, wie Ihr eine eigene Infografik mit CSS-Animationen erstellen könnt.

css3 tutorial

Bildquelle Screenshot: Tympanus.net

CSS3 Mega Dropdown Menü

Habt Ihr viel Content auf der Seite? Ein Mega Dropdown Menü kann Abhilfe schaffen, indem es Eure Inhalte nach Kategorien sortiert und übersichtlich darstellt. Folgendes Tutorial von Designmodo.com zeigt Euch, wie es geht:

css3 tutorial

Bildquelle Screenshot: Designmodo.com

„Coming Soon“

Coming Soon Templates und Under-Construction-Seiten weisen Besucher einer Webseite darauf hin, dass der derzeit gesuchte Inhalt leider nicht verfügbar ist – eine schlechte User Expierence. Weil es aber manchmal eben nicht anders geht, ist es ratsam die „Coming Soon“-Seite so angenehm und unterhaltsam wie möglich zu gestalten. Zum Beispiel mit folgendem CSS und JavaScript-basierten Template von Queness.com.

css3 tutorial

Bildquelle Screenshot: Queness.com

Foto-Animationen

Folgendes Tutorial von Tutorialzine.com zeigt Euch Schritt für Schritt, wie Ihr eine Fotoserie auf Eurer Webseite ansprechend animieren könnt. Das Verfahren ist CSS3-basiert und lässt sich deshalb auf vielen unterschiedlichen Browsern und mobilen Endgeräten anwenden:

css3 tutorial

Bildquelle Screenshot: Tutorialzine.com

Responsive Navigationsmenü

Responsive Design ist in aller Munde: Folgendes Tutorial von Webdesignerwall.com zeigt Euch, wie Ihr ein responsives Dropdown-Navigationsmenü mit semantischen HTML5 Markups erstellt:

Webdesign Daily – 5 kostenlose CSS-Tutorials

Bildquelle Screenshot: Webdesignerwall.com

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -