Pure CSS3 text gradient luminous projection Effect

Today, the comrades in the group discussed the luminous effect in css3. They also studied it and wrote an effect, involving some knowledge points such as css3 projection, gradient, mask, and pseudo. Now they wrote down their design ideas, for reference only. Let's talk about it first: Strong & fire & net

Liehuo.net

Generally, we use box-shadow of css3 to implement box projection, text-shadow to implement text projection, box-shadow to set square box projection, and raidus to generate rounded corners for the box, it looks smooth and comfortable. The general method is as follows: strong/fire/Net

Liehuo.net

Veryhuo.com

1px (horizontal offset) 1px (vertical offset) 5px (shadow feathers) #000 (color); veryhuo.com

If the offset is a negative number, it is offset to the inverse direction. Try it and you will understand it. No texture is shown here. Liehuo.net

This is a general projection effect. If it is an inner shadow, add an "inset" attribute as follows:

Liehuo.net

Liehuo.net

Veryhuo.com

In this way, it becomes the inner shadow in PS. The effect is very good and practical. If you need the inner luminous effect, the background color is deep, and the projection color is light, it will feel like light, the background color is deep and the projection color is light, so it looks like a projection. bkjia.com

However, in the group, we are talking about the light in the projection of the text. The above is just mentioned by the way. The following is the question:

Veryhuo.com

Text uses text-shadow to generate shadow, and can follow the outline projection of the text when it is generated, as shown below:

Liehuo.net

Veryhuo.com

If box-shadow is used, the effect is as follows: liehuo.net

Liehuo.net

Liehuo.net

It will be projected based on the box in the text container (I set the container width 200px, the background is not set to color transparent), will not follow the text contour projection, the effect is not what we want;

Strong & fire & Network

However, text-shadow does not have the inset attribute, Which is tricky. How can we implement text projection and text gradient? Liehuo.net

Generally, the PS processing text effects are separated layer by layer, starting with the text glow: liehuo.net

I wrote such a page to shine in the interview. The Code is as follows: liehuo.net

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
Strong & fire & Network
 





Tip: the code can be modified before running!
Bkjia.com
 

Veryhuo.com


 
 
 
  
Three pages in total:
 
  
Previous Page
 
  
1
 
  
2
 
  
3
 
  
Next Page