CSS3 笔记三（Shadow/Text/Web Fonts）

CSS3 Shadow Effects

• text-shadow
• box-shadow

1> text-shadow

• The text-shadow property adds shadow to text.
• This property accepts a comma-separated list of shadows to be applied to the text.

syntax

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

Values

Value	Description
h-shadow	Required. The position of the horizontal shadow. Negative values are allowed
v-shadow	Required. The position of the vertical shadow. Negative values are allowed
blur-radius	Optional. The blur radius. Default value is 0
color	Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values
none	Default value. No shadow
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

Example

h2 {
    text-shadow: 0 0 3px #FF0000;
}
h1 {
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
} 

2> box-shadow

• The box-shadow property attaches one or more shadows to an element

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

Values

Value	Description
none	Default value. No shadow is displayed
h-shadow	Required. The position of the horizontal shadow. Negative values are allowed
v-shadow	Required. The position of the vertical shadow. Negative values are allowed
blur	Optional. The blur distance
spread	Optional. The size of shadow. Negative values are allowed
color	Optional. The color of the shadow. The default value is black.
inset	Optional. Changes the shadow from an outer shadow (outset) to an inner shadow
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

Example

div {
    box-shadow: 10px 10px 5px grey;
} 

text-shadow demos

CSS3 Text

• text-overflow
• word-wrap
• word-break

1> Text-overflow

text-overflow: clip|ellipsis|string|initial|inherit;

Values

Value	Description
clip	Default value. Clips the text
ellipsis	Render an ellipsis ("...") to represent clipped text
string	Render the given string to represent clipped text
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element

2> word-wrap

• The word-wrap property allows long words to be able to be broken and wrap onto the next line.

syntax

word-wrap: normal|break-word|initial|inherit;

Value	Description
normal	Break words only at allowed break points
break-word	Allows unbreakable words to be broken

3> word-break

The word-break property specifies line breaking rules for non-CJK scripts.

syntax

word-break: normal|break-all|keep-all|initial|inherit;q

Value	Description
normal	Default value. Break words according to their usual rules
break-all	Lines may break between any two letters
keep-all	Breaks are prohibited between pairs of letters

Web Fonts

1. Web fonts allow Web designers to use fonts that are not installed on the user's computer.
2. When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.
3. Your "own" fonts are defined within the CSS3 @font-face rule.

Different Font Formats

1> TrueType Fonts (TTF)
2> OpenType Fonts (OTF)
3> The Web Open Font Format (WOFF)
4> The Web Open Font Format (WOFF 2.0)
5> SVG Fonts/Shapes
6> Embedded OpenType Fonts (EOT)

Example

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

div {
    font-family: myFirstFont;
} 

Tip: Always use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE.