Wie mit CSS3-Module zur Arbeit

Der Einfachheit halber können die CSS3-Module in in zehn Kategorien unterteilt werden: Rahmen, Hintergründe, Schriftarten, Texteffekte, mehrere Spalten, Übergänge, 2D-Übergänge, 3D-Übergänge, Animationen und Benutzeroberfläche. Werfen Sie einen kurzen Blick auf jedes Modul zu sehen, was es tun kann.

Borders: Die Grenze Modul erweitert die Fähigkeiten der Grenzen Kategorie von Optionen zur Einstellung des Grenzradius Hinzufügen abgerundeten Ecken zu machen, die Box Schatten für Schlagschatten hinzufügen und das Randbild für Grafiken mit Grenzen zu gestalten, anstatt nur eine einzige Farbe pro Kante verwendet wird.

Hintergründe: Derzeit gibt es drei Neuzugänge in den Hintergrund Kategorie mit CSS3. Die Hintergrundgröße ist besonders praktisch für die Erstellung von skalierbaren Grafiken bietet der Hintergrund Ursprung drei Standorten Hintergrundbildern in Bezug auf die Box-Modell zu positionieren, und der Hintergrund-Clip erlaubt Farben Hintergrund auf den Inhalt einer Box befestigt werden, anstatt an den Rändern eines Box.

Darüber hinaus ermöglicht CSS3 nun mehrere Hintergrundbilder für jeden Behälter zu verwenden.

Fonts: Anstatt werden mit Web-Safe-Fonts für alle Ihre Entwürfe stecken, die neue @Schriftart Eigenschaft können Sie jede Schriftart auf Ihrem Webserver gehostet wählen und zu verwenden. Was geschieht, ist ein .ttf (True Type Fonts) oder .otf (Opentype Fonts) Font-Datei wird auf dem Gerät des Benutzers automatisch heruntergeladen, wenn und wenn diese Schrift nicht erkannt wird.

Sie haben vielleicht schon ein ähnliches Feature in Aktion mit Websites mit Google Fonts und Typekit-Schriften zu sehen. Diese Art der Regel erstreckt sich diese Fähigkeit, indem Sie Ihr eigenes System-Schriftarten verwendet werden. Allerdings sollten Sie nicht durch die Angabe urheberrechtlich geschützt Fonts keine Urheberrechtsgesetze zu brechen!

Texteffekte: Es gibt tatsächlich 11 neue Eigenschaften in diesem Modul, aber nicht alle von ihnen haben große Browser-Unterstützung. Die Eigenschaften, die derzeit Unterstützung tun haben, sind gerechtfertigt, Überlauf, Schatten, Wortbruch und Zeilenumbruch.

Mehrere Spalten: Ohne zusätzliche Behälter oder Schwimmer zu verwenden, können Sie nun mehrere Textspalten mit den zehn verschiedenen mehrere Spalteneigenschaften erstellen. Obwohl die meisten von ihnen jetzt arbeiten, einige immer noch Browser-spezifischen Stil Präfixe erfordern. Trotzdem sind sie immer noch verdammt ordentlich. Die besten Ergebnisse erzielen, stellen Sie die Spaltenanzahl und Spaltbreite.

Übergänge: Halten Sie auf Ihren Hut, können Sie jetzt erstellen Bewegung auf der Seite ohne animierte Gifs, Flash oder javascript! Transitions kommen in drei Geschmacksrichtungen, regelmäßige, 2D und 3D. Mit dem regelmäßigen Übergang, können Sie eines oder mehrere dieser Eigenschaften eines Elements ändern, etwa die Breite eines Objekts über eine bestimmte Anzahl von Sekunden zu ändern, wenn sie mit der kombinierten :schweben Pseudo-Klasse.

2D-Übergänge: Die Elemente in diesem Modul können Sie die 2D-Eigenschaften eines Elements zu manipulieren. Verwenden Sie sie einzeln oder in Kombination zu verschieben, skalieren, verzerren, drehen, strecken und drehen Elemente entlang einer horizontalen oder vertikalen Ebene. Zum Beispiel können Sie ein Feld wachsen und Spin zu machen, während sie von links nach rechts bewegt.

3D-Übergänge: Als ob 2D-Übergänge nicht kühl genug, warten Sie, bis Sie sehen, was die 3D-Übergänge zu tun! Unter Verwendung eines Verfahrens, das das Objekt entlang der X- und / oder Y-Achse verwandelt, können Sie Ihre Objekte erscheinen im 3D-Raum zu drehen, bietet Zuschauern eine Chance, die umgekehrt zu sehen # 147-back # 148- Seite eines Objekts.

Obwohl Browser-Unterstützung für erweiterte Transformationen beschränkt ist, schließlich werden Sie in der Lage sein, sich zu drehen, skalieren und entlang der X-, Y- und Z-Achsen, unter anderem zu bewegen. Einfach stark.

Animationen: Okay, was passiert, wenn Sie zusammen alle diese neuen Transformationstechniken setzen? CSS3 Animationen, Baby - die Art, die animierte GIFs ersetzen kann, Flash, und sogar einige javascript. Die ganze Magie geschieht durch die neue Bindungs @keyframes Eigentum an einen Wähler durch die Animationseigenschaft mit dem angegebenen Namen und die Dauer verwenden.

Zum Beispiel könnten Sie die Position und die Hintergrundfarbe eines Objekts zu ändern, so dass das Objekt das Aussehen von Morphing durch den Raum hat, und dann könnten Sie den Code umfassen die Animation umgekehrter Reihenfolge und weiter Looping endlos zu machen.

Benutzer interface: Mit diesen neuen Eigenschaften können Sie die Eigenschaften auf verschiedene Objekte hinzufügen, die sie in interaktive Elemente für Website-Besucher zu konvertieren. Zum Beispiel können Sie die Größe und Schichten TextArea- Formularfelder, rufen Sie die Registerkarte und die Pfeiltasten auf der Tastatur, und erstellen Sie eine Offset-Kontur, die über die Randkante erstreckt.

Nun, da Sie einen Überblick über die neuen Module haben, können Sie herausfinden, mehr über das, was sie tun können. Zum Beispiel können Sie Schatten auf Formen und Text zu erstellen, Hintergrund Gradient Effekte anwenden, und Ihre Objekte von hier nach dort zu bewegen.