如何使用CSS创建渐变阴影?

随着网络的不断发展,制作漂亮的 UI 是提高客户在网站上的参与度的最重要的工作之一。改善前端外观的方法之一是在 CSS 中应用渐变阴影。应用渐变阴影的两种最重要的方法是线性渐变和径向渐变。

渐变阴影可用于吸引用户对特定信息的注意力,应用悬停或焦点效果,或为网站提供 Web3 外观和感觉。以下我们将通过实际示例来分析两种渐变阴影。

我们将利用两个重要的CSS概念来获得效果,一个是filter属性,另一个是::after伪类。伪类将用于创建假背景,而过滤器属性将用于对周围背景应用模糊效果。

方法一:线性渐变阴影

在此示例中,我们将了解如何在卡片上应用线性渐变阴影效果。

语法

.classname::after{	background: linear-gradient(direction, color1, [color2, color3.......]);inset: -0.5rem;filter: blur(25px);.......
}

 

其中,classname 是指分配给给定标签的类,direction 属性表示颜色的线性排列应沿哪个方向排列。这可以以“deg”形式提供,也可以使用预先设计的字符串(例如“to right”)。

算法

第一步:创建网站的html文档骨架,并为需要渐变效果的标签指定类名。

第 2 步:使用 ::after 伪类,其类名与分配给标记的类名相同。

第 3 步:使用 Linear−gradient() CSS 函数用所需的渐变颜色填充伪类的背景。

第4步:为了确保伪类永远不会叠加在原始类上,请在伪类中添加 z−index 属性,其值低于分配给原始类的值。

第5步:给伪类添加一点inset属性,使原始类不完全覆盖背景。

第6步:最后应用渐变阴影效果,对伪组件应用模糊。

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Linear Gradient Shadow</title>
</head>
<body><div class="gradient"><h1>Welcome to Tutorials Point</h1></div><style>*{margin: 0px;padding: 0px;}.gradient{margin-top: 20px;margin-left: 5%;width: 90%;position: relative;border-radius: 10px;padding-top: 15px;padding-bottom: 15px;padding-right: 10px;padding-left: 10px;background-color: black;}h1{color: white;text-align: center;}.gradient::after{content: "";position: absolute;z-index: -100;background: linear-gradient(to right, blue, cyan,lime,  green, yellow, orange, red);inset: -0.5rem;filter: blur(25px);}</style>
</body>
</html>

 

方法二:径向渐变阴影

在此示例中,我们将了解如何将径向渐变阴影效果应用到相同的卡片效果并观察变化。

语法

.classname::after{	background: radial-gradient(color1, [color2, color3.......]);inset: -0.5rem;filter: blur(25px);.......
}

 

算法

第一步:创建网站的html文档骨架,并为需要渐变效果的标签指定类名。

第 2 步:使用 ::after 伪类,其类名与分配给标记的类名相同。

第 3 步:使用 Radial−gradient() CSS 函数用所需的渐变颜色填充伪类的背景。

第4步:为了确保伪类永远不会叠加在原始类上,请在伪类中添加 z−index 属性,其值低于分配给原始类的值。

第5步:给伪类添加一点inset属性,使原始类不完全覆盖背景。

第6步:最后应用渐变阴影效果,对伪组件应用模糊。

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Radial Gradient Shadow</title>
</head>
<body><div class="gradient"><h1>Welcome to Tutorials Point</h1></div><style>*{margin: 0px;padding: 0px;}.gradient{margin-top: 20px;margin-left: 5%;width: 90%;position: relative;padding-top: 50px;padding-bottom: 50px;border-radius: 10px;padding-right: 10px;padding-left: 10px;background-color: black;}h1{color: white;text-align: center;}.gradient::after{content: "";position: absolute;z-index: -100;background: radial-gradient(yellow, red, blue);inset: -1rem;filter: blur(10px);}</style>
</body>
</html>

 

总结

