Wie lassen sich zwei CSS3 Schatteneffekte anzuwenden
CSS enthält zwei Schatteneffekte, von denen beide benötigen mindestens zwei Eigenschaften: horizontale und vertikale Schatten Dimensionen. CSS3 Effekte Design schnell in Web-Seite integriert werden, und Designer kommen mit spannenden und kreativen Möglichkeiten, um sie anzuwenden.
CSS3 Schatten Effekte sind wie folgt:
Box-Schatten an Grenzen um Selektoren angewendet.
Text-Schatten gilt Schatten in Text.
Mit box-shadow als ein Beispiel Syntax sieht wie folgt aus:
box-shadow: h-Schatten v-Schatten-
Positiv h-Schatten Werte erzeugen auf der rechten Seite des Textes einen Schatten, während negative h-Schatten Werte generieren, die links von dem Text einen Schatten. Positiv v-Schatten Werte erzeugen einen Schatten unter dem Text, während negative Werte einen Schatten über dem Text erstellen. Die Werte werden in der Regel in Pixeln angegeben.
Die Schatten sind auch oft ein verwischen Eigentum. Das verwischen Wert definiert die Dicke der verwischen Element des Gradienten - im Wesentlichen, wie weit der Gradient im Schatten in den Weltraum. Ein höheres verwischen Wert schafft eine, na ja, unschärfer Wirkung, während eine niedrigere verwischen Wert schafft eine knackige, schärfer Drop-Schatten. Das verwischen Wert erscheint, nachdem der h-Schatten und v-Schatten Werte in der Stildefinition, wie folgt aus:
box-shadow: h-Schatten v-Schatten Blur-
Sie können auch eine Schattenfarbe definieren (wenn keine Farbe angegeben, ein Browser Standardfarbe angezeigt wird).
So zum Beispiel in dem folgenden Codebeispiel wird die Box-Schatten definiert mit einem horizontalen Schatten 3 Pixel nach rechts erstreckt, 6 Pixel nach unten, mit einer mittleren Unschärfe-Effekt, eine, die einen Gradienten artige Unschärfe zu schaffen gilt, die sich 3 Pixel in der Drop-Schatten. Und eine Farbe wurde an die Box Schatten (Silber) zugeordnet.
box-shadow: 3px 6px 3px silber-
Verbreiten Sie definiert die Größe des Schattens. Standardmäßig ist der Schatten die gleiche Größe wie das Element, auf die sie angewendet wird, aber Sie können die Schatten größer machen (oder kleiner) durch eine Zugabe Ausbreitung Wert auf die Stildefinition.
Das Hinzufügen der Einsatzwert zu einem Schatten Definition invertiert den Schatten, es innen anstelle von außerhalb der Box platzieren.
Hier ist ein Beispiel für ein box-shadow Definition, die einen Schatten erzeugt, der 12 Pixel nach rechts und 18 Pixel nach unten erstreckt, ist 25 Pixel größer als das ursprüngliche Element, auf das sie angewendet wird, und ist in der Farbe Silber:
box-shadow: 12px 18px 12px 25px silber-
Angewandt auf einen Kasten, sehen die Werte in dem vorangehenden Beispiel wie folgt aus:
Schließlich kann Schatten sein Einsatz- das heißt, innerhalb des Elements angeordnet, auf die sie aufgebracht sind. Die folgende Abbildung zeigt, wie Einsatz wirkt sich auf die gleiche box-shadow zuvor gezeigt.
Erstellen Sie eine Box-Schatten-Effekt
Box-Schatten-Effekte sind mit zwei wesentlichen Parametern definiert: horizontal und vertikal versetzt.
Um zum Beispiel eine Klasse Stil zu schaffen, die eine Box-Schatten mit 6 Pixeln horizontal erzeugt versetzt und 12 Pixel vertikal versetzt, würden Sie diesen Code verwenden:
box-shadow: 6px 12px;
Wenn Sie die Länge der Unschärfe zu definieren wollte, würden Sie einen dritten Wert hinzufügen. Und wenn Sie die Farbe des Schattens zu definieren wollte, würde man diese Farbe Wert hinzu:
box-shadow: 6px 12px 9px grau-
Sie müssen sich mehr Arbeit zu tun, wenn die box-shadow alle modernen Browser zu arbeiten wird. Chrome, Opera, aktuelle Installationen von Firefox und Internet Explorer 9 die Box-Schatten-Effekt ohne Präfix unterstützen. Aber Sie müssen noch vorgesetzten Versionen des Codes für ältere Versionen von Firefox und in diesem Schreiben, alle Versionen von Safari zu erstellen.
Der folgende Code definiert eine Klasse Selektor genannt box_shadow das funktioniert in allen gängigen Browsern Generation und hat einige padding und margin-Werte:
.box_shadow {
box-shadow: 6px 12px 9px grau-
-Webkit-box-shadow: 6px 12px 9px grau-
-moz-box-shadow: 6px 12px 9px grau-
padding: 9px;
margin: 24px; }
Und denken Sie daran, Sie eine Klasse Stil definiert haben. Um diese Klasse Stil anwenden, es hat immer noch auf ein HTML-Element angebracht werden. Zum Beispiel könnten Sie die Klasse Stil definiert in der vorhergehenden Partie von Code zu einem Absatz-Tag mit den folgenden HTML-Anwendung:
Inhalt geht hier
Die folgende Abbildung zeigt diese Box-Schatten auf einen Absatz im Browser Safari verwendet.
Bewerben Schatten eingeben
Der Text-Schatten-Effekt, seltsam genug, wird in Browsern (außer IE) unterstützt ohne Präfix erforderlich.
Die grundlegende, wesentliche Syntax für einen Text-Schatten zu schaffen ist
ext-Schatten: h v Farbe
In dieser Syntax, h ist die horizontale Offset- v ist die vertikale Offset- und Farbe ist der Farbwert.
Im folgenden Beispiel wird eine Klasse-Selektor (.text_shadow), Die einen Text-Schatten mit einem 4-Pixel horizontal gilt versetzt, eine 1-Pixel vertikal versetzt, um die Farbe dunkelgrau:
.text_shadow {
text-shadow: 4px 1px grau-
}
Text-Schatten werden manchmal weiß Typ für eine saubere, einladende Wirkung angewandt. Die folgende Abbildung zeigt das text_shadow Klasse Stil weißen Typ im vorhergehenden Code definiert.
