现在CSS3+html5的网页应用的越来越广泛了。很多网页中的字体同样可以用CSS3来实现炫酷的效果。

下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果。这是在设计达人上面看到的,所以拿过来分享给大家。喜欢的可以自己去试试。

有效利用css3的text-shadow属性,可以实现很多漂亮的效果,今天将介绍一个用CSS3文字阴影属性实现乳白文字效果,预览图如下:

英文milky

字体:经典圆体繁

字体:微软雅黑

实现方法很简单,大家可直接复制下面代码去体验下吧: HTML代码:

CSS代码:

.milky {
font-family:"经典圆体繁", "microsoft yahei", "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;;
text-transform: ;
display: block;
font-size: 80px;
color: #f1ebe5;
text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
font-weight: bold;
letter-spacing: -4px;
text-align: center;
background: linear-gradient(to bottom, #ece4d9 0%,#e9dfd1 100%);
position: absolute;
padding: 100px 50px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 20px;
}

利用css3的text-shadow属性实现文字阴影乳白效果的更多相关文章

  1. IT兄弟连 HTML5教程 CSS3属性特效 文字阴影

    文字阴影是可以叠加的.最基本可以给出四个值,用法如下: text-shadow:x y blur color 文字阴影的参数说明如表1所示. 表1  CSS3文字阴影参数说明 横向偏移量和纵向偏移量可 ...

  2. 利用css3实现超出文本指定行数与省略号效果

    <style> .text1 {/*单行*/ width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ...

  3. CSS实现文字阴影的效果

    CSS中有两种阴影效果,一种是DropShadow(投影),另一种是Shadow(阴影).1.DropShadow语法:{FILTER:DropShadow(Color=color,OffX=offX ...

  4. IE下实现类似CSS3 text-shadow文字阴影的几种方法

    IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...

  5. 酷炫,用Html5/CSS实现文字阴影

    前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过 ...

  6. IT兄弟连 HTML5教程 CSS3属性特效 文字描边

    用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text ...

  7. 利用css3选择器及css3边框做出的特效(1)

    利用border-radius及box-shadow制作圆角表格 界面效果图如下: css样式如下所示: * { margin:; padding:; } body { padding: 40px 1 ...

  8. CSS3+HTML5实现块阴影与文字阴影

    CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本教程分5节介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不 ...

  9. CSS3中的Transition属性详解

    w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

随机推荐

  1. Linux入门第二天——基本命令入门(下)

    一.帮助命令 1.帮助命令:man (是manual手册的缩写,男人无所不能,/笑哭) 更多man用法以及man page的用法,参见:http://www.linuxidc.com/Linux/20 ...

  2. 20155213 实验四 Android程序设计

    20155213 实验四 Android程序设计 实验内容 基于Android Studio开发简单的Android应用并部署测试; 了解Android组件.布局管理器的使用: 掌握Android中事 ...

  3. vue 与原生app的对接交互(混合开发)

    小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我最近就是在坐这个,踩了一些坑,拿出来给大家分享下. 0.通过url传输数据:(一般是在入 ...

  4. hdu2061 Treasure the new start, freshmen!(暴力简单题)

    Treasure the new start, freshmen! Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/3276 ...

  5. CentOS 下 MySQL 5.6 基于 RPM 的下载、安装、配置

    CentOS 下 MySQL 5.6 基于 RPM 的下载.安装.配置 系统: CentOS 7 x86_64 MySQL 版本: 5.6.40 安装方式: RPM 下载 下载地址 操作系统 选择 R ...

  6. 131. 分割回文串 javascript实现

    给定一个字符串 s,将 s 分割成一些子串,使每个子串都是回文串. 返回 s 所有可能的分割方案. 示例: 输入: "aab" 输出: [ ["aa",&quo ...

  7. 城市规模越大,工资、GDP、犯罪率越高:4.5星|《规模》

    规模 信息浓度非常高的一本书.篇幅也不小,纸书有568页,致谢与注释只占7%. 全书讲各种复杂的东西中存在的普遍规律:哺乳动物体重每增加一倍,心率降低25%:城市人口每增加一倍,加油站只增加85%:城 ...

  8. 从零开始的Python学习Episode 8——深浅拷贝

    深浅拷贝 一.浅拷贝 列表中存储的是数据的内存地址,当我们要查询或修改列表中的数据时,我们是通过列表中的地址找到要访问的内存.当我们修改列表中的数据时,如果修改的是一个不可变类型(整型,长整型,浮点数 ...

  9. Codeforces Round #553 (Div. 2) C

    C. Problem for Nazar time limit per test 1 second memory limit per test 256 megabytes input standard ...

  10. hadoop之mapper类妙用

    1. Mapper类 首先 Mapper类有四个方法: (1) protected void setup(Context context) (2) Protected void map(KEYIN k ...