Anfängerhandbuch zu CSS3
Dieser Artikel ist Teil unserer "HTML5 / CSS3 Tutorials" -Serie - mit dem Ziel, Sie zu einem besseren Designer und / oder Entwickler zu machen. Klicken Sie hier, um mehr Artikel aus derselben Serie zu sehen.
Seit der Ankündigung von 2005 wurde die Entwicklung der Stufe 3 von Cascading Style Sheet oder besser bekannt als CSS3 von vielen Designern und Entwicklern genau beobachtet und überwacht. Wir freuen uns alle darauf, die neuen Funktionen von CSS3 in den Griff zu bekommen - die Textschatten, Ränder mit Bildern, Deckkraft, mehrere Hintergründe usw., um nur einige zu nennen.
Ab heute werden nicht alle Selektoren von CSS3 vollständig unterstützt. Aber das bedeutet nicht, dass wir keine neuen CSS3-Sachen ausprobieren können. Dieser Beitrag richtet sich an alle Designer und Entwickler, die bereits mit CSS 2.1 vertraut sind und sich bei CSS3.0 die Hände schmutzig machen wollen.
Es ist eine Zusammenstellung von nützlichen 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 auf inkompatiblen Browsern korrekt fallen.
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.

Vorteile von CSS3 mit Erklärungen und Beispielen für CSS3-Eigenschaften und Selektoren.

Webmonkey führt Sie durch einige grundlegende Tricks in CSS3, einschließlich abgerundete Ränder, Ränder, Schlagschatten, Bildtricks und mehr.

Die Leute von Six Revision haben Eric Meyer mit wertvollen Einsichten und Antworten zu CSS3 interviewt.

Wie können Sie elegante (oder progressive) Verbesserungstechniken verwenden, um CSS3-Funktionen in Browsern zu verwenden, die diese unterstützen, während sichergestellt wird, dass Ihr Code auch in älteren Browsern, die diese Funktionen noch nicht unterstützen, eine zufriedenstellende Benutzererfahrung bietet.

Abgerundete Ränder (Border-Radius)
Eine Anleitung zum Erstellen eines abgerundeten Rahmens mit der border-radius
-Eigenschaft von CSS3.

So verwenden Sie Bilder in Rahmen mit border-image
Eigenschaft border-image
.

Detailerläuterung mit Beispielen neuer CSS3-Eigenschaften wie: background-clip
, background-origin
, background-attachment
, box-shadow
, box-decoration-break
, Rahmen border-radius
und Rahmen border-image
.

Buchdruck-Effekt
Erstellen Sie einen einfachen Buchdruck-Effekt mit CSS3.

Texteffekte umfassen: Vintage / Retro, Neon, Inset, Anaglyphen, Feuer und Brettspiel.

Wie man grundlegendes Markup nimmt und es in ein attraktives und schönes typografisches Design durch reines CSS3 umwandelt.

Verwendet ein Bild Sprite und eine Prise CSS, um Dinge richtig positioniert zu bekommen.

So fügen Sie Ihrem Text mithilfe der CSS3 text-stroke
Eigenschaft text-stroke
eine Gliederung oder einen Strich hinzu.

Interaktiver Textmaskierungseffekt unter Verwendung der text-shadow
CSS-Eigenschaft.

Ditch Javascript und erstellen Sie Nudge-Effekt vollständig mit CSS3.

Ändern Sie den Textauswahlstil mit CSS3.

Mehrspaltiger Inhalt
Verwenden Sie CSS3, um eine Reihe von Spalten auf Ihrer Website zu erstellen, ohne einzelne Ebenen und (oder) Absätze für jede Spalte zuweisen zu müssen.

Die Verwendung des sich entwickelnden CSS-Standards kann einige schöne Tooltips für den Browser verbessern.

- Reiner CSS3 Tooltip
- Tooltips mit CSS3.
Dropdown-Menü
Erstellen eines Apple.com-ähnlichen Dropdown-Menüs mit mehreren Ebenen unter Verwendung von border-radius
, box-shadow
und text-shadow
.

