现在CSS3和HTML5已经开始流行,很多网页视觉效果是可以使用CSS来完成的,今天向大家展示一下如何用CSS来美化大标题文字,如下图,第一个标题是使用了base64代码背景,显得有点复古的感觉,其它使用了css3的一些属性来制作。
这些美化代码都是十分简单的,只需要简单几步就可以制作出来,比起用PS来制作要简单很多!下面一起看看如何用CSS代码来实现的。
代码教程
HTML代码用H1吧,这样语义化好些,因为标题一般用h1-h6.
1 | < h1 class = "vintage" >美丽的中国语</ h1 > |
1、纯CSS制作的复古风格的大标题
2 | background : #EEE url (data:image/gif;base 64 ,iVBORw 0 KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD 4 // 8 /A 5 wF 5 SBYyAr+// 8 PAPOCFO 0 Q 2 zq 7 AAAAAElFTkSuQmCC) repeat ; |
3 | text-shadow : 5px -5px black , 4px -4px white ; |
5 | -webkit-text-fill- color : transparent ; |
6 | -webkit-background- clip : text; |
2、CSS空心文字
3 | -webkit-text-stroke: 1px black ; |
4 | letter-spacing : 0.04em ; |
3、CSS内阴影文字效果
3 | background-color : black ; |
4 | text-shadow : rgba( 255 , 255 , 255 , 0.5 ) 0 5px 6px , rgba( 255 , 255 , 255 , 0.2 ) 1px 3px 3px ; |
5 | -webkit-background-clip : text; |
4、CSS 实现3D感文字标题
4 | text-shadow : 0px 1px 0px #999 , 0px 2px 0px #888 , 0px 3px 0px #777 , 0px 4px 0px #666 , 0px 5px 0px #555 , 0px 6px 0px #444 , 0px 7px 0px #333 , 0px 8px 7px #001135 ; |
部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!