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

Source: Internet
Author: User

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. }
  7. . Content h3: before {
  8. Content: attr (title );
  9. Position: absolute;
  10. Z-index: 1;
  11. Top: 100%;
  12. Left: 0;
  13. Height: 100%;
  14. Width: 100%;
  15. -Webkit-transform: scaleY (-1 );
  16. }
  17. . Content h3: after {
  18. Content :'';
  19. Position: absolute;
  20. Z-index: 2;
  21. Top: 100%;
  22. Left: 0;
  23. Height: 100%;
  24. Width: 100%;
  25. Background:-webkit-gradient (linear, center top, center bottom, from (rgba (255,255,255, 0), to (rgba (255,255,255, 1 ))); /* the others are omitted -_-! */
  26. }
  27. . Content. next {
  28. Clear: both;
  29. Padding: 60px;
  30. }


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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.