Klicken Sie auf einen Tab, blenden Sie alle Panels aus, zeigen Sie den Tab an, der gerade angeklickt wurde - alles mit CSS.

Erstellen Sie schön aussehende 3D-Bänder mit nur CSS3.

Schlagschatten im Bild
Präsentieren Sie mehrere Techniken und einige der möglichen Erscheinungen zum Löschen von Schatten ohne Verwendung von Bildern.

So erstellen Sie intuitive und schöne Tabs in CSS3 ohne Bild.

Tutorial: Hübsche Knöpfe
So erstellen Sie schöne browserübergreifende CSS3-Schaltflächen, die sich leicht abwerten lassen.

Verschiedene Formen des Sprechblaseneffekts, erstellt mit CSS 2.1 und verbessert mit CSS3.

Sammlung von Schaltflächen, die zeigen, was mit CSS3 möglich ist, während gleichzeitig die einfachste Möglichkeit für das Markup beibehalten wird.

Wie man mit CSS3 und MooTools dynamische, rotierende Elemente erzeugt.

Praktische Anwendung der CSS3-Eigenschaft border-image.
Mehr
- CSS3 + Mootools. Ein Beispiel für Experimente in Mootools. Dies fügt CSS3-Eigenschaften in die Kern-MooTools-Rahmenarbeit ein.
- Explodierendes Logo mit CSS3 und MooTools oder jQuery. Nimm statisches Bild und mache es zu einem animierten, explodierenden Effekt auf Mouse Over.
- Die Macht von HTML 5 & CSS 3. HTML 5 und CSS 3 werden schnell populärer, Perishable Press ist hier, um zu erklären, wie und warum.
- Spinning Rays mit CSS3 Animationen & JavaScript Beispiel. Einfacher und subtiler Ray-Spinning-Effekt auf der Rückseite eines Bildes.
- CSS3 Polaroid-Fotogalerie. Wie man einen coolen Stapel von Polaroid-Fotos mit reinem CSS-Styling erstellt.
- HTML 5 und CSS 3: Die Techniken, die Sie bald verwenden werden. Eine Anleitung zum Aufbau eines Blogs von Grund auf mit HTML5 und CSS3.
Cheatsheets & Referenzen
CSS3 Spickzettel (PDF)
Printable Cheatsheet mit vollständiger Liste aller Eigenschaften, Selektortypen und erlaubt Werte in 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.

Umfangreiche Liste von Schriftarten, die derzeit für die @font-face
Einbettung lizenziert sind.

Ein Leitfaden und Verweis auf CSS3-Selektoren und ihre Muster.

CSS3-Regeln, die Sie kopieren und in Ihr eigenes Stylesheet einfügen können.
CSS3 Klicken Sie auf Diagramm
Erhalten Sie CSS3-Stile wie Boxgröße, Rahmenradius, Textschatten und mehr mit einem Klick.

Komplette Liste der Selektortabellen von CSS und CSS3 mit Deklaration für die Browserkompatibilitätsprüfung.


100+ inspirierende Zitate für Designer
Bitten Sie einhundert Designer, Ihnen zu sagen, was Design ist und Sie werden vielleicht 500 verschiedene Antworten bekommen. Das liegt nicht daran, dass die Antwort subjektiv ist, sondern weil die Antwort komplex ist . Und Designer, die Designer sind, finden Wege, die Botschaft zu vermitteln. Ein Weg ist durch die Verwendung von schönen inspirierenden Zitaten.

16 besten YouTube-Kanäle zu Beginn lernen Web-Entwicklung
Möchten Sie ein Webentwickler sein, wissen aber nicht, wo Sie anfangen sollen oder mit welcher Programmiersprache ? Es gibt viele Ressourcen, auf die Sie zurückgreifen können, um Sprachen wie Swift oder Frameworks wie AngularJS oder sogar Responsive Design oder einfach nur Coding im Allgemeinen zu lernen, wenn Sie wissen, wo Sie suchen müssen (sie sind überall im Web).Ande