背景

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

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

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

看到这一点后,自然而然地我首先想到的是,能否使用 web 开发技术创建一个五颜六色的,并且足够聪明可以模拟前景颜色的阴影呢?事实证明,在只使用 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 及相关属性,如果展示一下我们现在所实现的结果,可以看到如下图所示的内容。

创建阴影

现在我们已经展示出了我们的寿司 图片,剩下更加有趣的部分就是来定义阴影。我们将使用指定一个子伪元素 ::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 可以帮你实现:

.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 实现多彩、智能的阴影的更多相关文章

  1. 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画?

    本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣.酷炫的动画效果.认真读完,你将会收获到: 了解 CSS 3D 的各种用途 激发你新的灵感,感受动画之美 对于提升 CSS 动画 ...

  2. CSS进阶内容—盒子和阴影详解

    CSS进阶内容 在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS三大特性 首先我们先 ...

  3. 第七十六节,css颜色和透明度,盒子阴影和轮廓,光标样式

    css颜色和透明度,盒子阴影和轮廓,光标样式 学习要点: 1.颜色和透明度 2.盒子阴影和轮廓 3.光标样式 一.颜色和透明度 颜色我们之前其实已经用的很多了,比如字体颜色.背景颜色.边框颜色.但除了 ...

  4. vs2015web工程中的html引用压缩后css后无法智能提示的问题解决

    环境:win10x64 vs2015企业版 项目:空白web项目(.net framework4) 问题:html页面加入压缩后的css(eg:bootstrap.min.css),编码的时候无法智能 ...

  5. css box-shadow(text-shadow) 阴影学习备忘

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 仅用CSS几步实现赛博朋克2077风格视觉效果

    背景 文章开始之前先简单了解下什么是 赛博朋克,以及什么是 赛博朋克2077. 赛博朋克(Cyberpunk)是"控制论.神经机械学"与"朋克"的结合词,背景大 ...

  7. 仅用CSS实现图片渲染特效 (有学习到了)

    前言 实现图片高亮效果等特效,就不得不提到CSS3的滤镜filter属性,CSS过滤器是一个强大的工具,可以使用它来实现不同的视觉效果(有点像浏览器的Photoshop过滤器).CSS filter属 ...

  8. CSS边框(圆角、阴影、背景图片)

    1.圆角  border-radius是向元素添加圆角边框. 使用方法: border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4 ...

  9. 仅使用css实现点击 控制元素的显示与隐藏!

    视频教程:https://www.bilibili.com/video/BV1uE411Q7tx?p=15&spm_id_from=pageDriver 大致方法:在被点击的元素后面 放一个c ...

随机推荐

  1. ES6学习笔记(3)- 对象的功能性扩展

    一.什么是对象字面量 对象字面量就是创建对象(Object)的一种简单容易理解的方式,再通俗点就是所谓的键值对的集合.举个简单的例子: let book = { name: 'JavaScript', ...

  2. IPFS挖矿的成本有哪些?

    IPFS作为区块链新贵,近来风头一时无量.截止3月9日,Filecoin以257亿的流通市值超越门罗币,稳居区块链流通排行榜. 无论什么投资,其门槛一定在成本.今天就和大家细说投资市面上常见实体矿机的 ...

  3. 1、MyBatis教程之环境准备和简介

    1.环境准备 jdk 8 + MySQL 5.7.19 maven-3.6.1 IDEA 学习前需要掌握: JDBC MySQL Java 基础 Maven Junit Idea快捷键 一键格式化代碼 ...

  4. Hystrix 实战经验分享

    一.背景 Hystrix是Netlifx开源的一款容错框架,防雪崩利器,具备服务降级,服务熔断,依赖隔离,监控(Hystrix Dashboard)等功能. 尽管说Hystrix官方已不再维护,且有A ...

  5. 【LiteOS】LiteOS任务篇-源码分析-创建任务函数

    目录 前言 链接 参考 笔录草稿 部分源码分析 源码分析 LOS_TaskCreate函数 LOS_TaskCreateOnly函数 宏 OS_TCB_FROM_PENDLIST 和 宏 LOS_DL ...

  6. 「HTML+CSS」--自定义按钮样式【002】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  7. Android学习之CoordinatorLayout+FloatingActionButton+Snackbar

    CoordinatorLayout •简介 CoordinatorLayout 协调布局,可以理解为功能更强大的 FrameLayout 布局: 它在普通情况下作用和 FrameLayout 基本一致 ...

  8. Python | random 模块:Python 中如何生成随机数和随机抽样?

    random 是平时开发过程中常用的一个模块,该模块实现了各种分布的伪随机数生成器,以及和随机数相关的各种实用函数.基本函数 random() 在区间 [0.0, 1.0) 内均匀生成随机浮点数,是模 ...

  9. 如何使用Topshelf与.NET泛型主机建立Windows服务

    1 前置阅读 在阅读本文章之前,你可以先阅读: Topshelf一个用于使用.NET构建Windows服务框架 2 使用 2.1 创建应用程序 首先,创建一个新的控制台应用程序并从nuget获取Top ...

  10. 【linux】驱动-8-一文解决设备树

    目录 前言 8. Linux设备树 8.1 设备树简介 8.2 设备树框架 8.2.1 设备树格式 8.2.1.1 DTS 文件布局 8.2.1.2 node 格式 8.2.1.3 propertie ...