径向渐变颜色源自标签的中心,从上面的例子可以看出,黄色完全被黑色背景叠加,而在卡片侧面的中点处发现了一些红色的痕迹。另一方面,在线性渐变中,没有观察到叠加,因为它根据提供的方向沿所有边均匀分布所有颜色。

我们还可以调整 inset 和 Blur 的值来增加或减少渐变效果所覆盖的区域。负值越大,渐变就越突出,而模糊值则使效果在两侧更加分散。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/63279.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【LeetCode75】第四十三题 钥匙和房间

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 给我们一个数组&#xff0c;表示对应的房间里拥有能开启的对应索引号的钥匙。 一开始我们只能进入0号房间&#xff0c;也就是数组里索引…

go中的并发

goruntine(协程) 每一个并发的执行单元叫做一个goruntine&#xff0c;要编写一个并发任务&#xff0c;可以在函数名前加go关键字&#xff0c;就能使这个函数以协程的方式运行&#xff0c; 如&#xff1a;go 函数名&#xff08;函数参数&#xff09;、 如果函数有返回值&…

【力扣每日一题01】两数之和

开了一个新专栏&#xff0c;用来记录自己每天刷题&#xff0c;并且也是为了养成每日学习这个习惯&#xff0c;期待坚持一年后的自己&#xff01; 一、题目 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&am…

[.NET/WPF] 设置按钮, 以及其他任何包含边框的控件的圆角

在 WPF 中, 按钮包含一个 “边框”, 很多时候需要设置按钮的圆角, 但是按钮并没有提供一个属性用来设置边框圆角. 下面以按钮为例, 列举几种常用的设置圆角的方式. 通过附加属性 定义一个附加属性, 然后在各个地方就能直接方便的使用了, 下面是实际使用方式: <Button ut…

SpringBoot集成WebSocket

