65.9K
CodeProject 正在变化。 阅读更多。
Home

CSS box-shadow 集合

madeas
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.36/5 (8投票s)

2018 年 6 月 8 日

CPOL

5分钟阅读

viewsIcon

17179

跨浏览器 CSS box-shadow 集合 + 生成器 box-shadows.min.css 文件 + Box-shadow CSS 生成器

Box-shadows.css

跨浏览器 CSS box-shadow 集合

  • + 生成器 box-shadows.min.css 文件
  • + Box-shadow CSS 生成器

_________________________

版本 1.0.3

随意尝试、实验、使用！

box-shadows.css 是一个简洁愉悦的阴影集合，供您在项目中使用。非常适合表格、主页内容、容器、导航和其他网站块。

查看 GitHub 仓库。

目录

相信很多人都注意到，不同的网站在块、导航栏和其他容器中使用了几乎相同的阴影，只是不透明度略有不同。我分析了许多国内外热门网站，并尝试将最接近的参数收集到一个大型集合或库中。看哪种更方便。该项目的主要目标是让初级网页设计师和开发人员更容易创建令人愉悦的现代设计。也许有经验的设计师也能从中学习到一些有趣的东西。

对于那些尚未完全掌握布局，但又想在按钮、块等元素上创建精美阴影的人来说，这个库将非常方便。这样，您可以简化对块的操作，并缩短在生成器中选择 CSS 阴影的时间。

Box-shadows.css

Box-shadows.css 是一个用于项目的简洁美观的 CSS 阴影集合。主要使用简单的 .bShadow 类。现在该集合包括超过 50 种实际的带编号阴影，以及三个独立的类 .bShadow、.bShadow-light 和 .bShadow-inset。它们非常适合在表格、主页、容器、导航和其他网站块中使用。

为了避免出现一些问题，我将立即解释为什么使用数字而不是名称或类，例如 bShadow-01040–00。

该集合不使用独立的名称，这与 animate.css 的做法不同，因为对于这个项目来说，这有点不合适。块的阴影会随着大小、不同偏移量的增加而增加，并且通过数字序列，您可以选择最适合您的变体，而无需学习各个名称。这大大简化了使用该集合的工作。

1. 将样式表包含在文档的 <head> 中

<head>
  <link rel="stylesheet" href="/box-shadows.css">
  <!-- or -->
  <link rel="stylesheet" href="/box-shadows.min.css">
</head>

2. 添加类

将 .bShadow 类添加到您想使用的块中

<div class="bShadow"></div>

3. 添加类编号

最后，您需要向现有的 .bShadow- 添加一个额外的类，并带上数字，或者单独使用其中一个类，而无需 .bShadow 类。例如：

<div class="bShadow bShadow-1"></div>
<!-- or -->
<div class="bShadow-1"></div>
  • 现在，该集合包含 53 种带编号的阴影变体，以及三个独立类：.bShadow、.bShadow-light 和 .bShadow-inset。
  • 您可以使用 生成器 来创建自己的最小化文件，并减少网站的加载负担。

该集合还有许多其他可能性，例如，使用 悬停效果，平滑地在阴影之间切换。

4. 悬停效果

将 h 类添加到 .bShadow- 元素中以创建悬停效果。例如：

<div class="bShadow-38 bShadow-1h"></div>

5. CSS Transform 动画

.bShadow 类在 .2s transition: transform 0.2s ease-in-out 中使用平滑的默认动画，还包含一个属性，用于提前告知浏览器即将进行的阴影变换和位置 will-change: transform, box-shadow;。

使用此功能为您的块创建精美的动画。例如：

.transform-translateY-5:hover {
  -webkit-transform: translateY(-5px) translateZ(0);
  transform: translateY(-5px) translateZ(0);
}
<div class="bShadow transform-translateY-5 bShadow-1h">bShadow</div>

6. 添加 INSET 参数

要添加参数，只需将脚本插入 HTML 页面，并在其中指定您想应用该参数的类。

完整示例，针对 .bShadow-1。类名前必须加点！

[].forEach.call(document.querySelectorAll('.bShadow-1'), function(node) {
  var bsh = getComputedStyle(node).boxShadow;
  node.style.boxShadow = "inset " + bsh;
});

阴影选择

网站提供了一个查看功能，您可以在其中指定网站的背景颜色和容器，以便进一步选择阴影。通过选项或指向块来选择阴影和类。结果显示为主要网站容器的阴影。

生成 min.css 文件

该网站还有一个 box-shadows.min.css 文件生成器，附带说明，允许用户创建自己的文件，只包含选定的类。如果您的项目使用的阴影少于两三个，这将有助于减少网站的加载负担。

如果您不想将整个库连接到您的网站，您可以从选定的类中生成自己的 min.css 文件。

  1. 访问网站
  2. 点击“以块状显示”按钮并按照说明操作
  3. 最后点击“下载”按钮并将下载的文件连接到您的网站。太棒了！

生成 css box-shadow

您可以使用经典的 css box-shadow 生成器 来补充您的自定义样式。通过点击“保存并添加下一个”按钮，您可以创建无限数量的类。第一个生成的类和后续类被分配一个不在集合中的序列号。您可以复制生成的样式并粘贴到根 CSS 或网站上创建的 box-shadows.min.css 文件中。

目前该项目仍处于开发阶段，并在 GitHub 上获得了 200 颗星，以便获得 cdnjs 的链接。祝您使用愉快，创作成功。如果您有任何建议、评论或改进项目的意见，请在评论中留言。

用法

要将 box-shadows.css 用于您的网站，只需将样式表添加到文档的 <head> 中。将 .bShadow 类添加到元素中，以及任何 .bShadow- 带数字 的类或单独的类，添加 hover 效果和 JavaScript 来创建 inset 属性。可选。下载整个库，或使用 CSS 文件生成器创建自己的更小的文件。如果您没有足够的类，您可以在生成器中自己创建它们并添加到下载的文件中。就是这样！您已经拥有了带阴影的 CSS 块。

随意尝试、实验、使用！

如果您有任何建议，或发现错误，请在下方留言。

© . All rights reserved.