Wie Buchdruck mit CSS

Buchdruck ist ein Texteffekt etwas wie Prägung in umgekehrter Reihenfolge. Während die Prägung lässt Text erscheinen, als ob es von der Seite steigt, gibt Buchdruck Text ein "gedrückt" aussehen. Sie können diesen Effekt anwenden, von Text mithilfe von Cascading Stylesheet (CSS)-Code, so lange, wie die Farben für Hintergrund, Text und Schatten übereinstimmen. Sie geben dem Text eine dunklere Farbe als Hintergrund und einen hellen Schlagschatten anwenden. In allen Browsern aber Internet Explorer die Eigenschaft "Text-Shadow" kann Ihnen den Tropfen Schatten musste den Buchdruck-Effekt zu erstellen.

Anweisungen

1 Wählen Sie "Start" auf der Windows-Taskleiste, und geben Sie den Namen eines Code-Editor oder Notepad in zu Ihrem Suchfeld. Drücken Sie "Enter", um das Programm zu laden. Klicken Sie auf "Datei" auf der oberen Symbolleiste und öffnen Sie die HTML-Datei für die Webseite, die Sie bearbeiten möchten. Wenn Ihre Webseite eine externe CSS-Datei verwendet, öffnen Sie, die als gut.

2 Suchen Sie den Text auf der Webseite der Buchdruck-Effekt angewendet werden soll. Achten Sie auf den Satz von HTML-Tags, die den Text umgibt. Suchen Sie nach einer Klasse oder ID-Attribut im-Tag. Hier ist ein Beispiel für Text innerhalb der Tags mit Klasse und ID-Attribute:

< h2 Klasse = "Buchdruck" Id = "Myname" > John Doe < / h2 >

Fügen Sie ein ID-Attribut, wenn Sie den Buchdruck auf nur ein Stück Text anwenden möchten. Verwenden Sie das Class-Attribut, wenn auf mehrere Abschnitte des Textes angewendet werden soll.

3 Überprüfen Sie, ob Ihre Webseite eine dunklere Farbe für den Text als Hintergrund direkt hinter dem Text angezeigt wird. Sie können überprüfen Sie die Seite in einem Webbrowser oder sehen Sie in der CSS-Code, vor allem, wenn Sie im hexadezimalen Codes verwendet versiert sind, um Farben zu erstellen. Der CSS-Code in Ihre externe CSS-Datei Wenn du benutzt, ansonsten check "< Stil >" Tags im Kopf einer HTML-Datei.

4 Schreiben Sie einen CSS-Selektor zum "auswählen" Chunk oder Teile des Textes den Buchdruck-Effekt geben soll. Wählen Sie durch den Klassennamen, wenn auf mehrere Abschnitte des Textes, angewendet werden sollen wie folgt:

{.letterpress}

Präfix ein Klassenname mit einem Punkt. Schreiben Sie Ihre Auswahl für eine ID wie folgt:

{#myname}

5 Legen Sie die Eigenschaft "Text-Shadow" für Ihren Text Buchdruck Effekt erzeugen. Diese Eigenschaft erfordert vier Werte, die Wirkung, einschließlich der oberen und linken Offsets, ein Weichzeichnenradius für Schatten und eine Farbe zu machen. Hier ist ein Beispiel:

{.letterpress}

Text-Schatten: 1px 1px 2px #eeeeee;

}

Der obige Code verschiebt die Schatten ein Pixel vom oberen und ein Pixel von Links. Der Schatten bekommt zwei Pixel Weichzeichnenradius, es etwas aufweichen. Dieser Code gibt dem Schatten eine graue Farbe, aber wählen Sie eine sehr helle Farbe, die die Hintergrundfarbe hinter dem Text entspricht.

Tipps & Warnungen

• Erhalten Sie weitere feine Kontrolle über das Aussehen eines Textes, Schatten mithilfe eines RGBa-Farb-Codes anstelle von hexadezimal. Das Format ist "rgba(x,x,x,1);", wobei jedes "X" steht, roten, grünen und blauen Farbe in dieser Reihenfolge, darüber hinaus eine Transparenzwert zwischen null und eins.
• Die Eigenschaft "Text-Shadow" ist nicht kompatibel mit Internet Explorer. Entweder können die Web-Seite ohne den Effekt wie ein "graceful Degradation" anzeigen oder verwenden eine Kombination aus Bildern, JavaScripts und einem separaten Stylesheet Fallback zu implementieren.