CSS3 creates a text translucent reflection effect, and css3 text translucent reflection

CSS3 creates a text translucent reflection effect, and css3 text translucent reflection
/* ------------------ ITEYE pray for happiness (http://qidaoxingfu.iteye.com) original reprint please note -----------------*/

 

Effect. Ps, background line is the background of tulle, and has nothing to do with the effect of this article...

The html code is as follows:

Html code

1. <Div class = "content">
2. <H3 title = "professional skills"> professional skills
3. <Div class = "next"> <! -- Other content --> </div>
4. </Div>

There are two implementation methods:

1. box-reflect 
(For details about properties, see http://css.doyoe.com/properties → border → box-reflect)

Css code

1. . Content h3 {
2. Opacity: 0.7;
3. Font: 40px/50px 'Microsoft yahei ';
4. -Webkit-box-reflect: below 5px-webkit-gradient (linear, center top, center bottom, from (transparent), color-stop (0.2, transparent ), to (white ));
5. }

But the box-reflect attribute is only supported by chrome/Safari (for more information, see http://caniuse.com/#search=box-reflect)
FF and Opera are not compatible, so the following alternative solutions are available.



2. scaleY method of the transform attribute: 

Inspired by shenfei's blog and MDN's Demo source code
MDN Demo https://developer.mozilla.org/zh-CN/demos/detail/css3-reflection-effect/launch
Shenfei: Some high CSS3 image style http://www.qianduan.net/css3-image-styles.html

Css code

1. . Content h3 {
2. Position: relative;
3. Float: left;
4. Opacity: 0.7;
5. Font: 40px/50px 'Microsoft yahei ';
6. }
8. . Content h3: before {
9. Content: attr (title );
10. Position: absolute;
11. Z-index: 1;
12. Top: 100%;
13. Left: 0;
14. Height: 100%;
15. Width: 100%;
16. -Webkit-transform: scaleY (-1 );
17. }
19. . Content h3: after {
20. Content :'';
21. Position: absolute;
22. Z-index: 2;
23. Top: 100%;
24. Left: 0;
25. Height: 100%;
26. Width: 100%;
27. Background:-webkit-gradient (linear, center top, center bottom, from (rgba (255,255,255, 0), to (rgba (255,255,255, 1 ))); /* the others are omitted -_-! */
28. }
30. . Content. next {
31. Clear: both;
32. Padding: 60px;
33. }

Note: The Front h3 element float is used to make the text block width dynamically equal to the text width. Otherwise, the block length is too long, resulting in the after mask extension, affecting the part without text on the right.

PS CS5: How to Implement text reflection

1. Print words .. Place
2. Copy a layer .. Edit the conversion command under the menu and select vertical flip
3. After alignment, raster the copied text layer...
4. Reduce transparency ,,
5. Use a translucent eraser to wipe the bottom part slightly...

How to Use PS for translucent reflection?

Press ctrl + j to copy a layer, flip the copied layer vertically, and add a layer mask. Then, use the gradient tool to pull a black and white gradient to the mask (hundreds of black drops)