Home >Web Front-end >HTML Tutorial >css3 text-shadow_html/css_WEB-ITnose
css3 text-shadow_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:301599browse
1. text-shadow
text-shadow: h-shadow v-shadow blur color;
text-shadow: 水平阴影 垂直阴影 模糊半径 color;
h-shadow and v-shadow can take negative values, blur can only take positive values.
2. Use1. Basics
<style type="text/css">.blur{ text-shadow:0 0 5px red;/*阴影无偏移*/}.vh{ text-shadow:1px 1px 0 red; /*阴影偏移1px 1px*/}.white{ color: white; text-shadow:2px 2px 4px black;}</style><body><h1 class="blur">霓虹灯效果的文本阴影</h1><h1 class="vh">文本水平垂直阴影效果</h1><h1 class="white">白色文本阴影效果</h1></body> 2. Relief effect
To use the relief effect, the blur value must be Set to 0 to add texture.
<style type="text/css">.relief{ color: #ccc; text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;}</style><body><h1 class="relief">浮雕效果</h1></body> 3. Blur effect
Use text-shadow to create a blur effect. Note: Set the foreground color of the text to transparent. That is, transparent, the larger the blur value, the blurr the effect.
<style type="text/css">.relief{/* color: #ccc;*/color: transparent; text-shadow: 0 0 5px #f96;}</style><body><h1 class="relief">模糊效果</h1></body>
4. Concave effect
Note: The foreground color of the text is darker than the background color. The shadow color should be slightly lighter than the background color. This step is very important. If the shadow color is too bright, it will look strange. If it is too dark, it will have no effect.
The inset effect is a shadow effect of text, which is also a common effect and gives a subtle highlighting effect.
<style type="text/css">.inset{ color: #566F89; background: #C5DFF8; text-shadow: 1px 1px 0 #E4F1FF;}</style><body><h1 class="inset">内凹效果</h1></body> 5. Stroke effect
Principle: Use two shadows, one upper left and one lower right, without blur value .
<style type="text/css">.stroke{ background-color: #666666;color: #fff; text-shadow: 1px 1px 0 #f96,-1px -1px 0 #f96; }</style><body><h1 class="stroke">描边效果</h1></body> 6. 3D effect
The principle of application of 3D text effect is just like Photoshop, we copy below or above the text Multiple layers and move each layer 1px to the upper left or lower right to create a 3D effect. At the same time, the more layers we have, the thicker it will be. Instead of using text-shadow, you need to use multiple shadows and set the shadow color to the same color. Using rgba color for it will have a better effect.
<style type="text/css">.threeD { background-color: #666666; color: #fff; text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8),-6px -6px rgba(197, 223, 248,0.8);}</style><body><h1 class="threeD">3D效果</h1></body> 3. Resource link
http://www.cnblogs.com/lhb25/archive/2013/01/31 /css3-text-shadow.html
https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow