Effekte, die Sie mit Cascading Style Sheets Can Make

CSS3, die letzte Ausgabe von Cascading Style Sheets, stellt Fortschritte in Design Handling. Davon, dass einige neue Funktionen Farbverläufe, Transparenzgrade definieren und sogar Reflexionen sind auf jeden Fall einen Besuch wert!

In der Vergangenheit, wenn Sie einen Farbverlauf wollten, mussten Sie Bitmap-Bilder für den Zweck zu entwerfen. Jetzt CSS können Sie Container mit lineare und radiale Gradienten zu füllen, die einen gleichmäßigen Übergang von einer Farbe zur anderen zu machen, oder von einer Farbe in verschiedenen Farben. Sie können auch steuern, wie der Gradient des Behälters füllt.

Besonders interessant ist die Tatsache, dass Sie jetzt CSS-Gradienten als Bildmasken, die Alpha-Kanal-Transparenz integrieren können. Durch die Definition des Bildes Sie als Maske verwendet wird - und Zuordnen, das Bild mit einem Element oder ein anderes Bild als Teil der Definition - Sie können dieses Element machen allmählich in Erscheinung verblassen und enthüllt, was Hintergrund darunter verborgen worden war. Diese Fähigkeit erlaubt es für einige interessante Lagerungseffekte in das Design Ihrer Website.

Um eine Reflexion erzeugen (wo das Bild erscheint unter der Oberfläche gespiegelt abgeschaltet werden) mit nur CSS, benötigen Sie eine Kombination von Transformations-Einstellungen und Behälter zu verwenden, aber der Nettoeffekt ist jedoch eine Reflexionswirkung. Im Wesentlichen erstellen Sie zwei Container - eine für das Hauptbild und eine für die Reflexion. Durch die Anwendung von Effekten auf die Reflexions Behälter verwandeln, die zuerst das Bild auf den Kopf stellen dann ihre Höhe quetschen und dann eine Transparenzmaske hinzufügen, beenden Sie mit einem überzeugenden Reflexion, wie in der folgenden Abbildung dargestellt. Das Schöne ist, dass mit dieser Technik, können Sie eine normale Grafik mit der Möglichkeit, eine Reflexion zu umfassen - eine Reflexion, die dynamisch konfigurierbar ist - und das ohne den Einsatz von Photoshop.

CSS Schatteneffekte

Es ist nun möglich, CSS zu verwenden, Schlagschatten, um Elemente hinzuzufügen - ein weiterer sehr cooler Effekt. Vor CSS3, halbtransparente Schatten waren nur mit Bitmap-Bild, speziell das PNG-Format verwenden, das Transparenz unterstützt.

Einfach durch die Farben und die Größe der Versetzung und Unschärfe anpassen, können Sie sehr verschiedene Effekte zu erzeugen. Beachten Sie, dass im Falle der Box-Schatten (das dritte Bild in der folgenden Abbildung) es notwendig ist, zwei Zeilen Code zu haben, unmittelbar im Anschluss an - eine für WebKit und eine für Moz. Dies sind die Safari und Firefox-Browser zu unterstützen sind.

Abgerundete Ecken

Die folgende Abbildung zeigt ein Beispiel für die neuen CSS3 border-radius Eigenschaft in Aktion. einen Wert für diese Eigenschaft Durch die Definition - überprüfen Sie die letzten beiden Zeilen des CSS-Code aus, wobei der Wert auf 10 Pixel eingestellt ist - Sie steuern, wie groß die Ecke Kurve erscheint. Vor der Einführung der Eigenschaft border-radius, abgerundeten Ecken Effekte waren nur möglich durch die Verwendung von Bitmap-Grafiken.

Animationseffekte

Mit CSS3, jetzt können Sie mehrere coole 2D-und 3D-Animationseffekte anwenden, indem die Transformations Eigenschaft. Diese Eigenschaft enthält eine Reihe von Funktionen wie Skalieren, Drehen, Skew und Perspektive, die Sie definieren können, und kombinieren Sie Ihre Animation auf verschiedene Weise zu beeinflussen. Sie können sogar Übergangseffekte Kontrolle definieren Wie das Objekt transformiert, und wie lange es dauert.

Übergangseffekte können auch auf normale Links angewendet werden. Zum Beispiel, wenn normalerweise rollen Sie einen Link zu einem Highlight zu sehen, hebt es auf einmal. Mit den Eigenschaften übergangs Eigenschaft und Übergangsdauer genannt, können Sie das Highlight verblassen langsam machen - und geben an, wie viele Sekunden es so zu tun, dauert.

Wie für 3D-Effekte, wenn Sie jemals das iPhone Wetteranwendung gesehen haben, das scheint # 147-Flip über # 148-, damit Sie Ihre Städte zu konfigurieren, sind Sie CSS3 Effekte in Aktion erleben. Durch die Perspektive Eigenschaft verwenden und Werte für verschiedene Transformationsfunktionen wie Perspektive, Drehung, Neigung sowie Skala angeben, können Sie sehr kreativ mit Ihrer Präsentation der Benutzeroberfläche.