SpringBoot集成WebSocket 项目结构图 项目架构图 前端项目 socket.js 注意前端这里的端口是9000, 路劲是ws开头 function createScoket(token){var socket;if(typeof(WebSocket) "undefined") {console.log("您的浏览器不支持WebSocket");}else{var ho…

linux C++ 海康截图Demo

项目结构 CMakeLists.txt cmake_minimum_required(VERSION 3.7)project(CapPictureTest)include_directories(include)link_directories(${CMAKE_SOURCE_DIR}/lib ${CMAKE_SOURCE_DIR}/lib/HCNetSDKCom) add_executable(CapPictureTest ${CMAKE_SOURCE_DIR}/src/CapPictureTes…

小兔鲜儿 - 地址模块

目录 小兔鲜儿 - 地址模块 准备工作​ 静态结构​ 地址管理页​ 地址表单页​ 动态设置标题​ 新建地址页​ 接口封装​ 参考代码​ 地址管理页​ 接口调用​ 参考代码​ 修改地址页​ 数据回显​ 更新地址​ 表单校验​ 操作步骤​ 删除地址​ 侧滑组件用法…

dji uav建图导航系列()ROS中创建dji_sdk节点包(一)项目结构

文章目录 1、整体项目结构1.1、 目录launch1.2、文件CMakeLists.txt1.3、文件package.xml1.4、目录include1.4、目录srv在ROS框架下创建一个无人机的节点dji_sdk,实现必需的订阅(控制指令)、发布(无人机里程计)、服务(无人机起飞降落、控制权得很)功能,就能实现一个类似…

基于java Swing 和 mysql实现的飞机订票系统(源码+数据库+ppt+ER图+流程图+架构说明+论文+运行视频指导)

一、项目简介 本项目是一套基于java Swing 和 mysql实现的飞机订票系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、项目文档、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过…

myspl使用指南

mysql数据库 使用命令行工具连接数据库 mysql -h -u 用户名 -p -u表示后面是用户名-p表示后面是密码-h表示后面是主机名&#xff0c;登录当前设备可省略。 如我们要登录本机用户名为root&#xff0c;密码为123456的账户&#xff1a; mysql -u root -p按回车&#xff0c;然后…

【0901作业】QTday3 对话框、发布软件、事件处理机制,使用文件相关操作完成记事本的保存功能、处理键盘事件完成圆形的移动

目录 一、思维导图 二、作业 2.1 使用文件相关操作完成记事本的保存功能 2.2 处理键盘事件完成圆形的移动 一、思维导图 二、作业 2.1 使用文件相关操作完成记事本的保存功能 void Widget::on_saveBtn_clicked() {QString filename QFileDialog::getSaveFileName(this,&…

四川大学874考研真题00-23

22, 2022年硕士学位研究生入学考试试题回忆版 数据结构 1&#xff0e;一个时间复杂度为n2 的算法运行&#xff0c;m1算n个问题用时1秒&#xff0c;m2处理器是m1效率的64倍&#xff0c;则m2每秒能计算&#xff08;&#xff09;个问题。 A. 64n B. 8n …

目录扫描+JS文件中提取URL和子域+403状态绕过+指纹识别(dirsearch_bypass403)

dirsearch_bypass403 在安全测试时&#xff0c;安全测试人员信息收集中时可使用它进行目录枚举&#xff0c;目录进行指纹识别&#xff0c;枚举出来的403状态目录可尝试进行绕过&#xff0c;绕过403有可能获取管理员权限。不影响dirsearch原本功能使用 运行流程 dirsearch进行…

【狂神】Spring5笔记(10-19)

又是美好而努力的一天呀~ __ /|* * * * * * / * * * / * * * * / * * * * * * * happy valentines day * * * * …

自然语言处理-NLP

目录 自然语言处理-NLP 致命密码&#xff1a;一场关于语言的较量 自然语言处理的发展历程 兴起时期 符号主义时期 连接主义时期 深度学习时期 自然语言处理技术面临的挑战 语言学角度 同义词问题 情感倾向问题 歧义性问题 对话/篇章等长文本处理问题 探索自然语言…

电脑莫名其妙重启 为设备 ROOT\DISPLAY\0000 加载驱动程序 \Driver\WUDFRd 失败

卸载向日葵即可解决&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;下面是报错日志&#xff0c;估计是远程连接导致的问题

JVM工具-1. jps 虚拟机进程状态工具

文章目录 1. jps介绍2. jps命令格式3. jps工具主要选项4. jps -q5. jps -m6. jps -l7. jps -v 1. jps介绍 jps(JVM Process Status Tool)&#xff1a;虚拟机进程状态工具&#xff0c;可以列出正在运行的虚拟机进程&#xff0c;并显示虚拟机执行主类&#xff08;Main Class&…

ARM寄存器组

CM3 拥有通用寄存器 R0‐R15 以及一些特殊功能寄存器。 R0-R7&#xff0c;通用目的寄存器 R0-R7也被称为低组寄存器&#xff0c;所有指令可以访问它们&#xff0c;它们的字长为32位&#xff0c;复位后的初始值是不可预料的。 R8-R12&#xff0c;通用目的寄存器 R8-R12也被称…

汽车以太网协议栈

《大师说》栏目上线啦# 《大师说》栏目是怿星科技2023年推出的深度思考栏目&#xff0c;通过邀请内部专家&#xff0c;针对智能汽车行业发展、技术趋势等输出个性化的观点。每期一位大师&#xff0c;每位一个话题&#xff0c;本期由我们怿星的CTO虞胜伟&#xff0c;进行分享。…

Elasticsearch 优化

Elasticsearch 优化 2.1硬件选择 Elasticsearch 的基础是 Lucene &#xff0c;所有的索引和文档数据是存储在本地的磁盘中&#xff0c;具体的 路径可在 ES 的配置文件 ../config/elasticsearch.yml 中配置&#xff0c;如下&#xff1a; #----------------------------…