CSS3 classic tutorial series: CSS3 shadow

The previous article in the "CSS3 getting started tutorial series" describes in detailBorder-radiusUsage. Let's take a look at this article.CSS3To achieve the specific usage of the text-shadow attribute of the rounded corner effect. In the past, shadow effects were generally made into images and can be directly used with CSS3.Text-shadowProperties to implement shadow. This attribute can have two functions: Shadow and fuzzy subject. In this way, the text texture can be added without the need for images.

Articles you may be interested in

• Recommended articles for Web developers and designers
• 20 brilliant CSS3 feature application demonstrations
• 35 amazing CSS3 animation demos
• 12 beautiful CSS3 button implementation schemes are recommended.
• The Ultimate Collection of 24 practical CSS3 tools

 

Text-shadow has appeared in CSS2, but is abandoned in CSS 2.1.CSS3The version is retrieved again. This shows that the text-shadow attribute deserves the attention of our front-end staff, and among the many attributes of CSS3, I personally thinkText-shadowThe most widely used attribute, as our front-end staff, I think it is necessary to learn and master this attribute.Text-shadowAttribute.

Basic Syntax:

Text-shadow: none | <length> none | [<shadow>,] * <shadow> or none | <color> [, <color>] * That is: text-shadow: [Color X axis (X Offset) Y axis (Y Offset) Blur radius (Blur)], [color X axis (X Offset) Y axis (Y Offset) Blur radius (Blur)]... or text-shadow: [X axis (X Offset) Y axis (Y Offset) Blur radius (Blur) Color], [X axis (X Offset) Y axis (Y Offset) blur radius (Blur) Color]...

Value range:

<Length>: length value, which can be a negative value. Used to specify the shadow extension distance. X Offset indicates the horizontal Offset and Y Offset indicates the vertical Offset.

<Color>: Specifies the shadow color or rgba transparent color.

<Shadow>: Specifies the Blur value of a shadow. It cannot be a negative value. It is used to specify the distance of the blur effect.

As shown in:

　　

Simple Description:

You can apply one or more sets of shadow effects to an object by commas (,), as shown in the preceding syntax. In text-shadow: X-Offset Y-Offset Blur Color, X-Offset indicates the horizontal Offset of the shadow. If the value is positive, the shadow is shifted to the right. If the value is negative, the shadow is Offset to the left. Y-Offset refers to the vertical Offset distance of the Shadow. If the value is a positive value, the shadow is Offset downward. If the value is a negative value, the shadow is shifted to the top; blur refers to the Blur degree of the Shadow. Its value cannot be a negative value. The greater the value, the blurrier the shadow. Otherwise, the clearer the shadow. If you do not need shadow Blur, you can set the Blur value to 0; color refers to the shadow Color, which can be rgba.

Browser compatibility:

　　

Let's look at an instance. First, give all the demos a public style and Class Name:

. Demo {background: #666666; width: pixel PX; padding: 30px; font: bold 55px/100% "", "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans; color: # fff; text-transform: uppercase ;}

Next, we add our own specific styles to each Demo, as shown below:

.demo1 {   text-shadow: red 0 1px 0;}

　　

The effect is good, but we have a headache that IE does not support the text-shadow effect, but in order to be compatible with this problem, we have to use the filter: shadow ). Filter: the shadow filter works similar to dropshadow. It can also use objects to produce shadow effects. The difference is that shadow can produce an accesskey effect and use shadows for smoother implementation.

Filter Syntax:

E {filter: shadow (Color = Color value, ction = value, Strength = value )}

E is the element selector, and Color is used to set the shadow Color of the object. Direction is used to set the main Direction of the projection. The value 0 indicates zero (indicating the upward Direction), 45 indicates the upper right, and 90 indicates the right, 135 is lower right, 180 is lower, 225 is lower left, 270 is left, 315 is upper left; Strength is Strength, similar to the blur value in text-shadow.

No matter the effect of IE, I personally think that text-shadow is well used and can produce very good results like photoshop, here I will list some nice-looking instances for your reference.

Note: This public style must be added to all the demos below:

