css文字效果(文字剪贴蒙版,text-shodow的应用,文字排版等…)
记录几种常见的文字效果
示例查看:http://pangyongsheng.github.io/cssFont/
一、文字剪贴蒙版
在PS中,对文字图层栅格化,然后可将其他图层创建为文字的剪贴蒙版,而在css中要实现类似的文字效果,我们需要先设置背景裁剪(background-clip)为文字(text),然后将字体颜色(color)或者文字填充(text-fill-color)设置为透明(transparent)即可实现将背景转化为当前元素的剪贴蒙版的相同效果;
为了更好的效果首先我们定义一个简单的的公共样式,如下:
.div{ font-weight: bold; font-size: 80px; margin: 50px; border: 10px dashed #666;}
1、背景图片剪贴蒙版
设置背景图片,设置背景裁剪和文字颜色
.bg-clip{ background-image: url(../img/1.jpg); background-size: cover; -webkit-background-clip: text; background-clip: text; color:transparent;}
<div class="div bg-clip">图片背景文字剪贴蒙版</div>
效果如上第一个
2、渐变条纹背景剪贴蒙版
使用线性渐变设置一个七彩条纹的背景,然后设置背景裁剪为text和文字填充颜色为透明:
.bg-clip2{ background:linear-gradient( 90deg, red 0%,red 14.3%, orange 0,orange 28.6%, yellow 0,yellow 42.9%, green 0,green 57.2%, blue 0, blue 71.5%, indigo 0,indigo 85.8%, violet 0, violet 100% ); background-repeat:no-repeat; background-size: cover; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent;}
<div class="div bg-clip2">渐变背景文字剪贴蒙版</div>
3、剪贴蒙版的动画效果
同上,首先设置一个渐变背景,但这里我们background-size宽度设为50%,最后在添加一个背景移动的动画:
.bg-clip3{ background-image: linear-gradient( 45deg, #ccc 0%, #ccc 30%, #00B4F1 0%, #00B4F1 70%, #ccc 0%, #ccc 100%); background-size: 50% 100%; -webkit-background-clip: text; background-clip: text; color:transparent; background-position: 0% 50%; animation: aitf 8s linear infinite;}@keyframes aitf { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; }}
<div class="div bg-clip3">剪贴蒙版动画效果</div>
二、text-shadow的应用
text-shadow有四个属性值
属性 | 值 |
---|---|
h-shadow | 水平阴影的位置。允许负值 |
v-shadow | 必需。垂直阴影的位置。允许负值是 |
blur | 可选。模糊的距离 |
color | 可选。阴影的颜色 |
text-shadow属性可以向文本添加一个或多个阴影,我们可由此作出许多不同的有趣效果,以下仅为几个参考示例:
1、文字的投影效果
最基本的投影效果
.shadow1 { color: red; text-shadow: 5px 5px 5px #000;}
2、文字的描边效果
对文字添加四个分别向上下左右位移为1px的红色投影,即可实现红色描边效果
.shadow2 { color: white; text-shadow: -1px 0px 1px red, 1px 0px 1px red, 0px -1px 1px red, 0px 1px 1px red;}
3、文字的浮雕效果
对文字添加向左上偏移1px的黑色(暗)模糊值较小的投影,再分别添加向右和向下的蓝色(亮色)模糊值较大的投影,即可实现文字浮雕特效
.shadow3 { color: white; text-shadow: -1px -1px 3px black, 0 0 5px blue, 0 0 8px blue;}
4、文字的剪纸效果
文字设为白色,添加向左1px的黑色投影,添加向右和向下的蓝色投影:
.shadow4 { color: white; text-shadow: 1px 0px 0px #00B4F1,2px 0px 0px #00B4F1,3px 1px 0px #00B4F1,0px 1px 0px #000;}
5、文字的发光效果
添加两层无偏移的白色投影
.shadow5 { color: blue; background-color:#949191; text-shadow: 0px 0px 3px white, 0px 0px 5px white;}
三、文字的排版
1、文字的环形排版
这里应用了svg路径实现,创建一个圆形的路径,在和元素写入文本,通过xlink:href属性把它链到我们的圆上,设置圆形填充为none,svg标签overflow为visib,参考如下:
<div class="circlar"> <svg viewBox="0 0 100 100"> <path d="M 0,50 a 50,50 0 1, 1 0, 1 z" id="circle"></path> <text> <textPath xlink:href="#circle"> 这是一个圆形文字效果w(゚Д゚)w ~~~!!! </textPath> </text> </svg> </div>
.circlar path{ fill: none; }.circlar{ width: 300px; height: 300px; margin: 100px;}.circlar svg{ display: block; overflow: visible;}
2、自右向左的竖排文字
通过设置writing-mode的值内容块固有的书写方向
属性 | 值 |
---|---|
vertical-rl | 垂直的自右到左 |
vertical-lr | 垂直的自左到右 |
sideways-rl | 水平的自右到左 |
sideways-lr | 水平的自左到右 |
示例:
.tbl{ margin: 100px; writing-mode:vertical-rl;}.tbl>span::after{ content: '\A'; white-space: pre;}
<div class="tbl"> <span>何日归家洗客袍?</span> <span>银字笙调,心字香烧。</span> <span>流光容易把人抛,红了樱桃,绿了芭蕉。</span> </div>
3、换行
最后安利一种文字换行的方法,在上一的示例中已有使用:
在Unicode中有一个转义字符是等同于换行的:0x000A。在CSS中,可以写成"\000A",或"\A",通过伪类加入标签,即可实现各个标签的换行,如上示例中为没一句诗的span元素添加换行;
css文字效果(文字剪贴蒙版,text-shodow的应用,文字排版等…)相关推荐
- anguarjs 图片预览_Text to Image Converter(文字转图片软件)下载-Text to Image Converter(文字转图片软件)v1.5绿色版下载...
Text to Image Converter是一款简易使用的文本转图像工具,用户可以通过Text to Image Converter自定义转换后的图像属性,还能支持自定义文字的字体.颜色等功能.也 ...
- 纯CSS实现的文字效果还可以这么酷炫
大家好,我是前端实验室的大师兄! 前言 CSS是一门很特殊的语言,你认为CSS只能用来控制网页的结构与样式,但只要你有丰富的想象力,就能创造无限可能. 本文中大师兄为你精选了5个使用纯CSS实现的文字 ...
- 漂亮的css文字效果
效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- css实现空心文字效果
在日常开发中大家很有可能会遇到需要手动实现空心文字效果 实现方式一 (空心字体) <style> .text{-webkit-text-stroke: 1px black; // 根据需求 ...
- 3D旋转木马--文字效果(源码)
html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- php 心电图,用ps简单制作漂亮的心电图文字效果
这篇教程是向脚本之家介绍用ps简单制作漂亮的心电图文字效果方法,教程制作出来的心电图文字效果非常漂亮,难度不是很大,推荐到脚本之家,喜欢的朋友快快来学习吧 这篇教程主要是向脚本之家的朋友介绍用ps简单 ...
- 纯CSS实现的文字效果
大家好,我是前端实验室的大师兄! 前言 CSS是一门很特殊的语言,你认为CSS只能用来控制网页的结构与样式,但只要你有丰富的想象力,就能创造无限可能. 本文中大师兄为你精选了10个使用纯CSS实现的文 ...
- [原创] CSS自定义IOS苹果,Android安卓的CheckBox 效果,可以根据文字大小变化而变化,内框显示文字,另外可自定大小,自定颜色...
在经过对网上一些自定CheckBox的一番研究之后,现在综合讲一下该样式实现的技巧. 先上图: 图中已展示了多种样式,实现的原理很简单,一个外Box,一个内Box,外Box显示背景色,内Box显示白色 ...
- html鼠标悬停效果_【开发小技巧】023—如何使用HTML和CSS实现3D文字效果
来源 | https://www.geeksforgeeks.org/create-a-3d-text-effect-using-html-and-css/3D文字效果是网页设计领域中最常用的文字效果 ...
最新文章
- Broken Keyboard (a.k.a. Beiju Text)
- 将ABAP数据库表的定义导入到PostgreSQL
- C#.NET Thread多线程并发编程学习与常见面试题解析-1、Thread使用与控制基础
- eclipse插件开发:自定义导航器中的拖拽定义
- MFC中COMBO BOX的设置
- Error creating bean with name 'dataSource' defined in class path resource [spring/spring-dao.xml]:
- 2017-10-7Linux基础知识(5)基本命令
- 国企营业收入逾17万亿 同比增长24.2%
- 黄金分割比的重新理解
- ThreadPoolExecutor – Java线程池示例
- 一起谈.NET技术,关于Expression Tree和IL Emit的所谓的quot;性能差别quot;
- java插件开发_编写一个IDEA插件之:自动生成Java代码
- 手机麦克风结构原理图_麦克风的分类和工作原理
- 学校计算机考试交卷过程中关机了,计算机基础考试注意事项
- 在线3D大脑建模网站分享
- 一万套Solidworks非标自动化设备三维图纸 3D通用模型 机械设计UG
- Linux查看mac地址
- android图片降低图片大小保持图片清晰的方法
- python3*1**3 表达式输出结果为_3*1**3 表达式输出结果为________
- 集成电路——概念、发展分类和IC卡
热门文章
- 基于jsp+mysql+ssm网络硬硬盘系統网站-计算机毕业设计
- java与硬件交互:U盾与JSP的集成
- Linux下ll 命令显示的文件类型
- 计算机能报公检法司么,想报考公检法系统?那你了解招考条件吗?
- C语言<文件的打开与关闭>
- performance monitor for mysql_借助zabbix和mysqlperformancemonitor模板实现mysql数据库的监控...
- 看中国足球,哭笑不得
- Android本地视频播放器开发 - 搜索本地视频(1)
- android 阅读器放大镜,制作安卓PDF阅读器:四、实现文本选择之放大镜、长按拖动...
- [置顶] 最近要强迫自己了解的东西