这篇文章主要讲解了“如何用css3给字体添加立体效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何用css3给字体添加立体效果”吧!
字体添加立体效果图如下
1、新建一个html
文件,首先写div
标签输入写contenteditable
属性规定是否允许用户编辑内容,可以支持IE,不用再为兼容问题。<div contenteditable="true">
可以编辑里面的内容</div>
,再来class
是类选择器,可以纯静态在网页中控制字体颜色。
html代码示例
<div contenteditable="true" class="text eff">字体特效</div>
2、通过给css
全局的设置,写使用head
标签之间加入<style type="text/css">
串代码然后在style
标签中输入div
代background-color
属性设置元素的背景颜色。
代码示例
body{ background-color: #456; }
代码效果
3、效果出来了,只是给背景添加颜色,接着给字体特效通过在style
标签中输入字体、字体尺寸、水平对齐方式、粗细、行间距、字体大小、顶部、底部、左侧和右侧属性定位。
代码示例
.text { font-family:"微软雅黑", "Dosis", sans-serif; font-size: 80px; text-align: center; font-weight: bold; line-height:200px; text-transform:uppercase; position: relative; }
代码效果
4、效果出来了,只是给字体变大也加粗并居中,接下来给字体特通过在style
标签中输入背景颜色、阴影。
利用text-shadow
属性来生成文本阴影效果。它的使用方法很简单,text-shadow:0px 0px 0px #000
,X
轴,Y
轴,模糊程度(不可是负值),阴影颜色。
代码示例
.eff{ background-color: #333; 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, 0.6); }
代码效果
通过修改参数就可以实现多种特效
感谢各位的阅读,以上就是“如何用css3给字体添加立体效果”的内容了,经过本文的学习后,相信大家对如何用css3给字体添加立体效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。