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

这篇具有很好参考价值的文章主要介绍了如何使用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 的值来增加或减少渐变效果所覆盖的区域。负值越大,渐变就越突出,而模糊值则使效果在两侧更加分散。文章来源地址https://www.toymoban.com/news/detail-679490.html

到了这里,关于如何使用CSS创建渐变阴影?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS中如何实现文字阴影效果(text-shadow)?

    前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一

    2024年02月11日
    浏览(99)
  • CSS中如何实现元素的渐变背景(Gradient Background)效果?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月10日
    浏览(62)
  • 巧妙使用 CSS 渐变来实现波浪动画

    目录 一、波浪的原理 二、曲面的绘制 三、波浪动画 四、文字波浪动画 五、总结一下 参考资料           之前看到coco[1]的这样一篇文章:纯 CSS 实现波浪效果![2],非常巧妙,通过改变 border-radius 和不断旋转实现的波浪效果,有兴趣的可以去研究一下。 这次尝试一下使

    2024年02月16日
    浏览(43)
  • 如何使用HTML和CSS创建动画条形图?

    动画栏是使用 HTML 和 CSS 创建的图形动画栏。动画栏的布局是使用 HTML 创建的,栏的样式是使用 CSS 制作的。普通的条形图可以正常创建,但我们必须创建带有动画的条形图,因此我们将使用 CSS 过渡动画属性来使其具有动画效果。我们将构建一个与音乐动画条同步器相同的动

    2024年02月10日
    浏览(45)
  • CSS 设置渐变背景 CSS 设置渐变边框

    一、css渐变背景添加透明度opacity css渐变背景经常会在项目开发中遇到,此时UI如果给出的是单一的渐变背景(没有背景透明度),这个我们会很快的写出代码,如下: 但偶尔的时候UI会给煎饼的背景色添加一个透明度,但是使用 opacity属性会导致文本也会有透明度 ,接下来给

    2024年02月09日
    浏览(45)
  • CSS布局基础(CSS属性特征 & 盒子阴影 & 文字阴影)

    块元素 独占一行,默认宽度100% 可设置宽高,内外边距 大部分块元素内部可以放 任意元素 文字类块元素 p / h1-h6内部,不能放块元素 常见块元素 h1-h6 p div ul ol dl li … 行内元素 在同一行显式 不能直接设置宽高,默认宽高就是实际内部内容宽高 内部只能容纳文本或者行内元素

    2024年02月01日
    浏览(79)
  • CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)

    CSS3是用于为HTML文档添加样式和布局的最新版本的层叠样式表 (Cascading Style Sheets)。下面是一些常用的CSS3属性及其详细解释: border-radius:设置元素的边框圆角的半径。可以使用四个值设置四个不同的圆角半径,也可以只使用一个值来设置统一的圆角。 box-shadow:创建一个元

    2024年02月08日
    浏览(55)
  • 【css技巧】css实现边框渐变

    海鲸AI-ChatGPT4.0国内站点,支持设计稿转代码:https://www.atalk-ai.com 在CSS中实现边框渐变效果,你不能直接应用渐变到 border 属性上,因为CSS标准不支持这样的操作。但是,你可以使用一些技巧来模拟边框渐变的效果。以下是一些常用的方法: 方法1:使用伪元素和 background-ima

    2024年01月23日
    浏览(49)
  • 【常见CSS扫盲之渐变效果】好看的24种CSS渐变效果汇总(附源码)

    【 写在前面 】web开发过程中,页面背景色想要一个渐变的效果很多时候网上一找全是官网那种很丑的色系,尤其是一些按钮和一些大背景色时候,不能搞得很yellow,今天我就做个工具人给大家罗列一些我在工作过程中总结的一些好看的渐变效果,及实现方式。 涉及知识点

    2024年02月06日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包