这篇文章主要整理一些css3实现的一些文字特效,分享给大家, 相信您看完会有不少的收货哦!
<style>
.hollow{
-webkit-text-stroke: 1px black;
-webkit-text-fill-color : transparent;
font-size: 30px;
color:#fff;
}
</style>
<div class="hollow">空心字/缕空效果:fly63.com</div>
</body>
效果如下:
除了使用-webkit-text-stroke和-webkit-text-fill-color以外,我们还可以利用text-shadow。
<style>
.hollow{
text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
font-size: 30px;
color:#fff;
}
</style>
<div class="hollow">空心字/缕空效果:fly63.com</div>
或者:
<style>
.hollow{
text-shadow: 0 0 2px hsl(40, 28.57% , 28.82%),0 0 2px hsl(40, 28.57% , 28.82%), 0 0 2px hsl(40, 28.57% , 28.82%);/*多个叠加*/
font-size: 30px;
color:#fff;
}
</style>
<div class="hollow">空心字/缕空效果:fly63.com</div>
<style>
.threesolid{
font-size: 30px;
color:#fefefe;
text-shadow:0px 1px 0px #c0c0c0,
0px 2px 0px #b0b0b0,
0px 3px 0px #a0a0a0,
0px 4px 0px #909090,
0px 5px 10px rgba(0, 0, 0, .9);
}
</style>
<div class="threesolid">立体文字效果:fly63.com</div>
效果如下:
立体效果原理:应用了CSS3中的text-shadow属性,进行多次阴影设置,并设置不同的阴影色,从而达到一个立体的文字效果。
<style>
.light{
font-size: 30px;
color: #fefefe;
text-shadow: 0 0 0.5em #0ae642, 0 0 0.2em #5c5c5c;
}
</style>
<div class="light">发光文字效果:fly63.com</div>
效果如下:
<style>
.colortxt{
font-size: 30px;
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}
</style>
<span class="colortxt">彩色渐变文字效果:fly63.com</span>
效果如下:
彩色渐变文字效果:fly63.comtext的意思:就是以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。 所以,我们最后写color: transparent; 让文字为透明色,就是让后面背景色显示出来。
浮雕文字效果在 Mac OS X 和 iPhone 中随处可见,由于阴影半径很小,一般是 0 或 1px, 所以也适合小号的文本。在使用上一般遵循这个原则:深色文字浅色背景,用白阴影,浅色文字深色背景,用黑阴影。
text-shadow: 0 1px 0 #eee; 凹进效果
text-shadow: 0 -1px 0 #123; 凹进效果
text-shadow: 0 -1px 1px #eee; 凸出效果
text-shadow: 0 1px 1px #123; 凸出效果
<style>
.grunge {
position:relative;
color: #f06369;
background: #000;
text-shadow: 0 0 2px rgba(255,255,255,0.3), -1px -1px 0 #fcfcfc, 1px 1px 0 #ccc;
}
.grunge span{
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:100%;
background:url("images/bg.png");
}
</style>
<div class="grunge">文字纹理效果:fly63.com<span></span></div>
纹理文字效果是依靠一张图片,配合其他文字效果制作出来,其原理来源于webkit-mask-image,把图片当作一个遮罩,叠合文字。
在css3中我们知道可以使用box-shadow属性轻松的为元素添加阴影效果,并且可以设置多组效果。把box-shadow特性的两个偏移量设置为0,将模糊值blur也设置为0,此时增加扩张半径,就会使元素的投影变为实线边框。
在设计图会经常使用到的阴影效果,如何用css3来实现呢?这篇文章主要整理box-shadow的一些好看常用的投影效果。
现在在页面中用到最多的是图片/容器投影,文字投影;那么css中如何设置投影?下面本篇文章就来给大家介绍一下使用CSS设置投影效果的方法,希望对大家有所帮助。
要实现多层文字,我首先想到的是文字投影 text-shadow ,但通常 text-shadow 只能投个纯色出来。于是思路要改一下,黑色和白色层是投影,斑马条纹是真正的文字本身。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!