Text Effects and colors

css3.0 New Color Mode

(1) Rgba color mode R red     red       0-255g green      0-255b Blue   0-255a Alpha transparency     0-1

Example: Transparent background, opaque text
Issue: note border color transparency is problematic

(2) HSL color mode '

(2) HSL color mode ' H  hue hue Any value s  saturation saturation 0%-100%l  lightness brightness  0%-100%

　　

text Shadow: Text-shadow

Syntax: text-shadow:x y blur color, ...

Parameters:
x transverse offset Y vertical offset
Blur blur distance color shadow color text Shadow app

Simplest usage: text-shadow:2px 2px 4px Black Shadow overlay: text-shadow:2px 2px 0px red, 2px 2px 4px Green; Shadow overlay--first renders the back, then renders the front. Text Shadow If you add a lot of layers, will be very card ...

　　

Examples of several text shadows:
Stacked text:

/** Stacked Text: ***/

  . box1{color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red; }  <div class= "Box1" > Our home </div>

Browser Display effect

　　　　　　

Halo effect:

/** halo effect: ***/

. Box2{color:white; 　　　　font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 15　　0px #ff00de; }

<div class= "Box2" >boss, Hello! </div>

Browser Display effect:

　　　　　　

Flame text:

  /** Flame text: **/  . box3{text-shadow:0 0 20px #fefcc9, 10px-10px 30px #feec85, -20px-20px 40px #ffae34, 20px-40px 50px # ec760c, -20px-60px 60px #cd4606, 0-80px 70px #973716, 10px-90px 80px #451b0e; Font-family:verdana, Geneva, Sans-serif;  font-size:100px;  Font-weight:bold; Color:white;  }

<div class= "Box3" >hello! </div>

Browser Display effect:

　　　　　　

------------------------------------------------------------------
Text strokes:

Text stroke Syntax:-webkit-text-stroke: Width color

/**eg: Text Stroke **/
<style>.box{font-size:100px; text-align:center;color:red;-webkit-text-stroke:2px #000;} </style>
Browser Display effect:
　　　　　　　
New text Features:
Direction Defining text arrangement (fully compatible)
RTL is arranged from right to left
Ltr from right to left
Note to use with the Unicode-bidi piece
/** Text Flow Direction */
<style>.box{width:200px;      border:1px solid #000;      Direction:rtl;  Unicode-bidi:bidi-override;       transition:0.5s;/* put the mouse pointer over the DIV element to achieve the effect */
-moz-transition:0.5s; /* Firefox 4 */
　　  -webkit-transition:0.5s; /* Safari and Chrome */
-o-transition:0.5s; /* Opera */



<p class= "box" > mouse pointer over to see effects </p>
Browser Display effect:
---mouse pointer moves to text effect
　　
Note: The  transition  property is a shorthand property for setting four transition properties:
　　　　
Note: Always set the transition-duration property, otherwise the duration is 0, and there is no transition effect.

Text-overflow defines how the omitted text is handled:
Clip No ellipsis
Ellipsis ellipsis (note to use with Overflow:hidden and White-space:nowrap)
/* defines how the omitted text is handled **/
<style>.box{width:100px;font:12px/30px;         border:1px solid #000;         White-space:nowrap; Overflow:hidden; text-overflow:ellipsis;     } </style><p class= "box" > Text-text text-text text </p>
Browser Display effect:
　　　　
Custom text:
Format:
Convert font format to generate compatible code Http://www.fontsquirrel.com/fontface/generator
Text Effects and colors