CSS3 gewinnt an Dynamik, obwohl der Standard noch nicht einmal fertiggestellt ist.
Es gibt Hunderte von Tutorials, die Designern den Umgang damit beibringen, aber leider decken viele davon den gleichen Themenbereich ab.
Und einige der Tutorials bringen Designern bei, Dinge zu tun, die sie vielleicht nicht für nützlich halten, obwohl die Techniken normalerweise so angepasst werden können, dass sie perfekt zu einem Projekt passen.
Nachfolgend finden Sie mehr als fünfzig tolle CSS3-Tutorials. Viele basieren ausschließlich auf CSS und HTML, während andere auch JavaScript integrieren.
Wenn Sie eine Lieblingstechnik oder ein Lieblingstutorial haben, das unten nicht aufgeführt ist, teilen Sie es bitte in den Kommentaren mit!
Verwendung von CSS3 für bildlose Illustrationen
Verschiedene neue Methoden in CSS3 ermöglichen die Erstellung einer Reihe sehr komplexer Grafiken mit reinem CSS und ohne Bilder. Hier sind eine Handvoll der besten Beispiele, die es gibt.
Reine CSS-iPhone-Illustration
Eine Mischung aus Rändern, Transformationen und Verläufen, um ein animiertes Bild eines iPhones zu erstellen.
Erstellen des Opera-Browser-Logos in CSS3
Eine saubere Illustration des Opera-Logos, gerendert mit CSS3-Techniken.
Unser Sonnensystem mit CSS3
Eine schick aussehende Darstellung des Sonnensystems mit Animationseffekten.
Analoger Clock-Effekt
Erstellen Sie eine coole analoge Uhr nur mit CSS3 und JQuery.
Schattenexperimente
Dieses Tutorial zeigt, wie Sie CSS-Schatten verwenden, um eine Vielzahl von Effekten zu erstellen, darunter eine Grafik „Dark Side of the Moon“, ein schattiertes Periodensystem und sogar einen psychedelischen „Liebestrank“.
Erstellen Sie Bilder im Polaroid-Stil mit nur CSS
In diesem Tutorial werden sowohl CSS2- als auch CSS3-Effekte verwendet, um einer einfachen Liste von Bildern den Polaroid-Stil hinzuzufügen.
CSS3-Text, Layout und Farbeffekte
CSS3 kann für viele verschiedene ausgefallene Animationen und Grafiken verwendet werden, eignet sich aber auch hervorragend für Layout-, Text- und Farbeffekte, für die Sie früher möglicherweise auf Photoshop zurückgegriffen haben.
Verwendung von CSS3-Spalten
Codierung eines sauberen mehrspaltigen CSS3-Moduls.
Allgemeine CSS3-Implementierung
Ein Überblick über die Vorteile von CSS3.
Links mit CSS3 gestalten
Vier verschiedene Möglichkeiten, verschiedene Arten von Links mit CSS3 zu gestalten
CSS3 Vertikales Akkordeon
Farbverläufe und Übergänge machen dieses Akkordeon-Menü aus, das in älteren Browsern zu einer geordneten Liste degradiert.
Super tolle CSS3-Schaltflächen
Farbige Verlaufsschaltflächen mit Schlagschatten, die auf hellen oder dunklen Hintergründen funktionieren und keine Bilder erfordern!
Schaltflächen im Photoshop-Stil mit CSS3
Ein direkter Vergleich zum Erstellen von CSS3-Schaltflächen ohne Bilder und mit Photoshop.
CSS-Verlaufstexteffekt
Anweisungen zum Erstellen eines einzigartigen Texteffekts durch Anwenden einer Texturkarte auf Text. Sie können Farbverläufe oder Muster verwenden, um Text wirklich hervorzuheben.
Einige CSS3-Alternativen zu JavaScript-Effekten
7 Möglichkeiten, häufig verwendete JavaScript-Effekte durch CSS3 zu ersetzen, um Ihre Website für die Zukunft vorzubereiten.
Geprägter CSS3-Texteffekt
Erstellen eines geprägten Texteffekts ohne Photoshop-Browser-Hacks.
CSS3-Farbwerte verstehen
Alles über die neuen Farboptionen, die mit CSS3 verfügbar sind.
Rich-Effekte mit CSS3 erstellen
CSS-Übergänge und -Transformationen können kombiniert werden, um eine Vielzahl von Effekten zu erzielen.
Erstellen eines CSS3-Bokeh-Effekts
Die Möglichkeit, mit CSS3 Farbverläufe und Transparenz zu nutzen, macht diesen klassischen Effekt möglich.
CSS3-Spalten
Ein gutes Video-Tutorial zum Konzept der Verwendung von CSS3-Spalten für das Layout.
Ausgefallene Listen mit CSS3
Cooler Listenstil mit Aufzählungszeichen mit CSS3 zum Erstellen ausgefallener Häkchen.
Sehr elegante, bildlose Infoboxen mit CSS3
Die von CSS3 ermöglichten Techniken lassen diese Boxen wirklich hervorstechen.
Sprechblasen
Grenzradius und Transformationspseudoelemente machen diese Formen möglich.
Bildübergangseffekte im Flash-Stil
Eine clevere Möglichkeit, den CSS-Animationseffekt zu nutzen.
Neuerstellung des Aktualisierungsbildschirms von Tumblr mit CSS3
Ein CSS3-Designeffekt, der sich bei älteren Browsern deutlich verschlechtert.
Subtile CSS3-Typografie, von der Sie schwören würden, dass sie in Photoshop erstellt wurde
Dieses 13-minütige Video-Tutorial zeigt Ihnen, wie Sie vollständig mit CSS3 einen schönen, subtilen typografischen 3D-Effekt erstellen.
Textdrehung mit CSS
Hier ist eine etwas ältere Technik, die zeigt, wie man browserübergreifend kompatiblen Text erstellt, der gedreht wird, um ihn an einer vertikalen Achse auszurichten.
Erstellen Sie einen Letterpress-Effekt mit CSS Text-Shadow
Dieses Line25-Tutorial zeigt Ihnen, wie Sie Textschatten verwenden, um einen Effekt im Buchdruck-Stil auf dem Text Ihrer Website zu erzeugen.
Fantastische CSS3-Lightbox-Galerie mit jQuery
Dieser Code erstellt eine Bildergalerie im Polaroid-Stil mit einer Drag-and-Drop-Freigabeoption.
Tolle Overlays
Dieses Tutorial von Zurb zeigt, wie Sie Bildüberlagerungen mithilfe von CSS3-Rahmeneigenschaften erstellen, die dann verwendet werden können, um zusätzliche Informationen zu einem Bild anzuzeigen, wenn Sie mit der Maus darüber fahren.
Tolle Inline-Formularetiketten
In diesem Tutorial erfahren Sie, wie Sie Inline-Formularbeschriftungen erstellen, die nicht verschwinden, sobald Ihre Besucher mit der Eingabe beginnen.
CSS3 3D-Effekte
Animierter CSS3-Würfel
Ein einzigartiger animierter 3D-Würfel mit 3D-Transformationen im CSS-Stil. Der Würfel kann mit den Pfeiltasten gedreht werden, um die auf jeder Seite angezeigten Informationen anzuzeigen.
CSS3 3D-Bänder
Verleihen Sie Ihrem Design etwas Tiefe, indem Sie diese einfachen CSS3-CD-Bänder verwenden.
Animierter 3D-Poster-Scroller
Anzeige von Filmplakaten mit Bildunterschriften mithilfe eines erstaunlichen 3D-Perspektiveffekts in CSS3.
3D-CSS3-Coladose
Durch Ziehen einer Bildlaufleiste kann diese virtuelle Cola hin und her rollen.
CSS-Schatten
Gestalten Sie Schatten kreativ, indem Sie sie vom Element lösen.
CSS3-Animation
Eine animierte Wiedergabe von Twitters Fail Whale mit CSS3
Ein sehr eleganter Benutzer von CSS3, der in älteren Browsern überraschenderweise etwas schlechter abschneidet.
Parallax Starfield-Hintergrund
Mit diesem klassischen Raumfahrt-Look bewegen sich Sterne von links nach rechts hinter Ihren Inhalten.
Inhalte mit CSS3 ein- und ausblenden
Erweitern und Verkleinern von Tabletts und Menübäumen ohne Javascript.
Ein schwebender Follow-Tab mit CSS3
Mit dieser nützlichen Methode können Sie Ihre Navigations- oder Kontaktsymbole leicht erreichen.
Modale CSS3-Drop-in-Fenster
Ein paar gängige modale Fenster, die mit CSS3-Effekten und -Transformationen generiert wurden.
Spinner, die nur CSS3 verwenden
Ladeanimationen nur mit CSS3 und ohne animierte GIFs erstellen!
Soziale Symbole mit CSS3 anzeigen
Ein cooler Fading-Effekt zum Anzeigen Ihrer sozialen Symbole mit reinem CSS3.
CSS3-Cartoon-Animation
Erstellen einer vollständigen Animation im Flash-Stil nur mit CSS3 und JQuery.
Eine animierte Landschaft mit CSS3
Berge, Wolken und Wasser, alles mit CSS3 animiert.
Schöne animierte Scroll-Bildunterschriften
Mit CSS3-Übergängen können Sie mit Textbeschriftungen erstaunliche Dinge tun. Hier ist ein Beispiel.
Ein elastisches Miniaturansicht-Menü
Eine Reihe von Bildern, die sich vergrößern und verkleinern, wenn man mit der Maus darüber fährt.
Gestapelte, dynamische Karteikarten
Ein fantastischer Animationseffekt, der auf eine Reihe von Designs angewendet werden kann.
Eine farbenfrohe Uhr mit CSS und jQuery
Dieses Tutorial zeigt, wie Sie mit CSS und jQuery eine wirklich tolle, farbenfrohe Uhr erstellen, die aus drei separaten Kreisen im Ladestil besteht, die Stunden, Minuten und Sekunden anzeigen.
Reiner CSS3 At-At Walker
Dies ist ein beeindruckendes Beispiel, das CSS3 (kein JavaScript, kein Flash) verwendet, um einen animierten At-At Walker aus Star Wars zu erstellen. Der einzige Nachteil besteht darin, dass es derzeit nur in Webkit-Browsern (Safari und Chrome) angezeigt werden kann.
Erstellen Sie einen jQuery-Inhaltsschieberegler mit reinem CSS
Erfahren Sie in diesem Tutorial, wie Sie einen reinen CSS-Schieberegler im jQuery-Stil erstellen.
CSS3-Dropdown-Menü
Dieses Tutorial von WebDesignerWall zeigt, wie Sie ein browserübergreifend kompatibles CSS3-Dropdown-Menü erstellen, das auch in Browsern funktioniert, die CSS3 nicht unterstützen (allerdings mit eingeschränktem Stil).
Exklusiv für WDD geschrieben von Cameron Chapman.
Wenn Sie andere hochwertige CSS3-Tutorials kennen, die oben nicht behandelt wurden, und Sie diese gerne teilen möchten, schreiben Sie dies bitte in die Kommentare!
