• 技术文章 >web前端 >css教程

    教你使用css3给字体添加立体效果(附代码)

    奋力向前奋力向前2021-08-30 17:19:33原创200

    之前的文章《手把手教你怎么使用html+css实现轮播图效果(代码分享)》中,给大家介绍了怎么使用html+css实现轮播图效果。下面本篇文章给大家介绍怎么使用css3给字体添加立体效果,我们一起看看怎么做。

    字体添加立体效果图如下

    微信截图_20210830160241.jpg

    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标签中输入divbackground-color属性设置元素的背景颜色。

    代码示例

    body{
      background-color: #456;
    }

    代码效果

    微信截图_20210830154316.jpg

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

    代码效果

    微信截图_20210830154949.jpg

    4、效果出来了,只是给字体变大也加粗并居中,接下来给字体特通过在style标签中输入背景颜色、阴影。

    利用text-shadow属性来生成文本阴影效果。它的使用方法很简单,text-shadow:0px 0px 0px #000X轴,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);
    }

    代码效果

    微信截图_20210830160241.jpg

    通过修改参数就可以实现多种特效

    ok,编辑代码完成。

    推荐学习:CSS3入门教程

    以上就是教你使用css3给字体添加立体效果(附代码)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css3 html5
    上一篇:利用css制作有趣的文字摆动动画特效 下一篇:使用CSS快速更改PNG图像的颜色(两种方法)
    线上培训班

    相关文章推荐

    • 浅谈CSS3中新增的背景属性&渐变函数(gradient)• 如何使用纯CSS3创建炫酷的图像放大效果?• 纯CSS3怎么创建瀑布流布局?columns方法浅析• 超实用!利用CSS3将两个图片叠加在一起显示• HTML5+CSS3动态画出一个大象

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网