利用css3的text-shadow属性实现文字阴影乳白效果
现在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属性实现文字阴影乳白效果的更多相关文章
- IT兄弟连 HTML5教程 CSS3属性特效 文字阴影
文字阴影是可以叠加的.最基本可以给出四个值,用法如下: text-shadow:x y blur color 文字阴影的参数说明如表1所示. 表1 CSS3文字阴影参数说明 横向偏移量和纵向偏移量可 ...
- 利用css3实现超出文本指定行数与省略号效果
<style> .text1 {/*单行*/ width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ...
- CSS实现文字阴影的效果
CSS中有两种阴影效果,一种是DropShadow(投影),另一种是Shadow(阴影).1.DropShadow语法:{FILTER:DropShadow(Color=color,OffX=offX ...
- IE下实现类似CSS3 text-shadow文字阴影的几种方法
IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...
- 酷炫,用Html5/CSS实现文字阴影
前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过 ...
- IT兄弟连 HTML5教程 CSS3属性特效 文字描边
用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text ...
- 利用css3选择器及css3边框做出的特效(1)
利用border-radius及box-shadow制作圆角表格 界面效果图如下: css样式如下所示: * { margin:; padding:; } body { padding: 40px 1 ...
- CSS3+HTML5实现块阴影与文字阴影
CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本教程分5节介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不 ...
- CSS3中的Transition属性详解
w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...
随机推荐
- Linux入门进阶第五天——用户管理(帐号管理 )上
一.帐号与群组 关于使用者帐号: 用户的ID与帐号信息所在位置是 /etc/passwd,而管理密码的数据则是在 /etc/shadow 每个登陆的使用者至少都会取得两个 ID , 一个是使用者 ID ...
- spring boot启动报内存溢出的问题
问题: springBoot项目,已经两次了,启动报内存溢出,内存泄露 分析: 内存泄露是因为垃圾回收器想要回收程序不用的对象,但是该对象还有引用存在 解决: 1.第一次是mybatis文件和Java ...
- 【bzoj3991】[SDOI2015]寻宝游戏 树链的并+STL-set
题目描述 给出一棵树,初始每个点都是非必经的.多次改变某个点的必经状态,并询问从任意一个点出发,经过所有必经的点并回到该点的最小路程. 输入 第一行,两个整数N.M,其中M为宝物的变动次数. 接下来的 ...
- 深度学习开源库tiny-dnn的使用(MNIST)
tiny-dnn是一个基于DNN的深度学习开源库,它的License是BSD 3-Clause.之前名字是tiny-cnn是基于CNN的,tiny-dnn与tiny-cnn相关又增加了些新层.此开源库 ...
- day 9 追踪一个蓝色的物体
# -*- coding: utf- -*- import cv2 import numpy as np #.打开摄像头 cap=cv2.VideoCapture('output.avi') ): # ...
- day4 基础
1.变量 2.打印名片 3.raw_input() 和 input() 4.变量类型 type 5. if-else 6.标示符的规则 7.关键字 8.运算符 9.print打印多个值 1.变量 sc ...
- mac生成ssh公私匙
1. cd ~/.ssh/ 2.ssh-keygen 3.id_rsa.pub文件放入git 4.私匙放进jenkins
- 利用webbrowser自动查取地点坐标
概述 有时候我们需要去查询某些地点的坐标,那么我们可以用百度提供的坐标拾取系统http://api.map.baidu.com/lbsapi/getpoint/index.html,但是会发现它只能一 ...
- Sqlite数据多表联合update
其实在Mysql中,多表联合update不是什么难事. 语法: 1 UPDATE table_references SET col_name1=expr1 [, col_name2=expr2 ... ...
- 001 -js对时间日期的排序
001-JS对时间日期的排序 最近在做公司的项目时间,产品给了一个很简单的页面,让帮忙写一下.首先看一下产品的需求: 需要对该列表进行排序 思路:(1)可以在数据库写sql语句的时间直接一个DESC按 ...