【我的前端】CSS启示录:CSS写出超级美观的阴影效果

简介: 在我看来,最好的网站和web应用程序对它们具有切实的"真实”质量。实现这种质量涉及很多因素,但阴影是一个关键因素。

如何用CSS写出超级美丽的阴影效果

在我看来,最好的网站和web应用程序对它们具有切实的"真实”质量。实现这种质量涉及很多因素,但阴影是一个关键因素。

然而,当我环顾网络时,很明显,大多数阴影并不像它们所希望的那样丰富。网络上覆盖着模糊的灰色盒子,看起来并不像影子。

在本文中,我们将学习如何将典型的箱形阴影转换为美丽、逼真的阴影。


为什么要使用阴影

我保证,我们很快就会谈到有趣的CSS技巧。但首先,我想退后一步,谈谈为什么阴影存在于CSS中,以及我们如何最大限度地利用它们。

阴影表示高程,而较大的阴影表示更高的高程,如果我们有策略地使用阴影,我们可以创造深度的错觉,就好像页面上的不同元素在不同级别上浮动在背景之上一样。

下面是一个示例,拖动”显示滑块"以查看我的意思。


技巧

链接到此标题压条

像Blender这样的现代3D插图工具可以通过使用一种名为 光线追踪 的技术产生逼真的阴影和照明。



在光线追踪中,数百束光从相机中射出,从场景中的表面反弹数百次。这是一种计算机成本高昂的技术,生成单个图像就可能需要几分钟到几小时!

Web 用户哪里来的这种耐心,因为算法更加简陋,它以我们的元素形状创建一个框,并对其应用基本的模糊算法 box-shaow。

我们将不使用单个框阴影,而是将一些框阴影堆叠在一起,偏移量和路径有不同。

其实有时候前端的原理说多了全是废话,还不如直接上一组代码呢!

滤镜:阴影

在本文中一直隐藏这一个属性,它是很棒很全面的工具,但它并不是我们在CSS中唯一的阴影选项:box-shndow ''box-shndow

html代码

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <div class="box with-box-shadow">
            box-shadow
        </div>
        <div class="box with-drop-shadow">
            drop-shadow
        </div>
    </div>
</body>
</html>

CSS代码

.with-box-shadow{
    box-shadow:
    1px 2px 4px hsl(220deg 60% 50%);
}
.with-drop-shadow{
    filter: drop-shadow(
        1px 2px 4px hsl(220deg 60% 50%)
    );
}
.box {
    width: 150px;
    height: 150px;
    background-color: white;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper {
    display: flex;
}

效果图


语法看起来几乎相同,但它产生的阴影是不同的。这是因为该属性实际上是与SVG筛选器的CSS挂钩。正在使用的SVG高斯模糊,这是一种与使用的模糊算法不同的模糊算法 filter''drop-shadow''box-shdow。

写在最后

希望本教程能启发您在本文源码的基础上加以添加和调整,亦或是设计出更美观、更完美的阴影!

相关文章
|
1月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
30天前
|
前端开发 UED 开发者
精通 CSS 阴影效果:从基础到高级应用
本文详细介绍了CSS阴影效果的使用方法,包括`box-shadow`和`text-shadow`的基本语法、参数解释及进阶应用。通过多个示例展示了如何实现外阴影、内阴影、渐变阴影以及多重阴影效果,并结合实际场景如浮动按钮和卡片式设计,说明了阴影与背景的综合应用。此外,还提供了性能优化建议,帮助开发者在确保视觉效果的同时提升页面性能。最后,总结了CSS阴影的重要性及其对网页美观度和用户体验的提升作用。
214 6
|
1月前
|
前端开发 开发者 UED
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
53 1
|
3月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
68 6
|
3月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
77 4
|
4月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
474 1
|
4月前
|
前端开发 UED
如何使用css给一个盒子加上好看的hover阴影效果
如何使用css给一个盒子加上好看的hover阴影效果
130 1
|
4月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
4月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
105 2

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