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

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

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

ValueDescription
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

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

text-shadow demos

CSS3 Text

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

1> Text-overflow

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

Values

ValueDescription
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;
ValueDescription
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
ValueDescription
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

1 @font-face {
2     font-family: myFirstFont;
3     src: url(sansation_light.woff);
4 }
5 
6 div {
7     font-family: myFirstFont;
8 }

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

posted @ 2016-01-01 13:37  提佰萬  阅读(197)  评论(0)  编辑  收藏  举报