Dreamweaver CS6: Hinzufügen von Text-Schatten mit CSS3

In Dreamweaver CS6, können Sie Ihre Entwürfe zu erweitern und Ihren Seiten mehr Tiefe verleihen, indem Textschatten mit CSS3 Regeln hinzufügen, die neuesten Web-Technologie. Textschatten Hinzufügen macht Ihre Wörter leichter zu lesen, vor allem, wenn Sie Ihr Design einen komplexen Hintergrund hat oder wenn Ihr Hintergrund und Textfarben fehlt Kontrast.

Dreamweaver CS6 bietet Unterstützung für CSS3 Text Schatten, wenn Sie den Bereich Eigenschaften im Bedienfeld CSS-Stile verwenden. Sie können Klasse oder ID Stile mit Text Schatten erstellen, und Sie können durch die Definition eines Tag-Stil, wie die Überschrift 1 im Bild verwendeten Textschatten zu bestehenden HTML-Elemente hinzufügen.

Der CSS3-Code, der erzeugt, dass der Text Schatten

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

Die Zahlen im Code angeben, dass der Text Schatten 2 Pixel nach rechts und 2 Pixel unter dem Text mit einem 3-Pixel-Unschärfe erstrecken sollte. Darüber hinaus wird der Schatten mit der Farbe Schwarz, angegeben durch die abgekürzte hexadezimalen Farbcode # 000 erstellt.

Wenn Regeln für Textschatten erstellen, können Sie bis zu vier Werte angeben:

  • Horizontal und vertikal: Die ersten beiden Zahlenwerte sind erforderlich, und die horizontalen und vertikalen Versatz angeben - den Abstand der Schlagschatten unter dem Text (horizontal) und auf der rechten Seite des Textes (vertikal) erstreckt.

  • Blur Radius: Der dritte Wert gibt die Menge der Unschärfe in den Schatten. Wenn Sie nicht Verwischradius sind, ist der Standardwert 0, was der Schatten als eine feste Farbe erscheinen lässt.

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

Sie können an der Unterseite des Bedienfelds CSS-Stile einen Textschatten mit dem Eigenschaftenfenster hinzufügen, wie in der Abbildung dargestellt. Gehen Sie dabei folgendermaßen vor:

  1. Klicken Sie auf die Eigenschaft hinzufügen Link in der linken Seite des CSS-Stile Objektbereich.

  2. Geben Sie die CSS3 Stil Regelnamen, text-shadow, oder wählen Sie die Art der Regel aus der Dropdown-Liste.

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

  3. Klicken Sie auf den Pfeil rechts von Text-Schatten zu wählen.

    Eine Box erscheint.

  4. Geben Sie die X- und Y-Offsets, Verwischradius und Farbe.

Ähnliche

Menü