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 * *, when the original opaque red area also appeared translucent state and the background of the fuse is orange, but what is the use of so many feather?

Useful, what happens if we set the background color dead to a region and the upper layer is feathered? Look at this ps** 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.