German translation of the "Web Style Sheets CSS tips & tricks"
Original version: http://www.w3.org/Style/Examples/007/text-shadow . html
Current - translated - Version: http://www.ich-lerne-css.de/Style/Examples/007/text-shadow.html
Translator: Frederick A.
Bookmark:
Dear readers of this document - please note that it is on this page is the translation of a W3C text.
The original text is copyrighted, please note the instructions noted in the original document. The rights to the translation are themselves solely with the translator. The translator thanks the following pages for their support: FS . For possible errors in translation can not be guaranteed, the only authoritative and legitimate document is the English original W3C.
comments will be marked as such and are also subject to the copyright of the translator. These are not part of the original English document.
Original version: http://www.w3.org/Style/Examples/007/text-shadow . html
Current - translated - Version: http://www.ich-lerne-css.de/Style/Examples/007/text-shadow.html
Translator: Frederick A.
Bookmark:
Dear readers of this document - please note that it is on this page is the translation of a W3C text.
The original text is copyrighted, please note the instructions noted in the original document. The rights to the translation are themselves solely with the translator. The translator thanks the following pages for their support: FS . For possible errors in translation can not be guaranteed, the only authoritative and legitimate document is the English original W3C.
comments will be marked as such and are also subject to the copyright of the translator. These are not part of the original English document.
Web Style Sheets CSS Tips & Tricks
TEXT WITH SHADOW
CSS3 offers a property 'text-shadow' a letter to assign a shadow. In its simplest form it looks like this:
{text-shadow: 0.1em 0.1em} h3 # 333
Here was a dark gray (# 333) shadow a little to the right (0.1em) and bottom (0.1em) - relative to the text - thrown. The result looks like this:
a text with shadow
(Until August 2005 do not support all browsers 'text-shadow' shown here should work at least with Safari and Konqueror..)
Unclear text SHADOW
The simplest form of 'text-shadow' has two properties: one color (as in the example above, # 333) and an indentation (offset) (0.1em 0.1em in the example above). The result is a sharp shadow with the specified offset. But the offset can be adjusted to produce a washed-out blurry shadow.
The value of the uncertainty is specified by an additional offset value. Here are two lines, one with a slight blur (0.05em) and one with a stronger setting (0.2em):
h3.a {text-shadow: 0.1em 0.1em 0.05em # 333} {
text h3.b -shadow: 0.1em 0.1em 0.2em black}
which is not very can and background color is a shade low to give a text more easily readable - The focus
is already much less focused
READABLE TEXT WHITE
If the contrast in the foreground. Here is an example of white text on a light blue background. There are
:
Without Shadow:; {color: white} h3 :
h3.a {0.1em 0.1em 0.2em black color text-shadow} and once with white shadow - one without no shadows.
With Shadow:
But here perhaps?
MULTIPLE SHADOW
you can use more than just a shadow. In reality, but looks quite strange:
h3 {text-shadow: 0.2em 0.5em 0.1em # 600, 0.3em 0.1em 0.1em
-# 060,
0.4em 0.3em 0.1em-# 006 }
strange strange strange ...
But with a well-placed dark and a light shade, the result can be quite useful:
h3.a {text-shadow:-1px-1px white 1px 1px # 333}
h3.b {text-shadow: white 1px 1px, 1px-1px # 333}-
shadow here as shadow
everywhere only shadows
The whole thing is a bit dangerous if your browser does' text-shadow 'known' property. Especially here are text - and background colors almost identical (# CCCCCC and # D1D1D1), so that you can see without a shadow almost nothing.
CONTOURS
The two shadows as you can still continue with something. With four letters of the shadow of the text can be a nice collar are assigned:
h3 {text-shadow:-1px 0 black, 0 1px black
1px 0 black, 0-1px black}
Still an Example to shadow
And One Good
that is not a perfect outline, and at this time (August 2005) is still debated whether a separate CSS property (or an extra paramater for 'text-decoration') should have to create better boundaries.
NEON GLOW
If you create a blurred shadow behind a text, ie with an offset value of 0, then we kind of an effect in a neon lamp produces. If you are not the glow of a single shadow is enough, you can repeat this procedure as often as:
h3.a {text-shadow: 0 0 0.2em} # 8F7
h3.b {text-shadow: 0 0 0.2em # F87, 0 0 0.2em} # F87
h3.c {text-shadow: 0 0 0.2em # 87F, # 87F 0 0 0.2em, 0.2em
0 0 # 87F}
I burn I burn
I Blaze lights loh
0 comments:
Post a Comment