50+ Super CSS3-Techniken für bessere Designs
CSS3 gewinnt an Dynamik, obwohl der Standard noch nicht fertiggestellt ist.
Es gibt Hunderte von Tutorials, die den Designern zeigen, wie man es benutzt, aber leider decken viele von ihnen den gleichen Boden ab.
Und einige der Tutorials lehren Designer, Dinge zu tun, die sie nicht für nützlich halten, obwohl die Techniken in der Regel perfekt an ein Projekt angepasst werden können.
Im Folgenden finden Sie mehr als fünfzig tolle CSS3-Tutorials. Viele sind streng CSS- und HTML-basiert, andere enthalten auch JavaScript.
Wenn Sie eine Lieblings-Technik oder ein Tutorial haben, das nicht darunter enthalten ist, teilen Sie es bitte in den Kommentaren!
Verwenden von CSS3 für eine bildlose Illustration
Verschiedene neue Methoden in CSS3 ermöglichen es, eine Reihe von sehr komplexen Grafiken mit reinem CSS und ohne Bilder zu erstellen. Hier sind einige der besten Beispiele, die es gibt.
Reine CSS iPhone Illustration
Eine Mischung aus Umrandungen, Transformationen und Farbverläufen, um ein animiertes iPhone-Bild zu erstellen.
Erstellen des Opera Browser Logos in CSS3
Eine saubere Illustration des Opera-Logos, das mit CSS3-Techniken gerendert wurde.
Unser Sonnensystem mit CSS3
Eine glatte schauende Wiedergabe des Sonnensystems mit Animationseffekten.
Analoger Uhr-Effekt
Erstellen Sie eine coole analoge Uhr mit nur CSS3 und jquery.
Schattenexperimente
Dieses Tutorial zeigt, wie man CSS-Schatten benutzt, um eine Vielzahl von Effekten zu erstellen, einschließlich einer dunklen Seite des Mondes, eines schattierten Periodensystems und sogar eines psychedelischen "Liebestrankes".
Erstellen von Polaroid Style Images mit nur CSS
In diesem Tutorial werden CSS2- und CSS3-Effekte verwendet, um eine einfache Liste von Bildern mit Polaroid-Stilen zu versehen.
CSS3 Text, Layout und Farbeffekte
CSS3 kann für viele verschiedene Animationen und Grafiken verwendet werden, eignet sich aber auch hervorragend für Layout-, Text- und Farbeffekte, für die Sie früher möglicherweise Photoshop verwendet haben.
Utilizing CSS3 Spalten
Codierung eines sauberen mehrspaltigen CSS3-Moduls.
Allgemeine CSS3-Implementierung
Ein Überblick über die Vorteile von CSS3.
Styling Links mit CSS3
Vier verschiedene Möglichkeiten, verschiedene Arten von Links mit CSS3 zu gestalten
CSS3 Vertikales Akkordeon
Farbverläufe und Übergänge machen dieses Akkordeonmenü zu einer geordneten Liste in älteren Browsern.
Super Awesome CSS3 Tasten
Farbige, Verlaufsknöpfe mit Schlagschatten, die auf hellen oder dunklen Hintergründen funktionieren und keine Bilder benötigen!
Photoshop Style Buttons mit CSS3
Ein direkter Vergleich der Erstellung von CSS3-Schaltflächen ohne Bilder und mit Photoshop.
Css Farbverlaufseffekt
Anweisungen zum Erstellen eines eindeutigen Texteffekts durch Anwenden einer Texturzuordnung auf Text. Sie können Farbverläufe oder Muster verwenden, um den Text wirklich aufzufrischen.
Einige CSS3-Alternativen zu JavaScript-Effekten
7 Wege, um häufig verwendete JavaScript-Effekte mit CSS3 zu ersetzen, um Ihre Website für die Zukunft bereit zu machen.
Geprägter CSS3-Texteffekt
Erstellen eines geprägten Texteffekts ohne Photoshop-Browser-Hacks.
Grundlegendes zu CSS3-Farbwerten
Alles über die neuen Farboptionen, die mit CSS3 verfügbar sind.
Rich Effects mit CSS3 erstellen
CSS-Übergänge und -Transformationen können kombiniert werden, um verschiedene Effekte zu erzielen.
Einen CSS3 Bokeh-Effekt machen
Die Möglichkeit, Farbverläufe und Transparenz mit CSS3 zu verwenden, macht diesen klassischen Effekt möglich.
CSS3 Spalten
Ein gutes Video-Tutorial zum Konzept der Verwendung von CSS3-Spalten für das Layout.
Fancy Listen mit CSS3
Coole Aufzählungszeichen mit CSS3, um ausgefallene Häkchen zu setzen.
Sehr glatte, bildlose Infoboxen mit CSS3
Die Techniken, die durch CSS3 ermöglicht werden, machen diese Boxen wirklich populär.
Sprechblasen
Border-Radius- und Transform-Pseudo-Elemente ermöglichen diese Formen.
Flash-Style Bildübergangseffekte
Eine clevere Möglichkeit, den CSS-Animationseffekt zu verwenden.
Tumblr's Updating Screen mit CSS3 neu erstellen
Ein CSS3-Design-Effekt, der sich für ältere Browser verschlechtert.
Subtile CSS3-Typografie, die Sie schwören würden, wurde in Photoshop erstellt
Dieses 13-minütige Video-Tutorial zeigt Ihnen, wie Sie mit CSS3 einen schönen, subtilen 3D-Typografie-Effekt erzeugen können.
Textdrehung mit CSS
Hier ist eine etwas ältere Technik, die zeigt, wie browserübergreifender Text erstellt wird, der gedreht wird, um ihn an einer vertikalen Achse auszurichten.
Erstellen Sie einen Buchdruck-Effekt mit CSS Text-Shadow
In diesem Line25-Tutorial erfahren Sie, wie Sie mithilfe von Textschattierungen einen Letterpress-Effekt auf den Text Ihrer Website erstellen.
Super CSS3 Lightbox Galerie mit jQuery
Dieser Code erstellt eine Bildergalerie im Polaroid-Stil mit einer Drag & Drop-Option.
Tolle Überlagerungen
Dieses Tutorial von Zurb zeigt, wie man Bild-Overlays mit CSS3-Rahmeneigenschaften erstellt, die dann verwendet werden können, um zusätzliche Informationen über ein Bild anzuzeigen, wenn es aktiviert ist.
Awesome Inline Form Etiketten
In diesem Tutorial erfahren Sie, wie Sie Inline-Formularbezeichnungen erstellen, die nicht mehr verschwinden, wenn Ihre Besucher mit der Eingabe beginnen.
CSS3 3D Effekte
Animierter CSS3 Würfel
Ein einzigartiger 3D-animierter 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 mit diesen einfachen CSS3-CD-Bändern eine gewisse Tiefe.
Animierte 3D Poster Scroller
Anzeigen von Filmplakaten mit Bildunterschriften unter Verwendung eines erstaunlichen 3D-Perspektive-Effekts in CSS3.
3D-CSS3-Cola-Dose
Wenn Sie eine Bildlaufleiste ziehen, kann dieser virtuelle Coke vor und zurück rollen.
CSS-Schatten
Kreatives Gestalten von Schatten, indem Sie sie vom Element lösen.
CSS3 Animation
Eine animierte Darstellung von Twitter's Fail Whale mit CSS3
Ein sehr eleganter Benutzer von CSS3, der sich in älteren Browsern erstaunlich gut absetzt.
Parallax Starfield Hintergrund
Mit diesem klassischen Space-Travel-Look bewegen sich Sterne von links nach rechts hinter Ihren Inhalten.
Anzeigen und Ausblenden von Inhalten mit CSS3
Erweiterung und Contracting von Trays und Menübäumen ohne Javascript.
Ein Floating Follow Tab mit CSS3
Setzen Sie Ihre Navigations- oder Kontaktsymbole mit dieser nützlichen Methode in Reichweite.
CSS3 Drop-in Modal Windows
Ein paar allgemeine modale Fenster, die mit CSS3-Effekten und Transformationen erzeugt wurden.
Spinners, die nur CSS3 verwenden
Erstellen von Lade-Animationen mit nur CSS3 und keine animierten Gifs!
Anzeige von Social Icons mit CSS3
Ein cooler Fading-Effekt zur Darstellung Ihrer Social Icons mit reinem CSS3.
CSS3 Zeichentrick-Animation
Erstellen einer vollständigen Flash-Animation mit nur CSS3 und Jquery.
Eine animierte Landschaft mit CSS3
Berge und Wolken und Wasser alle mit CSS3 animiert.
Schöne animierte Scroll-Bildbeschriftungen
Mit CSS3-Übergängen können Sie erstaunliche Dinge mit Textbeschriftungen machen. Hier ist ein Beispiel.
Ein elastisches Miniaturmenü
Eine Reihe von Bildern, die sich beim Überfahren ausdehnen und zurückziehen.
Gestapelte, dynamische Karteikarten
Ein fantastischer Animationseffekt, der auf eine Reihe von Designs angewendet werden kann.
Eine bunte Uhr mit CSS & jQuery
Dieses Tutorial zeigt, wie man mit CSS und jQuery eine wirklich tolle bunte Uhr erstellt, bestehend aus drei separaten Kreisen im Ladestil, die Stunden, Minuten und Sekunden anzeigen.
Pure CSS3 At-At Walker
Dies ist ein eindrucksvolles Beispiel, das CSS3 (kein JavaScript, kein Flash) verwendet, um einen animierten At-At Walker von Star Wars zu erstellen. Der einzige Nachteil ist, dass es derzeit nur in den Webkit-Browsern (Safari und Chrome) sichtbar ist.
Erstellen Sie einen jQuery Content Slider mit Pure CSS
In diesem Lernprogramm erfahren Sie, wie Sie einen reinen CSS-jQuery-Style-Slider erstellen.
CSS3 Dropdown-Menü
Dieses Tutorial von WebDesignerWall zeigt, wie Sie ein browserübergreifendes CSS3-Dropdown-Menü erstellen, das auch in Browsern funktioniert, die CSS3 nicht unterstützen (allerdings mit eingeschränktem Styling).
Geschrieben exklusiv für WDD von Cameron Chapman .
Wenn Sie andere hochwertige CSS3-Tutorials kennen, die oben nicht behandelt wurden und die Sie gerne teilen möchten, tun Sie dies bitte in den Kommentaren!