. Demo {background: #666666; width: pixel PX; padding: 30px; font: bold 55px/100% "", "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans; color: # fff; text-transform: uppercase ;}

Result 1: Glow and Extra Glow effect (NEON effect)

.demo2 {  text-shadow: 0 0 20px red;}

　　

For the glow effect, we set a relatively large blur radius to increase the glow effect. You can change different blur radius values to achieve different effects, you can also add several different radius values to create different shadow effects. The following figure shows the NEON effect.

.demo3 {  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;}

　　

Effect 2: Apple Style Effect

.demo4 {  color: #000;  text-shadow: 0 1px 1px #fff;           }

　　

Effect 3: Photoshop Emboss Effect

.demo5 {  color: #ccc;  text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;}

　　

Effect 2 and effect 3: My friends who want to use photoshop must be familiar with it. Is it similar to the projection and relief effects in photoshop. When using these two effects, you must note that the Blur value must be set to 0, so that the text does not have any blur effect and is mainly used to increase its texture, you can also change different lighting angles to make different effects like in photoshop. Here I will not give an example. Interested friends can try it on their own.

Result 4: Blurytext Effect

.demo6 {  color: transparent;  text-shadow: 0 0 5px #f96;}

　　

When using text-shadow to blur a text, you must set the foreground color of the text to transparent. If the Blur value is greater, the effect becomes more vague. Second, we do not set any direction offset value. If you combine the previous photoshop emboss effect, you can wait for different effects. Remind opera that the browser does not support this effect.

We can combine the previous Photoshop Emboss effect to produce a blur relief effect:

.demo7 {  color: transparent;  text-shadow:0 0 6px #F96, -1px -1px  #FFF, 1px -1px  #444;}

　　

Effect 5: Inset text effect

.demo8 {  color: #566F89;  background: #C5DFF8;  text-shadow: 1px 1px 0 #E4F1FF;}

　　

Note that the foreground color of the text is darker than the background color, and the shadow color is a little brighter than the background color. This step is very important. It may look strange if the shadow color is too bright, if it is too dark, no effect is displayed. The specific implementation may look at the creation of stylizedweb. The Inset effect is the shadow effect of text and a common effect. The shadow effect is a subtle highlight effect given by the same small offset.

Effect 6: Stroke text effect

.demo9 {  color: #fff;  text-shadow: 1px 1px 0 #f96,-1px -1px 0 #f96; }

　　

Compared with Photoshop, the stroke effect is much less effective than that of Photoshop, and there are breakpoints. However, sometimes we can try to achieve a special stroke effect. It mainly uses two shadows, the first projection to the top left, and the second projection to the right, you need to note that we do not use fuzzy values to create the shadow effect of the stroke.

Effect 7: 3D text effect

.demo10 {  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);}

　　

We have changed the Projection Direction to produce another 3D text effect:

.demo11 {  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);}

　　

The principle of 3D text effects is like Photoshop. We copy multiple layers at or below the text, and move each layer to the upper left or lower right to a 1px distance, to produce 3D effects. At the same time, the more layers we have, the heavier it is. If you use text-shadow to create a shadow, Multiple shadows are used, and the shadow color is set to the same, the rgba effect is better.

Effect 8: Vintge/Retro text effect:

.demo11 {  color: #eee;  text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;}

　　

The text effect of Vintage retro is composed of two text shadows. Note that the first shadow color is the same as the background color, and the text foreground color is the same as the second shadow color.

Effect 9: Anaglyphic text effect

.demo13 {  color: rgba(255, 179, 140,0.5);  text-shadow: 3px 3px 0 rgba(180,255,0,0.5);}

　　

The text effect of anaglyphic plays a complementary effect, thus producing a three-dimensional image. The effect is a combination of the text shadow re-used by css and the rgba color of the text foreground. Use the rgba color on the foreground and shadow of the text to make the underlying text visible through the shadow.

I listed nine instances with different effects above. Of course, you can change various methods to produce some special effects, and once again confirm that the text-shadow in CSS3 is not powerful, I hope you will like this property and use it better. Although IE does not support it now, do not be afraid to use CSS3, because we will need to master these new technologies sooner or later.

Articles you may be interested in

• 20 brilliant CSS3 feature application demonstrations
• CSS3 Media Queries implement responsive design
• CSS3 Tutorials: CSS3 rounded corners
• CSS3 Tutorials: CSS3 RGBA details
• The Ultimate Collection of 24 practical CSS3 tools

 

Link to this article: CSS3 getting started Tutorial: CSS3 shadow details (from: W3CPLUS)

Source: Dream sky ◆ focus on Web Front-end development technology ◆ share Web design resources