查看: 744|回复: 32

[活动] 【凡哥教程第十五讲作业】制作文本阴影(文本阴影和使用元素背景渲染文本)

[复制链接]
发表于 2024-8-4 09:16 | 显示全部楼层 |阅读模式
本帖最后由 花简静 于 2024-8-4 09:18 编辑


凡哥教程第十五讲作业: 请使用静图或动图做元素的背景, 令背景图像仅渲染在文本上,并让文本投射在偏右一点点的后方。


凡哥教程第十五讲——文本阴影及渲染

评分

6

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-8-4 09:19 | 显示全部楼层
@凡哥 报告老师,今天的作业已完成。。辛苦老师瞧一眼对不对

评分

3

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-8-4 09:19 | 显示全部楼层
本帖最后由 花简静 于 2024-8-4 09:21 编辑

<style> .qsfg15 {     padding: 60px;     font: bold 3em sans-serif;     color: transparent;     background: url('https://pic.imgdb.cn/item/65a3730c871b83018ab23f7a.gif') repeat;     background-clip: text;     --webkit-background-clip: text;     filter: drop-shadow(20px -50px 2px #666); } </style> <div class="qsfg15">     凡哥教程第十五讲——文本阴影及渲染 </div>

评分

3

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-8-4 09:22 | 显示全部楼层
本帖最后由 花简静 于 2024-8-4 09:24 编辑

<style> .qsfg15 {     padding: 60px;     font: bold 3em sans-serif;     color: transparent; /* 前景色设置为透明 */     background: url('https://pic.imgdb.cn/item/65a3730c871b83018ab23f7a.gif') repeat;     background-clip: text; /* 将背景图像剪裁按文本剪裁 */     --webkit-background-clip: text; /* 兼容chromium内核 < 120 */     /* 若需要文本阴影应使用 filter 实现,因为 text-shadow 会入侵透明的前景色 */     filter: drop-shadow(20px -50px 2px #666);/*(右20,上50,宽2 黑色)*/ } </style>   <div class="qsfg15">     凡哥教程第十五讲——文本阴影及渲染 </div></div>

评分

3

查看全部评分

点评
回复

使用道具

发表于 2024-8-4 09:30 | 显示全部楼层
好漂亮的作业,静静我就像个白痴一样欣赏着你的精彩,自己无从下手完成作业
点评
回复

使用道具

 楼主| 发表于 2024-8-4 09:51 | 显示全部楼层
清梦 发表于 2024-8-4 09:30
好漂亮的作业,静静我就像个白痴一样欣赏着你的精彩,自己无从下手完成作业 ...

光看我不行,哈哈,亲爱的清梦,你看教程去
点评
回复

使用道具

发表于 2024-8-4 09:53 | 显示全部楼层
好看好看 就是眼睛受不了
点评
回复

使用道具

 楼主| 发表于 2024-8-4 09:58 | 显示全部楼层
墨洛 发表于 2024-8-4 09:53
好看好看 就是眼睛受不了


墨洛来支持啦,开心开心。。。。。
背景图太花,吵眼睛,可以换个静态的~~
点评
回复

使用道具

发表于 2024-8-4 15:28 | 显示全部楼层
哇,静静
这个眼花缭乱
密集恐惧。。。
点评
回复

使用道具

发表于 2024-8-4 17:26 | 显示全部楼层
问好花简静友友,版主效率真高,祝周末愉快
点评
回复

使用道具

您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

手机版|千山论坛 ( 冀ICP备2024055714号 )

GMT+8, 2025-6-9 22:56

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表