CSS文字效果看起来复杂的大多是由一个属性制作的,落地页上的霓虹灯标志,游戏标题上的硬轮廓,堆叠的橙色字母看起来像一个70年代的唱片封套:每一个都是单 text-shadow declaration 几个逗号分隔的图层,语法短,硬的部分是挑选读得好的偏移和模煳值,记住上面画的是哪一层。
本指南涵盖 text-shadow grammar,分层是如何工作的,常见效果背后的食谱及其使用的确切值,以及使阴影文本难以阅读或渲染缓慢的错误,每个示例都可以在中重建 CSS文本阴影生成器的,它实时显示结果并为您写下声明。
TL;博士:
text-shadow采用逗号分隔的阴影列表,每个阴影都写为offset-x offset-y blur-radius color.榜首影画在上面,没有点差值,没有inset关键字,与此不同box-shadow.辉光是几个逐渐模糊的零偏移阴影,轮廓是四个一像素的硬阴影,3D 文本是每隔一个像素向外的一堆硬阴影。的 Toolz 文本阴影生成器 使用滑块和八个预设构建这些,客户端,免费,无注册。
css text-shadow 属性是什么？
的 text-shadow property 在元素 's 文本的字形后面画一个或多个阴影。它在 W3C 中定义 CSS文字装饰模块三级的,而它的值要么 none 或者逗号分隔的阴影列表。
每个阴影最多有四个部分:
| 部分 | 要求 | 它做什么 | 允许值 |
|---|---|---|---|
| 水平偏移 | 是的 | 向右(正)或向左(负)移动阴影 | 任何长度,例如。 2px、 -0.1em |
| 垂直偏移 | 是的 | 下(正)或上(负)移动阴影 | 任何长度 |
| 模糊半径 | 不,默认 0 |
软化边缘;较大意味着更模糊 | Zero或正长度。负无效 |
| 颜色 | 不,默认 currentColor |
影子颜色,包括透明度 | 任何 CSS 颜色 |
颜色可以先到或后到。 text-shadow: #000 1px 1px 並 text-shadow: 1px 1px #000 是相同的阴影,如果将颜色留出,阴影会带走文本'自己的颜色,这很少是你想要的滴影,但对于文本颜色的快速发光很方便。
A shadow 从不改变布局,它不会把相邻元素推开,也不会把元素's box 生长,所以一个大的模煳可以溢出到 box 外面,被一个带有 的父级切断 overflow: hidden。
文本阴影与盒子阴影有何不同?
text-shadow 遵循每个字母的形状,同时 box-shadow 遵循元素的矩形's边框框。那是实际的区别,它决定你到达哪个。语法也不同。
| 特点 | text-shadow |
box-shadow |
|---|---|---|
| 阴影的形状 | 每个字形轮廓 | 素's框,包括圆角 |
| 传播半径 | 不可用 | 是的,第四个长度 |
inset 关键词 |
不可用 | 是的 |
| 多层 | 是的,逗号分隔 | 是的,逗号分隔 |
| 油漆订单 | 首先列在顶部 | 首先列在顶部 |
| 默认颜色 | currentColor |
currentColor |
| 典型用途 | 标题、徽标、图像的可读性 | 卡片、按钮、立面图 |
缺失的点差值是为什么文本轮廓需要四个阴影而不是一个。与 box-shadow 你可以写 0 0 0 2px black zhi长一个实心环,有了文字就没办法扩充字形,就通过几个方向的dui折副本来伪造,如果是做容器造型而不是文字,the 盒子阴影生成器指南 覆盖展层、镶嵌层和立面层。
多个文本阴影分层如何工作?
单个声明可以容纳任意数量的阴影,用逗号分隔,浏览器绘制第一个最接近查看器的阴影,列表中的最后一个阴影位于后面,文本本身总是绘制在所有这些阴影之上。
每当层重叠时,顺序就很重要。比较这两个声明:
/* Sharp dark layer on top of a soft glow */
text-shadow: 2px 2px 0 #000, 0 0 12px #ff0;
/* Soft glow painted over the sharp layer */
text-shadow: 0 0 12px #ff0, 2px 2px 0 #000;
1个, 清脆的黑色副本保持锐利, 黄雾霾坐在其后, 2个,黄色的辉光冲刷在黑色副本上, 使其柔和, 同影,不同样子。
Generator 遵循相同的规则,图层选项卡中的第 1 层是输出中的第一个阴影,因此它会在顶部进行绘画,添加图层将其附加到列表末尾,在其他图层后面。要向前移动图层,请将其删除并重新创建,或手动编辑复制的 CSS。
Toolz生成器写入了哪些值?
的 文本阴影生成器 give 每层五个控件,并以固定的格式写入声明,当你将结果粘贴到有自己约定的代码库中时,知道该格式会有所帮助。
| 控制 | 范围 | 步 | 写为 |
|---|---|---|---|
| 偏移X | -50px 至 50px | 1便士 | Npx |
| 偏移量 Y | -50px 至 50px | 1便士 | Npx |
| 模糊 | 0px 至 100px | 1便士 | Npx其中包括 0px |
| 颜色 | 颜色选择器 | - | 6位十六进制 |
| 不透明度 | 0%至100% | 1%锛屽悓姣斿? | 颜色后面添加为两个十六进制数字 |
不透明度以 8 位十六进制值折叠到颜色中,如下所示 CSS 颜色模块 4 级六角符号.最后两位数字是 0 到 255 刻度上的 alpha 通道,因此该工具将不透明度乘以 255,轮,并转换为十六进制。
以下是解决一些不透明问题的方法:
| 不透明度滑块 | 次255 | 圆润 | 十六进制α | 示例颜色 |
|---|---|---|---|---|
| 100% | 255绔 涔诲芥澶澧 | 255绔 涔诲芥澶澧 | ff |
#000000ff |
| 90%锛屽悓姣斿? | 229.5 | 230绔 涔诲芥澶澧 | e6 |
#4466eee6 |
| 70%锛屽悓姣斿? | 178.5 | 179绔 涔诲芥澶澧 | b3 |
#4466eeb3 |
| 60%锛屽悓姣斿? | 153绔 涔诲芥澶澧 | 153绔 涔诲芥澶澧 | 99 |
#00000099 |
| 35% | 89.25 | 89绔 涔诲芥澶澧 | 59 |
#00000059 |
| 25% | 63.75 | 64绔 涔诲芥澶澧 | 40 |
#00000040 |
8位十六进制读取当前每个浏览器,如果必须支持一个非常旧的浏览器,则将颜色重写为 rgba() 复制后: #00000099 变成 rgba(0, 0, 0, 0.6)。
该工具仅接受滑块和拾取器输入,因此值是整像素。对于测量到的阴影 em(用字体大小缩放),复制 CSS 并交换样式表中的单位。A 2px 16px正文上的偏移量为 0.125em。
如何创建霓虹灯发光文本效果?
霓虹灯是几道零偏移、同样鲜艳的色彩和日益模糊的阴影,每一层都增添了更宽、更暗的光环,它们一起看起来就像是流向周围空气的光。
生成器打开其霓虹灯预设,从而产生:
text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;
3层,模糊每次加倍(7,14,28),不透明度从100%下降到90%到70%,紧密的7px层给字母一个明亮的核心,28px层将颜色展开在带有白色文本的深色背景上这读作一个点亮的管子在光背景上大部分效果消失,这就是为什么预览有一个光bg/暗bg切换:检查两者之前,你将光发光发到一个带有主题开关的站点。
56px 模煳处添加第四层或重复 7px 层两次,重复一层会叠加其不透明度,使核心更强烈而不加宽。
如何用文本阴影勾勒文本?
放置四个硬阴影(模糊) 0)每个对角线上都有一个像素。它们的重叠痕迹是每个字形的边缘。
预设大纲写道:
text-shadow: -1px -1px 0px #000000ff, 1px -1px 0px #000000ff, -1px 1px 0px #000000ff, 1px 1px 0px #000000ff;
1个像素时效果很好,在2个或3个像素处,曲线和直边的中点开始出现间隙,因为4个拷贝只覆盖对角线,对于更粗的轮廓,在直轴上再增加4层(0 -2px、 2px 0、 0 2px、 -2px 0) 所以每个字母周围有八个副本。
有一种非影子替代方案。 -webkit-text-stroke 沿着字形路径绘制一个真实的笔画,尽管有前缀,但仍受到当前浏览器的支持。它以轮廓为中心,因此它吃成薄字母,并且在 WHATWG 兼容性标准中指定,而不是在 CSS 模块中指定。对于显示文本中小而清晰的轮廓,四影技巧仍然是最可预测的选择。
3D或挤压文本是如何制作的?
堆叠几个相同颜色的硬阴影,每个阴影向下和向右偏移一个像素,每个副本添加一个像素深度,眼睛将堆读取为实心字母的侧面。
Retro 3D 预设:
text-shadow: 1px 1px 0px #e99537ff, 2px 2px 0px #e99537ff, 3px 3px 0px #e99537ff, 4px 4px 0px #00000040;
3个橙色层构建一个三像素挤压,4个不透明度为25%的黑色层将一个像素放在更远的地方作为接地字母的接触阴影,为了更深的挤压,继续添加偏移4,5,6的橙色层并将深色层移动到最后,12px挤压的十二层对于一个大英雄标题来说是正常的。
长影预设使用相同的想法,并带有间隙和褪色不透明度:
text-shadow: 1px 1px 0px #00000033, 3px 3px 0px #00000026, 6px 6px 0px #0000001a, 10px 10px 0px #0000000f;
偏移量增加(1、3、6、10),而不透明度下降(20%、15%、10%、6%),因此阴影会对角线移动,而不是形成实心块。
哪种文字阴影食谱适合哪种效果?
以下是生成器中的所有八个预设,每个预设背后的想法,以便您可以调整它们。
| 预设 | 层 | 抵消 | 模糊 | 想法 |
|---|---|---|---|---|
| 软 | 1 | 0,2px | 4便士 | 35%黑色的微妙落影,对大多数标题都是安全的 |
| 硬 | 1 | 2便士,2便士 | 0 | 60%黑的清脆胶印,平版外观 |
| 霓虹灯发光 | 3 | 0, 0 | 7,14,28px | 颜色相同,逐渐模糊,颜色为深色 |
| 复古3D | 4锛屽湪娴欐睙鏉 | 1到4px的对角线 | 0 | 步进硬拷贝加上微弱的接触阴影 |
| 提纲 | 4锛屽湪娴欐睙鏉 | +/-1px 对角线 | 0 | 追踪字形边缘的四个副本 |
| 压花 | 2 | -1px/-1px 和 1px/1px | 0 | 白色突出显示左上角,深色阴影右下角 |
| 火 | 3 | 0,-1/-2/-4px | 4,10,18px | 黄色到橙色到红色,向上上升 |
| 长影 | 4锛屽湪娴欐睙鏉 | 1,3,6,10px 对角线 | 0 | 差距扩大,不透明度逐渐消失 |
Emboss是人们误读的一张,它将一个光影向上和向左与一个暗影向下和向右配对,模仿左上角击打凸起字母的光线,交换两种颜色,文本看起来压入页面,而不是,经典的凸版效果。两者都只在文本颜色接近背景颜色时工作;在高对比度的文本上,高光消失。
Fire是唯一预设负垂直偏移,每一层都进一步向上移动,变得更模糊和更红,因此热量似乎从字母上升。
文本阴影会损害可读性还是可访问性?
它可以,并且风险随着模糊和偏移而增长。阴影不会改变 WCAG 测量的对比度,该对比度是在文本颜色和背景颜色之间计算的。 WCAG 2.1 对比度最小值 4.5:1要求正常文本和3:1要求大文本,而光芒并不能帮助你在纸上满足。
实际上,忙碌的照片上浅色文本后面的一个薄薄的暗影使字母更容易挑选出来,因为它将字形边缘与图像分开。小文本上的重光会起到相反的作用:光环充满了字母计数器,例如"e"和"a"这个词变成了糊状。
一些坚持不懈的指导方针:
- 保持身体文字阴影微妙。类似的东西
0 1px 2px rgba(0, 0, 0, 0.3)是充足的。 - 为大显示文本保存多层效果,大约 32px 及更高版本。
- 如果您的网站有主题切换,请检查对明暗背景的影响。
- 不要靠影子来拯救低对比度,先修复文字颜色。
- 在手机上以航向到达的最小尺寸进行测试,其中阴影比例最大。
是什么减慢了文本阴影的速度,以及哪些常见错误?
Blur是昂贵的部分,每个模煳的图层都要在每次重新绘图上光栅化和模煳化,成本缩放有模煳的半径和文本量。The MDN 参考文本阴影 covers the syntax。性能方面简单推理:单标题上的三层发光很便宜,长篇文章的每一段都一样发光,在滚动时重新绘制,是低功耗手机上常见的jank来源。
一次又一次出现的错误:
| 错误 | 症状 | 修复 |
|---|---|---|
写点差值就像 0 0 4px 2px red |
整个声明都被忽略了 | 删除第四个长度;文本阴影没有传播 |
添加 inset |
声明被忽视 | 文本不支持;改用较轻的浮雕 |
负模糊,例如。 -2px |
声明被忽视 | 模糊必须为零或为正 |
| 层之间缺少逗号 | 声明被忽视,没有任何效果 | 用逗号分隔每个阴影 |
| 发光夹在边缘 | 光环沿直线切割 | 家长有 overflow: hidden;添加填充 |
| 发光不可见 | 似乎什么也没发生 | 光在光背景上发光;在黑暗中测试 |
供应商前缀 -webkit-text-shadow |
无害但无用 | 用普通 text-shadow;它不需要前缀 |
前三个值得强调,单个无效部分使整个声明无效,而不仅仅是那一层,因此十二层 3D 效果的第四层中的错别字会删除所有十二个生成器's 输出始终有效,这是在那里构建堆栈并将其粘贴进去的原因之一。
您应该何时使用生成器而不是手写文本阴影?
单软影打字比点击快,任何三层或三层以上的东西在视觉上构建都快,因为你在判断一个眼神,而一个眼神很难从数字中判断,生成器对于学习也很有用:选择一个预设,改变一层,观察哪一部分效果移动。
Toolz生成器完全在浏览器中运行,预览、图层列表和CSS都是在页面上计算的,上传什么都没有,加载后一直离线工作,免费,不注册,复制CSS算在每日使用津贴中,就像站点上的其他工具一样;编辑和预览则不然。
它不做什么:它没有 em 或 rem units,没有键入的数字字段,没有拖动重新排序图层,也没有预览中的自定义字体,对于那些,复制声明并在自己的样式表或浏览器dev工具中进行调整。
如果您想要的效果是模糊或重新着色的元素而不是阴影, CSS 过滤器 如 drop-shadow() 並 blur() 适用于整个元素,包括图像。文本后面的磨砂面板是一项工作 玻璃化生成器的,而软挤压纽扣属于 新形态生成器。全套可视化CSS构建器在 CSS 工具集线器并且 CSS梯度生成器导轨 当您想要发光标题后面的渐变背景时,可以很好地与文本效果配对。
一个有效的例子:照片上的可读英雄标题
说你有一张明亮的海滩照片上有白色的64px文字,字母不断消失在沙子里,目标是易读性第一,风格第二。
从开始 文本阴影工具 用软预设: 0px 2px 4px #00000059.在过于微弱的繁忙图像上。将不透明度提高到60%,模糊到8px,这就给出了 0px 2px 8px #00000099。边缘与背景分开,但细笔画仍然闪烁。
添加第二层,零偏移、2px 模糊和 50% 黑色: 0px 0px 2px #00000080。因为你是第二加的, 所以在第一层后面涂漆, 但是它拥抱字形边缘, 给每一笔都有一条薄薄的深色边缘, 结果:
.hero-title {
color: #fff;
font-size: 64px;
text-shadow: 0px 2px 8px #00000099, 0px 0px 2px #00000080;
}
2层,渲染都便宜,标题撑起沙子、天空和冲浪,在航向降至36px的手机上,相同的像素值按比例更重;转换为 em 将它们保持在步骤中(0 0.03em 0.125em 64px时)。
