Anfängerleitfaden zu CSS3
Seit der Ankündigung von 2005 wurde die Entwicklung des Level 3 von Cascading Style Sheet oder besser bekannt als CSS3 von vielen Designern und Entwicklern genau beobachtet und überwacht. Wir alle freuen uns darauf, die neuen Funktionen von CSS3 in die Finger zu bekommen - Textschatten, Rahmen mit Bildern, Deckkraft, mehrere Hintergründe usw., um nur einige zu nennen.
Bis heute werden noch nicht alle Selektoren von CSS3 vollständig unterstützt. Das heißt aber nicht, dass wir keinen Spaß daran haben können, neue CSS3-Sachen zu testen. Dieser Beitrag richtet sich an alle Designer und Entwickler, die bereits mit CSS 2.1 vertraut sind und sich mit CSS3.0 beschäftigen möchten.
Es ist eine Zusammenstellung nützlicher CSS3-Reads, Beispielcodes, Tipps, Tutorials, Spickzettel und mehr. Fühlen Sie sich frei, sie in Ihren Projekten zu verwenden. Stellen Sie einfach sicher, dass sie inkompatiblen Browsern ordnungsgemäß ausgeführt wird.
Erste Schritte mit CSS3
Einführung in CSS3
Eine (Roadmap) offizielle Einführung in CSS und CSS3. Dieses Dokument gibt Ihnen einen Überblick über die Entwicklung von CSS3.
CSS3: Design auf die nächste Stufe bringen
Vorteile von CSS3 mit Erklärungen und Beispielen für CSS3-Eigenschaften und -Elektoren.
Einige Tricks mit CSS3
Webmonkey führt Sie durch einige grundlegende Tricks in CSS3, einschließlich abgerundeter Rahmen, Rahmen, Schlagschatten, Bildtricks und mehr.
Interview: Sechs Fragen mit Eric Meyer zu CSS3
Bei Six Revision interviewte Folks Eric Meyer mit wertvollen Einsichten und Antworten zu CSS3.
CSS3: Progressive Enhancement
Wie können Sie mithilfe von eleganten (oder progressiven) Verbesserungstechniken CSS3-Funktionen in unterstützenden Browsern verwenden und gleichzeitig sicherstellen, dass Ihr Code in älteren Browsern, die diese Funktionen noch nicht unterstützen, eine zufriedenstellende Benutzererfahrung bietet.
CSS3: Hintergrund und Grenzen
Abgerundete Grenzen (Grenzradius)
Eine Anleitung zum Erstellen eines abgerundeten Rahmens mit CSS3 Grenzradius Eigentum.
Abgerundete Ränder mit Bild (Randbilder)
So verwenden Sie Bilder in Grenzen mit Rahmenbild Eigentum.
CSS3-Grenzen, Hintergründe und Boxen
Detaillierte Erklärung mit Beispielen für neue CSS3-Eigenschaften wie: Hintergrund-Clip, Hintergrundursprung, Hintergrundanhang, Box Schatten, Box-Deko-Pause, Grenzradius und Rahmenbild.
CSS3: Text
Letterpress-Effekt
Erstellen Sie einen einfachen Letterpress-Effekt mit CSS3.
Sechs Texteffekte mit Textschatten
Texteffekte umfassen: Vintage / Retro, Neon, Inset, Anaglyphen, Feuer und Brettspiel.
Schöne Typografie
Wie man grundlegende Markierungen nimmt und durch reines CSS3 in ein attraktives und schönes typografisches Design verwandelt.
Textdrehung
Verwendet ein Image-Sprite und eine Spritze CSS, um die Dinge richtig zu positionieren.
Text umreißen
So fügen Sie mit CSS3 eine Gliederung oder einen Strich zu Ihrem Text hinzu Textanschlag Eigentum.
Textmaskierungseffekt
Interaktiver Textmaskierungseffekt mit der Text-Schatten CSS-Eigenschaft.
Verlinkung (Animation) mit CSS3
Lösen Sie Javascript und erstellen Sie einen Nudge-Effekt vollständig mit CSS3.
CSS-Auswahlstil
Ändern Sie die Textauswahl mit CSS3.
CSS3: Menü
Inhalt mit mehreren Spalten
Mit CSS3 können Sie auf Ihrer Website einen Satz von Spalten erstellen, ohne für jede Spalte einzelne Layer und (oder) Absätze zuordnen zu müssen.
Sexy Tooltips mit nur CSS
Die Verwendung des weiterentwickelten CSS-Standards kann einige nützliche Cross-Browser-QuickInfos verbessern.
Weitere Tooltips:
- Reiner CSS3-Tooltip
- Tooltips mit CSS3.
Dropdown-Menü
So erstellen Sie ein Apple.com-ähnliches mehrstufiges Dropdown-Menü mit Grenzradius, Box Schatten, und Text-Schatten.
Nur für CSS3-Registerkarten
Klicken Sie auf eine Registerkarte, blenden Sie alle Bereiche aus, und zeigen Sie diejenige an, die der gerade angeklickten Registerkarte entspricht - alles mit CSS.
3D-Bänder mit CSS3
Erstellen Sie mit nur CSS3 gut aussehende 3D-Farbbänder.
CSS3: Schlagschatten
Schlagschatten im Bild
Stellen Sie verschiedene Techniken und einige der möglichen Erscheinungsformen vor, um Schatten ohne Bilder zu löschen.
Glow Tabs mit Box Shadow
So erstellen Sie intuitive und schöne Registerkarten in CSS3 ohne Bild.
CSS3: Schaltflächen
Tutorial: Hübsche Knöpfe
So erstellen Sie schöne Browser-kompatible CSS3-Schaltflächen, die sich elegant abbauen.
Sprechblasen
Verschiedene Formen von Sprechblaseneffekten, die mit CSS 2.1 erstellt und mit CSS3 verbessert wurden.
Github-ähnliche Knöpfe
Eine Sammlung von Schaltflächen, die zeigen, was mit CSS3 möglich ist, und dabei auch die möglichst einfache Markierung beibehalten.
Spinning, Fading Icons mit CSS3 und MooTools
Wie man CSS3 und MooTools verwendet, um dynamische, rotierende Elemente zu erstellen.
Bildüberlagerung
Praktische Anwendung der CSS3-Eigenschaft border-image.
Mehr
- CSS3 + Mootools. Ein Beispiel für Experimente in Bewegungswerkzeugen. Dadurch werden CSS3-Eigenschaften zur Kernarbeit von MooTools hinzugefügt.
- Explodierendes Logo mit CSS3 und MooTools oder jQuery. Nehmen Sie ein statisches Bild und machen Sie es mit dem Mauszeiger zu einem animierten, explodierenden Effekt.
- Die Stärke von HTML 5 & CSS 3. HTML 5 und CSS 3 gewinnen schnell an Popularität. Perishable Press erklärt, warum und warum.
- Rotierende Strahlen mit CSS3-Animationen und JavaScript-Beispiel. Einfacher und subtiler Ray-Spinning-Effekt auf der Rückseite eines Bildes.
- CSS3 Polaroid-Fotogalerie. So erstellen Sie einen cool aussehenden Stapel von Polaroidfotos mit reinem CSS-Stil.
- HTML 5 und CSS 3: Die Techniken, die Sie bald verwenden werden. Eine exemplarische Vorgehensweise zum Erstellen eines Blogs mit HTML5 und CSS3.
Cheatsheets & Referenzen
CSS3 Spickzettel (PDF)
Druckbares Cheatsheet mit vollständiger Liste aller Eigenschaften, Selektortypen und zulässigen Werte der aktuellen CSS3-Spezifikation aus dem W3C.
CSS-Unterstützung in Opera 9.5
Komplette Liste der unterstützten CSS-Selektoren in Opera 0.5.
Verfügbare Schriften für das Einbetten von @ font-face
Umfassende Liste der derzeit für lizenzierten Schriftarten @Schriftart Einbettung.
CSS 3-Selektoren - Erklärt
Ein Leitfaden und eine Referenz zu CSS3-Selektoren und ihren Mustern.
Browserübergreifender CSS3-Regelgenerator
CSS3-Regeln, die Sie kopieren und in Ihr eigenes Stylesheet einfügen können.
CSS3 Klicken Sie auf Diagramm
Erhalten Sie CSS3-Stile wie Rahmengröße, Randradius, Textschatten und mehr mit einem Klick.
Kompatibilität von CSS-Inhalten und Browsern
Vollständige Liste der Selektortabellen von CSS und CSS3 mit Deklaration für die Browserkompatibilitätsprüfung.
