CSS3 Shadow Effects
text-shadowbox-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;
}
CSS3 Text
text-overflowword-wrapword-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
- Web fonts allow Web designers to use fonts that are not installed on the user's computer.
- 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.
- Your "own" fonts are defined within the CSS3
@font-facerule.
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.