CSS3製作文字半透明倒影效果，css3文字半透明倒影

CSS3製作文字半透明倒影效果，css3文字半透明倒影
/*------------------ITEYE 祈禱幸福(http://qidaoxingfu.iteye.com)原創 轉載請註明-----------------*/

 

效果。Ps、背景線條是背景圖勒，和本文效果無關。。。 

html代碼如下： 

Html代碼  

1. <div class="content">  
2. <h3 title="專業技能">專業技能</h3>  
3. <div class="next"><!--其他內容--></div>  
4. </div>  

有兩種實現方式： 

1.box-reflect 
(屬性詳情見http://css.doyoe.com/  屬性→邊框→box-reflect) 

Css代碼  

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. }   

但是box-reflect屬性只有chrome/Safari支援（支援詳情見 http://caniuse.com/#search=box-reflect） 
FF和Opera不能相容，所以有了以下替代方案。 



2.transform屬性的scaleY方式： 

受到神飛的博文和MDN的一個Demo原始碼的啟發 
MDN Demo  https://developer.mozilla.org/zh-CN/demos/detail/css3-reflection-effect/launch 
神飛：一些上流的CSS3圖片樣式   http://www.qianduan.net/css3-image-styles.html 

Css代碼  

1. .content h3{  
2.     position:relative;  
3.     float:left;  
4.     opacity:0.7;  
5.     font:40px/50px 'Microsoft yahei';  
6. }   
7.   
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. }  
18.   
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)));/*其他幾個被省略了-_-!*/  
28. }  
29.   
30. .content .next{  
31.     clear:both;  
32.     padding:60px;  
33. }  

注:前面h3元素浮動是為了讓文字塊的寬度動態地剛好等同文字寬度，否則塊過長，導致after的遮罩延長，影響右邊沒有文字的部分 

PS CS5 怎做文字的倒影效果

1、打好字。。放好位置
2、複製一層。。編輯菜單下面變換命令，選擇垂直翻轉
3、對齊好位置後，，把複製的文字層柵格化。。。
4、降低透明度，，
5、用半透明橡皮把最下面部分稍微擦一下效果更好。。。
 
怎做用PS做半透明倒影？

先ctrl+j 複製一層 再將複製好的圖層進行垂直翻轉 添加圖層蒙版 再使用漸層工具給蒙版拉黑白色的漸層即可（上百下黑）