多年来,我的影子看起来很假,我不明白为什么。我会写 box-shadow: 0 5px 10px black、弄个泥灰色的光环,调低音,继续前进感觉隐约不满,卡片看起来像是瘀伤,而不是阴影,直到我开始拆开我欣赏的设计系统- 卡片似乎真正漂浮的那些- 我才意识到这个技巧,他们从来不使用一个阴影,他们堆叠两三个,每个做不同的工作,结果读作光的行为方式光的实际行为方式。
我以 React 和 Tailwind 中构建界面为生,我在 WP Adminify 中维护 WordPress 管理主题,其中阴影承载大量视觉层次结构,并且我构建了 CSS 盒子阴影生成器 on toolz。dev 因为我厌倦了在文本编辑器中手工调优多层阴影,重新加载以查看结果,本指南是我所学到的一切 box-shadow 属性:每个值的作用、分层为何有效、如何避免常见的陷阱以及如何使用生成器在几分钟内从空白元素获取生产 CSS。
TL;博士: 一个CSS
box-shadow采用 X 偏移量、Y 偏移量、模糊半径、扩展半径和颜色,可选insetkeyword。blur软化边缘; 扩散增长或缩小阴影之前模糊 真正的仰角来自堆叠多个逗号分离的阴影,而不是从曲柄一个阴影's不透明度 使用低不透明黑色,一个小的Y偏移,大方模糊,稍微负的扩散 - 然后复制CSS从生成器直接。
盒影属性实际上是做什么的?
box-shadow 元素 's 边框框周围绘制一个或多个阴影,属性在 中指定 CSS 背景和边界级别 3。单个阴影的语法如下所示:
box-shadow: <inset?> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
Xiang要偏移;模煳、散布、颜色可选但你几乎总会Shi设, 以下是每一个所控制, 在调音时我所想的方Mian:
偏移X 水平移动阴影。正值向右推动,负向左。对于大多数界面阴影,您希望将其置于零或接近零,因为现实世界中的光通常来自上方,将阴影笔直向下而不是向侧面投射。
偏移量 Y 垂直移动阴影。正值将其向下推,这是您想要的,对于一个看起来位于页面上方的元素,这是最能控制 " 高" 元素感觉的单一值。
模糊半径 softenses the shadow's edge。零的值给出了硬边阴影,就像一个坚固的形状;较大的值将柔软度分散出去。这不能是负面的。几乎每个看起来很自然的阴影都使用比其Y偏移大几倍的模糊。
传播半径 在模糊涂抹之前改变阴影的大小。正扩散使阴影在每个方向上都更大;负扩散使它缩小。负扩散是紧卡阴影的秘密武器,因为它会拉入阴影,因此不会渗出超出元素。
颜色 是任何有效的CSS颜色。最好的界面阴影在低不透明度下使用黑色或近黑色 - 类似 rgba(0, 0, 0, 0.1) - 而不是完全不透明的灰色,因为半透明的黑色会像真正的阴影那样染上它背后的任何东西。
为什么好的阴影使用不止一层?
Zhe是彻底改变了我的阴影的想法,所以它有它自己的节Du,单影是单的、均匀的斑点,真正的影子不Yi均匀,靠近物体阴影更暗更锐;再远一点,它更轻更漫Yu叠影子来近似那次衰落。
A经典配方是两层:一个紧凑的,稍微暗一点的阴影,它靠近元素并赋予它一个脆的底座,再加上它下面一个更柔软,更宽,更轻的阴影,提供环境扩散之类的东西:
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
浏览器按顺序绘制逗号分隔的阴影,上面是第一个。每一层都很便宜,无论你如何调谐,两三个一起读作真正的深度。这正是生成器是围绕图层而不是单组滑块构建的原因 - CSS 盒子阴影生成器 附带卡片、高架和浮动等预设,这些预设都是多层的,因此您从现实的基础开始,而不是孤独的斑点。
我使用的心理模型:在海拔高度上思考。一张休息卡坐得很低,带有小而紧的阴影。一张下拉或弹出窗口坐得更高,带有更大、更柔和的阴影。一种模式坐得最高。增加海拔意味着增加 Y 偏移并将所有层一起模糊,而不仅仅是使一个阴影变暗。
我如何创造一个内在的影子?
的 inset keyword 翻转元素内部的阴影's 填充框而不是向外抛出。添加 inset 到影子宣言的前面,它会在元素内绘画:
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
Inner shadows是你如何使控件看起来被压制,凹进或雕刻进去。一个文本输入通常读起来更好,带有微妙的插入阴影,表明文本位于内部。按下按钮状态可以将其外阴影交换为内阴影,以感觉身体凹陷。并且整个新形态趋势建立在一个方向的光插入与另一方向的暗插入的配对之上。在生成器中,inset是每层单个切换,因此您可以将inset和outset阴影混合在同一元素中 - 这正是新形态表面所需要的。
如何使用盒子阴影生成器?
流程旨在匹配我的实际工作方式。打开 CSS 盒子阴影生成器 您可以使用已应用的逼真卡片预设来登陆预览元素,因此您永远不会盯着空白画布。
Pick一个预设来接近你想要的- 细微的,卡片的,高架的,浮动的,内在的,发光的,新形态的,或者锐利的,每一个都加载它的全层堆栈,然后选择一个层,和滑块调:偏移X,偏移Y,模糊,散布各有自己的控制,再加上一个颜色选择器,一个不透明滑块,插入切换,预览更新实时拖动,所以你是直接塑造阴影而不是编辑数字和想象结果。
1个深度需要多加1个图层,如果1个图层没什么好用的,就去掉,有个背景切换,在明暗之间切换预览,这很重要,因为在光卡上看起来完美的阴影可以消失,或者在黑暗的那一枚变成丑陋的灰色戒指,在发货前检查两者,可以节省往返。
Xing的时候,复制CSS,你可以抓住平原 box-shadow 声明,或还包括的块 -webkit-box-shadow prefix 如果你必须支持非常旧的 WebKit 构建。将其粘贴到你的样式表、你的样式化组件或你的 Tailwind 任意值中,你就完成了。
Site上的每个工具一样,它完全在你的浏览器中运行,没有上传任何东西,一旦加载它就会保持离线工作,这与我在the中描述的客户端方法相同 数据隐私指南。
现实世界的用例
为设计系统构建高程尺度
置新项目时,我定义了一组固定的高程级别,而不是让每个组件发明自己的阴影。通常,这距离"休息卡"到"模式"我会在生成器中构建每个,复制CSS,然后将它们作为命名值放入我的设计令牌中。每张卡片、菜单和对话框然后引用一个级别,因此整个产品共享一个一致的照明模型。在文本编辑器中手工执行此操作非常痛苦;使用实时预览执行此操作需要几分钟。
制作一张卡片实际上是漂浮的
默认本能是单个暗影,看起来是粘贴的,修复的是两层配方:一层紧密,Y偏移量小,散布负片以锚定卡片,下面有一层更宽、更柔软的环境光。从卡片或高架预设开始,推动值品尝,您会得到一张读取为提升而不是勾勒的卡片。
设计紧迫且集中的状态
交互式反馈通常生活在阴影中。按钮可以失去大部分外阴,并在按下时获得一个小插页,以感觉物理上的推动。一个输入可以携带永久的微妙插页,看起来像井。这些通过切换插页和观看预览来快速原型,并且它们为很少的代码添加了大量感知抛光。
新形态表面
Soft-UI look的话,你需要在同一个元素上指向相反方向的两个阴影- 一个是深色的向下- 右侧,一个是浅色的向上- 左侧- 所以表面看起来是从背景挤压出来的,Neumorphic预设设置了这个,你调校颜色,不透明度,模糊以匹配你的特定背景,它只适用于既不是纯白色也不是纯黑色的背景,深背景切换可以帮助你检查。
盒影与滤镜:滴影
我经常遇到的一个问题:我应该何时使用 filter: drop-shadow() 代替 box-shadow吗?它们看起来相似,但行为不同,选择错误会导致真正的错误。
| 特点 | 盒子阴影 | 滤波器:滴影() |
|---|---|---|
| 跟随 | 的矩形边框框 | 实际可见(非透明)像素 |
| 最好的 | 卡片、按钮、面板、输入 | 标志、图标、透明的 PNG、不规则形状 |
| 支持插入 | 是的 | 否 |
| 支持传播 | 是的 | 否 |
| 多个阴影 | 是的,逗号分隔 | 是的,通过链接过滤器 |
| 影响布局 | 否 | 否 |
简短版本:对于普通矩形元素,请使用 box-shadow --能力更强,支持扩散和插入,而这台生成器就是这样产生的。达到 drop-shadow() 仅当您需要阴影来追踪透明或不规则的形状(例如徽标或切口图标)时,矩形阴影才会看起来错误。
高级提示和陷阱
些被我烧过的东西,首先,影子被剪掉 overflow: hidden on a 祖先。如果你的美丽阴影被神秘地切断,一个祖先正在剪辑它 - 要么给阴影空间,要么移动阴影 overflow 在别处统治。因为 box-shadow 永远不会影响布局,它不会推动相邻元素,这是一个特征,但它也意味着阴影可以在兄弟姐妹下方默默延伸。
其次,许多元素上的巨大模糊会降低绘画性能,尤其是在动画时。如果您在滚动上绘制阴影动画或在长列表中悬停,请观察您的帧速率;有时,在固定静态阴影的伪元素上绘制不透明动画会更便宜。一旦您的 CSS 完成,就将其运行 CSS 迷你器 剃掉冗长的多层阴影添加的额外字节。
第三,不要忘记阴影颜色可以比黑色更多。一个非常微妙的阴影 - 深色版本的表面's色调而不是纯黑色 - 通常看起来比中性灰色更丰富,因为真正的阴影拾取环境颜色是一个小动作,回报不成比例。
如果您正在组装更广泛的 CSS 工具包, web开发人员工具包指南 涵盖了其他基于浏览器的实用程序中影子工作适合的地方,一旦你的影子完成, 梯度生成器 並 颜色选择器 圆润表面造型。如果您想到了可访问性,请将其与 颜色对比检查器 因此,阴影卡片上的内容保持可读性。
常问问题
什么是CSS盒子阴影属性？
box-shadow 在一个元素 's 帧周围添加一个或多个阴影,每个阴影取一个水平偏移量、一个垂直偏移量、一个可选模煳半径、一个可选扩频半径和一个颜色,并可选插入关键字,在框内用逗号分隔多个阴影,并在上面画出第一个阴影。
模糊和传播有什么区别？
Blur半径软化阴影边缘,因此更大的值使其更加扩散,扩散半径改变阴影's大小在模糊之前:正扩散在每个方向上增长,而负扩散缩小它,这就是你如何将阴影紧紧地塞在卡片下,而不是流过它的边缘。
如何在CSS中创建内部阴影？
Inset关键字添加到阴影 inset将阴影画在元素内部's填充框而不是外部,对按下的按钮,输入孔,新形态表面都很有用,切换生成器中的inset开关会自动添加到所选层。
我可以在一个元素上使用多个盒子阴影吗？
Yes。Can可以列出几个阴影在单个框-阴影声明中用逗号分隔,浏览器按顺序绘制它们,第一个在上面。在一个更小、更暗的阴影下面分层一个柔和、宽的阴影是使仰角看起来逼真的标准方法,而不是粘贴在上面。
为什么我的盒子阴影被剪掉了？
A影子在祖先有溢出时被切断:隐藏或当元素坐在剪切容器的边缘时,给影子空间,或将溢出:隐藏规则移到不同的元素,因为盒子-影子不影响布局,它从不推动相邻元素,因此它也可以默默地延伸到兄弟姐妹之下。
box-shadow 和 filter: drop-shadow 有什么区别？
box-shadow 遵循元素's矩形边框框,因此忽略了PNG内部的透明区域或不规则形状 过滤器:drop-shadow() 跟踪实际的可见像素,它适合具有透明度的徽标和图标,对于标准的矩形卡片和按钮,box-shadow 是正确的选择,支持drop-shadow 不具备的扩展和插入。
我还需要 box-shadow 的 -webkit- 前缀吗？
对于现代浏览器来说,没有。 box-shadow 多年来一直没有预先修复并得到广泛支持。只有当您必须支持非常旧的 WebKit 构建时,生成器可以输出的前缀块才有用,并且对于大多数项目来说,仅标准 box-shadow 属性就足够了。
这个盒子阴影生成器是否将我的数据发送到任何地方？
不 。 预览和 CSS 输出完全在您的浏览器中使用 JavaScript 生成。 没有上传或存储任何值，并且该工具在页面加载后继续工作，没有网络连接。
