Dreamweaver CS6: Hinzufügen von Textschatten mit CSS3 - Dummys

Teil von Dreamweaver CS6 Für Dummies Cheat Sheet

In Dreamweaver CS6 können Sie Ihre Designs verbessern und Ihren Seiten mehr Tiefe verleihen, indem Sie CSS3-Regeln für Textschatten hinzufügen. neueste Web-Technologie. Durch das Hinzufügen von Textschatten können Sie Ihre Wörter leichter lesen, besonders wenn Ihr Design einen komplexen Hintergrund hat oder wenn Ihre Hintergrund- und Textfarben keinen Kontrast haben.

Kredit: Paul Gual, istockphoto. com

Dreamweaver CS6 unterstützt CSS3-Textschatten, wenn Sie den Bereich "Eigenschaften" im Bedienfeld "CSS-Stile" verwenden. Sie können Klassen- oder ID-Stile mit Textschatten erstellen und vorhandenen HTML-Elementen Textschatten hinzufügen, indem Sie einen Tagstil definieren, z. B. den Stil der Überschrift 1, der im Bild verwendet wird.

Der CSS3-Code, der diesen Textschatten erzeugt, ist

h1 {text-shadow: 2px 2px 3px # 000;}

Die Zahlen im Code geben an, dass der Textschatten um 2 Pixel nach rechts und 2 Pixel unterhalb des Textes mit einer 3-Pixel-Unschärfe. Darüber hinaus wird der Schatten mit der Farbe Schwarz erstellt, die durch den abgekürzten hexadezimalen Farbcode # 000 angegeben wird.

Beim Erstellen von Regeln für Textschatten können Sie bis zu vier Werte angeben:

• Horizontal und vertikal: Die ersten beiden Zahlenwerte sind erforderlich und legen die horizontalen und vertikalen Offsets fest - die Entfernung Der Schlagschatten erstreckt sich unter dem Text (horizontal) und rechts vom Text (vertikal).

• Weichzeichnungsradius: Der dritte Wert gibt die Unschärfe im Schatten an. Wenn Sie keinen Weichzeichnungsradius angeben, ist der Standardwert 0, wodurch der Schatten als Volltonfarbe angezeigt wird.

• Farbe: Der vierte Wert gibt die Farbe des Schattens an und kann mit einem hexadezimalen Farbcode oder einem RGBa-Farbcode definiert werden.

Sie können einen Textschatten hinzufügen, indem Sie den Bereich "Eigenschaften" unten im Bedienfeld "CSS-Stile" verwenden, wie im Bild gezeigt. Gehen Sie dazu folgendermaßen vor

1. Klicken Sie auf den Link Eigenschaft hinzufügen auf der linken Seite des Fensters CSS Styles Property.

2. Geben Sie den Namen der CSS3-Stilregel, den Textschatten ein, oder wählen Sie die Stilregel aus der Dropdown-Liste aus.

   Nachdem der Name auf der linken Seite erscheint, erscheint ein kleiner Pfeil auf der rechten Seite.

3. Klicken Sie, um den Pfeil rechts neben dem Textschatten auszuwählen.

   Eine Box wird angezeigt.

4. Geben Sie die X- und Y-Versatzwerte, den Weichzeichnungsradius und die Farbe ein.