Jakob Montrasio Net.

CSS Text Schatten hinzugefügt.

/ / 26. Februar 2008 / / Internet, Technik

Ich optimiert um den Blog einige mehr und beschlossen, einen schönen Text-Schatten in die Schlagzeilen. Wenn Sie einen 3.-Welt-Browser haben, werden Sie wahrscheinlich wont es aber, es ist eine Safari nur CSS Sache.

Jetzt Verstehen Sie mich nicht falsch, ich habe mich mit Firefox für einige Jahre, die Hölle, wir veranstalten ein Release-Party für sie wieder ein, uhm, 2003? für den ersten Release-Heidelberg, Deutschland.

Aber, wenn der digitale Freund Ben eingeführt mir die Safari-Plugin Saft, ich hab's ausprobiert und geklebt mit ihr, nie wieder suchen. Safari & Saft zusammen Kick Fox wirklich in die Nüsse. Es hat so viele Features, check it out here. Es kostet in der Nähe nichts für all die genialen Features angeboten und ist ein "must-have" für ernsthafte Blogger und Surfer.

Die Sache ist, dass Safari Webseiten macht sich so viel besser, indem Sie eine Art Anti-Aliasing auf den Text. Wenn Sie surfen viel und lese viel es so viel angenehmer.

Wie auch immer, zurück zu den CSS. Wie nutzen Sie die CSS-Deklaration in Ihrem Stylesheet?

Hier sind einige Beispiele.

Sie können nur lesen Sie diese mit Safari.

Vor Absatz nutzt den folgenden Text-Schatten-Einstellungen: text-shadow: # 000 0px 0px 3px; color: # FFF;.

Wie wäre es mit einem roten Schatten?

Vor Absatz nutzt den folgenden Text-Schatten-Einstellungen: text-shadow: # F00 2px 2px 2px;.

Elegant Überschrift Schatten benötigt?

Vor Absatz nutzt den folgenden Text-Schatten-Einstellungen: text-shadow: # aaa 1px 1px 1px;.

Hier sind einige Schatten über dem Text ...

Vor Absatz nutzt den folgenden Text-Schatten-Einstellungen: text-shadow: # 666 0px-5px 1px;.

Blue Schatten weit weg? Kein Problem!

Vor Absatz nutzt den folgenden Text-Schatten-Einstellungen: text-shadow: # 00F 15px 15px 3px;.

Letztes Beispiel: Extreme verwischt Schatten!

Vor Absatz nutzt den folgenden Text-Schatten-Einstellungen: text-shadow: # 6f0 3px 3px 5px;.

Nizza, nicht wahr?

Es ist ganz einfach anzuwenden, in der Regel haben Sie vier Werte, um Ihre Schatten:

1. Zuerst sollte man die Farbe des Schattens. # F00 für Rot, # 0f0 für grün und so weiter. Jede Hex-Farbe ist möglich.

2. Jetzt können Sie den horizontalen Abstand zum Text (die x-Achse), 5 Pixel zum Beispiel (5px). Kann eine beliebige Zahl, schlage ich vor, mit px hier.

3. Dann wird der Abstand relativ zum Text (der y-Achse), 3 Pixel zum Beispiel (3px).

4. Die letzte Einstellung ist der Betrag, der Unschärfe, dass der Schatten haben soll. Ein Wert von 0px gibt den Schatten keine Unschärfe auf alle, wenn eine Einstellung über 5px um die Schatten völlig unlesbar. Ich schlage vor, eine Einstellung zwischen 1px und 3px.

Oh, und Safari ist auch verfügbar für Windows jetzt an, wenn Sie wollen, es zu versuchen ... Download der Beta hier!

Wie Sie sehen können (wenn Sie mit Safari), dies ist eine coole Erklärung und sehr nützlich für Schlagzeilen Styling und ohne solche Bilder zu verwenden. Wenn nur andere Browser unterstützen würde es auch ...

Mal sehen, was die Zukunft bringt!