CSS3 Web Page Production Example: The realization of Web page text gradient inner glow projection

Article Introduction: Pure CSS3 text gradient inner glow projection effect.

The former has done a CSS3 text effect, involving CSS3 projection, gradient, mask, pseudo class and other knowledge points, now write down the design ideas, for reference only. Send an effect chart everyone look first:

projection Shadow

Box-shadow

Generally we are using CSS3 box-shadow to achieve box projection, with Text-shadow to achieve text projection, Box-shadow Set square box projection, with raidus words can make the box to produce rounded corners, looks very smooth comfortable, the general way of writing is this:

-moz-box-shadow:1px
		1px
		5px
		#000;

1px (horizontal offset) 1px (vertical offset) 5px (shaded feather) #000 (color);

When the offset is negative, it shifts in the opposite direction, so try to understand that there is no mapping.

This is the general projection effect, if the inner shadow, then add a "inset" attribute, written as follows:

-moz-box-shadow:<strong>inset</strong>
		1px
		1px
		5px
		#000;

This becomes a PS inside the shadow, the effect is very good, very practical, if the need for internal light-emitting effect, the background color depth, light projection colors, this will feel is luminous, and background color deep, projection color shallow, so that looks like a projection;

Text-shadow

Text is created using Text-shadow to create shadows, and can follow the contour projection of the text as follows:

text-shadow:2px
		2px
		1px
		#000;

If you use Box-shadow, the effect is this:

will be based on the box to put the text container projection (I set the width of the container 200px, background is not set color transparent), will not follow the text contour projection;

However, Text-shadow has no inset attribute and cannot easily implement text projection as Box-shaow.

Inner Glow/inner projection

One layer, the General PS processing text effect is a layer of peeling , CSS3 is similar, so first from the text of the light start:

I wrote such a page interview inside the glow, specifically you can download this code page to see:http://dl.dbank.com/c0ymzm8hbk

The effect chart is as follows:

Internal projection effect is very obvious, as long as a little transformation is inside the glow, the following is the principle of implementation:

Since in a div layer above can not achieve the inner projection, then use a few layers, but do not want to add extra tags in html, so naturally think of the pseudo class, so I used a: After, content inside the same as the div inside the text, The content Text style will be unified with the original DIV style

I put the. Text layer relative positioning,. Text:after absolute positioning on top of it, because the style is the same, so that the text is completely overlapping, and then use Text-shadow to do the effect, the color of the text itself is higher than the projection , as shown:

Its own text color is physical, feeling processing will be more trouble, so I use RGBA to hide it, set the text of the alpha to 0 (can also use the transparent attribute to set the text transparent), here with Rgba is because I just want to hide the color layer of the text itself,  If you use opacity, the whole layer will disappear; so I use Color:rgba (0,0,0,0); To achieve the effect, written in the words of. Text is to hide the text itself color layer, At the same time, Text:after will inherit this hidden attribute, if you simply want to hide it. Text:after, it's written in. Text:after, so the color layer of the text itself is preserved; text with text-shadow:0px 0px   0px #000000; Projecting a not-offset-not-feathering entity projection to play the background;

For the. Text:after projection layer, you need to refer to the PS Feather selection of knowledge, in the feather image, is based on the selection of the boundaries of the center, feather on both sides, if the feather value of 10px, then the left and right 5px, Then the 10px pixel range, centered on the selection boundary, slows the transition from transparency to full transparency, as shown in figure:

The center is red, the background is yellow, when the original opaque red area also appears translucent state and the background yellow blend orange, but say so many feather what is the use?

Useful, what happens if we set the background color dead to a region and the upper layer is feathered? Look at the PS picture below and you should understand:

Below is a "canton" of Black Plain text, and then I copy more than one layer out of the grid and then Gaussian blur it, the result of the blur layer through the following see some of the black plain text and the above Red translucent area of fusion, visually a bit of the feeling of inner shadow . This is what I realized. The principle of pure CSS3: a . text text layer, a. Text:after cascade on the above projection produces the inner glow visual illusion , this is why to set the text color transparent reason, if the text itself has color, then will block translucent , so that the background color is blocked, and normal projection is no different. But this method is flawed, and very lethal, that is, feather more out of the boundary will have a feather red, if the projection red to white, so with the background fusion, the effect is not said, but if the difference with the background color is too obvious, so disgusting, but can be adjusted to become "external light-emitting" effect, there is nothing.

Gradient Gradient

The basic interpretation of the light is complete, the following next gradient, in fact, I have mentioned in the previous blog

CSS3 Gradient http://blog.sina.com.cn/s/blog_74d6cedd0100q9o3.html and

CSS3 Painting crystal texture button http://blog.sina.com.cn/s/blog_74d6cedd0100qcdn.html

It mainly notes the basic style of the gradient, the use of masks, interested in can be seen through the link.

But the gradient color generally only applies to the background color, is the square square box those, on the text does not work, there are many articles on the web, and I use the mask to do the gradient, but if the use of only the mask to do, the color will be more monotonous, only the black and white adjustment, so that the transition of the gradient is more blunt, so I used Cascade the way to mask a part of the layer to achieve the color fusion between the way to achieve the gradient , so I even: before are used, still use. Text background,. Text:after Mask implementation gradient,. Text: Before to enhance the gradient effect, while implementing the inner glow, you can download this code page to see:http://dl.dbank.com/c00ya6av4u

The specific approach is. Text set up a high light background #c60000,.text:after with a mask, from top to bottom from transparent to opaque pull vertical gradient mask, color set the dark point of the #ea0000, and then. Text:before Settings Color:rgba (0,0,0,0)  ;  Transparent because to do the inner glow, then set the projection to text-shadow:0px 0px 5px rgba (110,0,0,0.8); A deeper color #6e0000, with a bit of transparency so that the fusion effect will be better, adjust the inner glow effect, in which you will find that each layer has written Text-shadow, but the radius is very small, because the page text is serrated , so processing, There is a slight projection around the text that is feathering the boundary, it looks softer, has the effect of anti-aliasing , the end result is out, but because FF does not support masking mask so only browsers under the WebKit kernel can see the gradient effect, FF has no gradient effect, as shown:

There is no mask effect, so it is the top. Text:before color, but inside glow, projection these are still, the effect is still reluctantly acceptable, as for the tragedy IE do not mention it ...