文字底能玩出多少花样(五)实现渐变文字和文字倒影

简介: 文字底能玩出多少花样(五)实现渐变文字和文字倒影

前言


该文作为《文字效果到底能玩出多少花样》的第五篇文章,带大家实现 渐变文字和文字倒影


基础知识


今天因为要实现两种效果,预备知识有点多,分别是 background-clip 属性、 -webkit-box-reflect 属性。


  • background-clip: 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。有四个属性值,下面来一一介绍一下:


  • border-box: 背景延伸至边框外沿(但是在边框下层)
  • padding-box: 背景延伸至内边距(padding)外沿。不会绘制到边框处
  • content-box: 背景被裁剪至内容区(content box)外沿
  • text: 背景被裁剪成文字的前景色


  • -webkit-box-reflect


-webkit-box-reflect: [ above | below | right | left ]? <length>? <image>?
复制代码


  • 方位: 设置倒影的朝向
  • 偏移大小: 设置倒影偏离初始元素的距离
  • 遮罩图片: 给元素倒影添加遮罩层,效果语法类似于 background-image 属性。


渐变文字


由于 color 属性不能设置渐变色,所以渐变文字的实现并不简单,但众多大佬也通过探索也发掘了好多种实现方案。例如使用 canvas 的

CanvasRenderingContext2D.createLinearGradient()方法实现;使用 background-clip: text 配合 background 来实现;-webkit-mask 配合 attr 来实现等。

本文主要使用 background-clip: text 配合 background 来实现。


  1. background 设置渐变色


background: linear-gradient(90deg, #7e40ee, #00f, #63d9ee);
复制代码

image.png


2. background-clip: text 裁剪渐变


-webkit-background-clip: text;
background-clip: text;
复制代码


  1. 文字 color 设置为透明


color: transparent;
复制代码


渐变文字效果就实现了。

image.png


文字倒影效果


chrome 浏览器提供了 -webkit-box-reflect 属性,通过这个属性可以轻松实现 chrome 下的倒影效果。


color: rgb(237, 125, 49);
-webkit-box-reflect: below -2px -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgba(0, 0, 0, 0)),
    to(rgba(255, 255, 255, 0.2))
  );
复制代码


image.png


注意: 我实验了一下,必须在 border box 元素上定义该属性,span 上设置无效。并且当前属性在 Firefox 和 Opera 上可能不兼容。


目录
打赏
0
0
0
0
5
分享
相关文章
给文字动画注入语义灵魂!港科大开源文字跳动技术,每个单词都浪漫
【5月更文挑战第21天】港科大开源动态排版技术(Dynamic Typography),旨在为文字动画赋予语义深度,让每个单词都能生动表达情感。该技术通过字母变形和运动效果,结合神经位移场与端到端优化,生成可读且有表现力的动画。实验显示其优于其他基线方法,但尚无法处理复杂语义和高昂的应用成本。[论文链接](https://arxiv.org/abs/2404.11614)
91 4
|
9月前
如何实现图片多种颜色的文字混排并且带的背景颜色范围比文字图片范围大
如何实现图片多种颜色的文字混排并且带的背景颜色范围比文字图片范围大
55 1
|
9月前
如何实现带背景的镂空文字
如何实现带背景的镂空文字
63 1
Photoshop制作漂亮白色荧光文字图片
Photoshop制作漂亮白色荧光文字图片
88 0
💃接着奏乐!接着舞!让文字随着音乐跃动吧!
💃接着奏乐!接着舞!让文字随着音乐跃动吧!
224 0
文字到底能玩出多少花样(四)实现跃动的文字
文字到底能玩出多少花样(四)实现跃动的文字
172 0
文字到底能玩出多少花样(四)实现跃动的文字
文字到底能玩出多少花样(三)使用background实现花式下划线
文字到底能玩出多少花样(三)使用background实现花式下划线
409 0
文字到底能玩出多少花样(三)使用background实现花式下划线
文字到底能玩出多少花样(二)background-clip实现hover文字填充效果
文字到底能玩出多少花样(二)background-clip实现hover文字填充效果
246 0
文字到底能玩出多少花样(二)background-clip实现hover文字填充效果
程序人生 - 猫咪瞳孔的颜色
程序人生 - 猫咪瞳孔的颜色
133 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等