CSS 实现多彩、智能的阴影效果


Posted in HTML / CSS onMay 12, 2021

CSS 实现多彩、智能的阴影效果

背景

有没有想过如何创建从前景元素中继承某些颜色的阴影效果?阅读本文并找出如何实现方法吧!

前几天我经过家得宝(Home Depot,美国家得宝公司,全球领先的家居建材用品零售商),他们正在大规模展销正在出售的智能灯 ?,其中一种是一系列灯泡位于电视机后面,它们会投射出与电视机前景屏幕上显示的颜色相近的灯光,类似于以下图片所示。

CSS 实现多彩、智能的阴影效果

注意电视后面发生了什么。电视机屏幕前景中显示的颜色被灯投影成彩色阴影背景。随着屏幕上颜色的变化,背景投影颜色也发生变化。真的很酷,对吧?

看到这一点后,自然而然地我首先想到的是,能否使用 web 开发技术创建一个五颜六色的,并且足够聪明可以模拟前景颜色的阴影呢?事实证明,在只使用 CSS 的情况下,完全可以实现这种效果。在本文中,我们将研究如何实现。

开干!

令其成真

在接下来的段落中你将会发现,刚开始时,乍一看仅使用 CSS 来创建智能的彩色阴影似乎是一项艰巨的任务,当我们循序渐进,把困难部分拆分成更小的部分时,你就会发现一切都会变得容易理解消化。在接下来的章节中,我们将创建一个如下所示的示例:

CSS 实现多彩、智能的阴影效果

你看到的是一张寿司 ? 的图片,后面有与前景颜色相对应的阴影。为了强调我们所做的是动态的,给阴影增加了一个脉动动画效果。通过这个有效的示例,让我们深入探讨如何仅在使用 HTMLCSS 的情况下让一切变得生动起来。

展示图片

用于展示寿司 ?HTML 如下所示并没有什么特别:

<div class="parent">
  <div class="colorfulShadow sushi"></div>
</div>

我们有一个父级 div 元素 .parent,它包含一个子级元素 .suchi 用于展示 ?。我们通过使用一张背景图片的形式来实例化 ?.sushi 元素的具体样式规则如下:

.sushi {
  margin: 100px;
  width: 150px;
  height: 150px;
  background-image: url("https://www.kirupa.com/icon/1f363.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

在上面样式规则中,我们将 div 设置为 150 * 150 宽高像素,并且设置了 background-image 及相关属性,如果展示一下我们现在所实现的结果,可以看到如下图所示的内容。

CSS 实现多彩、智能的阴影效果

创建阴影

现在我们已经展示出了我们的寿司 ? 图片,剩下更加有趣的部分就是来定义阴影。我们将使用指定一个子伪元素 ::after 来定义阴影,它将做 3 件事情:

  • 直接位于图片所在 div 的后面;
  • 继承与父元素相同的背景图像;
  • 通过滤镜产生出多彩的 drop-shadow 阴影效果。

上述3个功能由以下2个样式规则实现:

.colorfulShadow {
  position: relative;
}
.colorfulShadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
  z-index: -1;
}

花一点时间来浏览下这里的实现,密切关注每个属性和对应值。最值得注意的是 background 属性和 filter 属性。 background 的值是 inherit,这意味着它将继承父级元素的背景值:

background: inherit;

filter 属性定义了两个滤镜值:drop-shadowblur

filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);

我们的 drop-shadow 滤镜设置了一个 50% 透明度的黑色阴影。blur 滤镜为为元素设置 20px 的模糊效果。这两个滤镜的结合最终就可以创造出多彩的阴影,当这两条样式规则生效时,我们就可以看到如下图出现在寿司 ? 图像后面彩色的阴影:

CSS 实现多彩、智能的阴影效果

到这一点,我们已经实现了很多。为了完整性,如果你想要多彩的阴影具有放大缩小的动画效果,以下额外的 CSS 可以帮你实现:

.colorfulShadow {
  position: relative;
}
.colorfulShadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
  z-index: -1;
  /* animation time! */
  animation: oscillate 1s cubic-bezier(.17, .67, .45, 1.32) infinite alternate;
}

@keyframes oscillate {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.3, 1.3);
  }
}

如果你想在不使用循环动画效果的情况下增强交互性,也可以使用 CSS transition 来改变阴影的行为,如在 hover 操作情况下。需要强调的难点是对待伪元素只需要像对待用 HTML 创建的或 JavaScript 动态创建的元素一样,唯一的不同是这个元素完全是仅使用 CSS 创建的!

结论

伪元素允许我们使用 CSS 来创建通常在 HTMLJavaScript 领域内完成的元素创建任务。对于我们多彩的智能阴影来说,我们依赖于父元素有一个背景图像集,这使得我们定义一个既可以继承父级背景细节又可以设置模糊效果和投影效果的子元素变得容易。虽然这一切都很好,减少了我们大量的复制粘贴工作,但是这种方法也不是很灵活。

如果我想将这样的阴影应用到一个不只是带有背景图像的空元素上,该怎么办呢?如果我有一个 HTML 元素如一个按钮或组合框,我想应用这种阴影效果呢?一种解决方案是依靠 JavaScript 复制 DOM 中的相应元素,将其放置在前台元素底层,应用过滤器,这样也是一种方法。虽然这可以实现效果,但我想到这个有点重复 DOM 元素的沉重过程就不寒而栗。更糟糕的是,JavaScript 没有将你想提供的任意视觉意向转换为渲染目标位图的能力!?

本文是翻译,原文地址请浏览:https://www.kirupa.com/html5/creating_colorful_smart_shadows.htm
本文地址:https://www.cnblogs.com/dragonir/p/14758359.html 作者:dragonir

到此这篇关于CSS 实现多彩、智能的阴影的文章就介绍到这了,更多相关css实现阴影内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
为什么你写的height:100%不起作用
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 #HTML / CSS
background-position百分比原理详解
不要在HTML中滥用div
css display table 自适应高度、宽度问题的解决
CSS 新特性 contain控制页面的重绘与重排问题
You might like
Laravel实现表单提交
2017/05/07 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
JS中的三个循环小结
2017/06/20 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
设置python3为默认python的方法
2018/10/31 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
期终自我鉴定
2014/02/17 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