jenkins 构建单个
随着超高清屏幕的出现（认为视网膜），新的设计挑战出现了。 我们需要找到适应所有设备的方法。 以显示图标为例。 我们可以依靠200％的图像或使用SVG来提供图像，但仅凭CSS即可构建数量惊人的图形。 让我们用一个HTML元素构建一个精美的图标。
开始之前需要了解的有用资料
单个元素的主要问题在于以下事实：我们仅限于可以使用的“构建块”的数量。 幸运的是，有一些技巧：
伪元素
伪元素（也称为生成的内容 ）在文档标记本身（ DOM ）中不存在，但由CSS创建。 它们为您提供了将另外两个可以（或多或少）使用相同属性的元素添加到默认元素的可能性。
例如，使用以下标记：
<div class="square"></div>然后应用以下样式规则：
.square {
position: relative;
background: blue;
width: 50px;
height: 50px;
}
.square::before {
position: absolute;
left: -50px;
content: '';
height: 50px;
width: 50px;
display: block;
background: green;
}
.square::after {
position: absolute;
left: 50px;
content: '';
height: 50px;
width: 50px;
display: block;
background: red;
}在本练习中，我们将使用像素值，尽管通常建议使用灵活的度量单位，例如ems。
注意：与单个冒号相反，双冒号（ :: :）是CSS3语法。 它将伪元素与伪选择器区分开，例如:hover 。
我们给了自己更多的两个构建基块，但是值得注意的是，某些CSS3属性不适用于生成的内容：
- 转场
- 动画制作
要知道的另一件事是，生成的内容将显示在默认元素的顶部，除非它们具有z-index:-1 。 浏览器将其解释为当它们存在于默认的元素中 。 如果我们用实际的标记来表示伪元素，则代码如下：
<div class="square">
<div class="before"></div>
<div class="after"></div>
</div>.square {
background: blue;
width: 50px;
height: 50px;
position: relative;
}
.square .before {
left: -50px;
position: absolute;
content: '';
height: 50px;
width: 50px;
display: block;
background: green;
}
.square .after {
content: '';
height: 50px;
width: 50px;
background: red;
position: absolute;
left: 50px;
}盒子阴影
如果仅伪元素不能为您提供足够的“块”来构建图标，则还可以使用框阴影。 此技术将使您可以创建所需数量的“克隆”。 让我们看一个带有圆圈的例子：
<div class="circle"></div>.circle {
position: relative;
background: blue;
width: 50px;
height: 50px;
border-radius:50%;
box-shadow: -110px 0 0 -20px purple,
-60px 0 0 -10px red,
80px 0 0 10px green,
180px 0 0 20px orange;
}
如您所见，方框阴影使您可以减小或增大初始形状的大小，并将其放置在所需的位置。
属性详细信息box-shadow: 80px 5px 1px 10px green可以按以下方式分解：
- 80px-> offset-x这使您可以沿x轴放置阴影，并以原始形状的中心为原点
- 5px-> offset-y这允许您沿y轴放置阴影，以原始形状的中心为原点
- 1px-> blur-radius此值越大，模糊越大，因此阴影变大和变亮
- 10px-> spread-radius正值将导致阴影扩大并变大，负值将导致阴影缩小
- 绿色->颜色您的形状的颜色:)
注意：定义的第一个阴影将始终出现在后续阴影之上。
插入值还允许各种可能性：
<div class="ball"></div>.ball {
position: relative;
background: blue;
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: inset 20px 0 0 -10px yellow,inset -20px 0 0 -10px red;
}
渐变色
对于那些对Internet Explorer感兴趣的人来说，值得注意的是CSS渐变仅与IE10兼容 。 对于其他浏览器，请记住适当的供应商前缀。
像阴影一样，渐变可以组合并独立放置。 使用渐变创建形状比以前的属性要复杂一些，因此让我们关注一个“简单”的示例。
在此示例中，我们将使用径向渐变创建四个不同的圆，并将它们分布在父元素内。
<div class="background"></div>.background {
background: radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 10%,transparent 10%,transparent 100%),
radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 30%,transparent 32%,transparent 100%),
radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 50%,transparent 52%,transparent 100%),
radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 60%,transparent 62%,transparent 100%);
background-color: red;
background-repeat: no-repeat;
background-position: 0px 0px, 50px 0px, 50px 50px, 0px 50px;
background-size: 50px 50px;
width: 100px;
height: 100px;
position: relative;
}
要理解此演示，您必须想象元素上的网格。 网格的每个像元将具有不同的梯度。 在这种情况下，单元格为50px x 50px（ background-size: 50px 50px; ）。我故意将它们散布在元素中，但请注意，它们也可以叠加。 每个单元格可以放置在单独的x和y轴上，其原点位于基础元素的左上角（ background-position: 0px 0px, 50px 0px, 50px 50px, 0px 50px; ）。
详细的Gradient属性： background: radial-gradient(center, ellipse cover, rgba(0, 0, 0, 1)
- 中心->位置 ：也可以表示为背景位置（中心= 50％50％）。
- 椭圆->形状 ：可以是圆形或椭圆形，在此示例中两者都做相同的事情...
- rgba（0，0，0，1）10％->颜色和限制 ：增加限制值以扩大圆。
- 透明10％->颜色和限制 ：此限制值定义了先前颜色的结尾。 指定一个略高于上一个限制的限制，以使边缘更平滑。
- 透明100％->颜色和限制 ：渐变从10到100％将是透明的。
为了帮助创建CSS渐变，可以使用Collorzilla的Gradient Editor之类的生成器 。
现在，我们已经了解了如何从单个div创建最多的构建基块，让我们练习吧！
这是我们将仅使用一个div（最后是奖金！）创建的内容：
步骤1：身体
这是本教程的一个HTML行：
<div class="ladybug"></div>为了使我们的图标易于调整大小，我们将使用灵活的度量单位。 em和％。 因此，您只需更改元素的字体大小，就可以根据需要调整大小。 我是在Chrome中开发的，我将让您根据您的浏览器更改供应商前缀 。
我们将从为瓢虫的身体赋予形状和颜色开始：
.ladybug {
position: relative;
font-size: 60px;
width: 1.8em;
height: 2em;
border-radius: 50%;
background-color: #E11;
}
现在，让我们使用“径向渐变”属性将这些点应用到身体上。
.ladybug {
position: relative;
font-size: 60px;
width: 1.8em;
height: 2em;
border-radius: 50%;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 30%,transparent 33%,transparent 100%),-webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 50%,transparent 55%,transparent 100%),-webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 50%,transparent 55%,transparent 100%),-webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 43%,transparent 100%),-webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 43%,transparent 100%),-webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 45%,transparent 50%,transparent 100%),-webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 45%,transparent 50%,transparent 100%);
background-color: #E11;
background-repeat: no-repeat;
background-position: 0.66em 0.2em,0.3em 0.6em,1em 0.6em,0.9em 1.1em,0.4em 1.1em,1.1em 1.5em,0.2em 1.5em;
background-size: 0.5em 0.5em;
}
出色的工作-目前，我们已经完成了对人体的研究。
步骤2：头部
这部分是最快的。 我们将绘制一个半圆的黑色并将其放置在身体顶部。 为此，我们将使用伪元素::before 。
.ladybug::before {
content: '';
position: absolute;
display: block;
height: 0.5em;
width: 1.2em;
top: -0.24em;
background: black;
left: 0.3em;
border-radius: 50% 50% 0% 0% / 100% 100% 0 0;
}
步骤3：眼睛
在这里，我们将使用伪元素::after和box shadow属性创建眼睛。 我们首先创建基本圆（瞳Kong），然后将其“克隆”以创建眼睛的白色，轮廓和另一只眼睛。
.ladybug::after {
content: '';
position: absolute;
display: block;
height: 0.1em;
width: 0.1em;
background: black;
top: -0.1em;
left: 0.5em;
border-radius: 50%;
box-shadow: 0 0 0 0.1em white,0em 0 0 0.13em black,0.7em 0 0 0 black,0.7em 0 0 0.1em white,0.7em 0 0 0.13em black;
}
步骤4：腿
您必须在思考“我们还有一个剩余要素”。 不用担心，我们将重复使用与眼睛相同的阴影。
.ladybug::after {
content: '';
position: absolute;
display: block;
height: 0.1em;
width: 0.1em;
background: black;
top: -0.1em;
left: 0.5em;
border-radius: 50%;
box-shadow: 0 0 0 0.1em white,0em 0 0 0.13em black,0.7em 0 0 0 black,0.7em 0 0 0.1em white,0.7em 0 0 0.13em black,1.2em 0.5em 0 0.02em black,1.35em 1.1em 0 0.02em black,1.2em 1.65em 0 0.02em black,-0.5em 0.5em 0 0.02em black,-0.65em 1.1em 0 0.02em black,-0.5em 1.65em 0 0.02em black;
}我们的瓢虫图标终于完成了！
步骤5：红利！
我们实际上还没有完成。 我答应过你，这就是奖金。 动画是CSS相对于SVG的优势之一； 让我们为鼠标悬停时的瓢虫动画。 这是额外CSS代码：
@-webkit-keyframes ladybug
{
0% {
background-position: 0.66em 0.2em,0.3em 0.6em,1em 0.6em,0.9em 1.1em,0.4em 1.1em,1.1em 1.5em,0.2em 1.5em;
}
50% {
background-position: 0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em;
}
100% {
background-position: 0.66em 0.2em,0.3em 0.6em,1em 0.6em,0.9em 1.1em,0.4em 1.1em,1.1em 1.5em,0.2em 1.5em;
}
}
.ladybug:hover {
-webkit-animation: ladybug 1s;
} 我们首先定义一些关键帧，我们将其命名为ladybug 。 然后，我们将这些关键帧触发到图标的悬停状态。 每个关键帧都会更改瓢虫斑点的背景位置
最后，下面是完整CSS代码：
.ladybug {
position: relative;
font-size: 60px;
width: 1.8em;
height: 2em;
border-radius: 50%;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 30%,transparent 33%,transparent 100%),-webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 50%,transparent 55%,transparent 100%),-webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 50%,transparent 55%,transparent 100%),-webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 43%,transparent 100%),-webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 43%,transparent 100%),-webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 45%,transparent 50%,transparent 100%),-webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 45%,transparent 50%,transparent 100%);
background-color: #E11;
background-repeat: no-repeat;
background-position: 0.66em 0.2em,0.3em 0.6em,1em 0.6em,0.9em 1.1em,0.4em 1.1em,1.1em 1.5em,0.2em 1.5em;
background-size: 0.5em 0.5em;
}
.ladybug:before {
content: '';
position: absolute;
display: block;
height: 0.5em;
width: 1.2em;
top: -0.24em;
background: black;
left: 0.3em;
border-radius: 50% 50% 0% 0% / 100% 100% 0 0;
}
.ladybug::after {
content: '';
position: absolute;
display: block;
height: 0.1em;
width: 0.1em;
background: black;
top: -0.1em;
left: 0.5em;
border-radius: 50%;
box-shadow: 0 0 0 0.1em white,0em 0 0 0.13em black,0.7em 0 0 0 black,0.7em 0 0 0.1em white,0.7em 0 0 0.13em black,1.2em 0.5em 0 0.02em black,1.35em 1.1em 0 0.02em black,1.2em 1.65em 0 0.02em black,-0.5em 0.5em 0 0.02em black,-0.65em 1.1em 0 0.02em black,-0.5em 1.65em 0 0.02em black;
}
@-webkit-keyframes ladybug
{
0% {
background-position: 0.66em 0.2em,0.3em 0.6em,1em 0.6em,0.9em 1.1em,0.4em 1.1em,1.1em 1.5em,0.2em 1.5em;
}
50% {
background-position: 0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em;
}
100% {
background-position: 0.66em 0.2em,0.3em 0.6em,1em 0.6em,0.9em 1.1em,0.4em 1.1em,1.1em 1.5em,0.2em 1.5em;
}
}
.ladybug:hover {
-webkit-animation: ladybug 1s;
}结论
我希望通过本教程向您展示CSS的潜力，以及单个HTML元素可能带来的效果。 考虑使用浏览器支持本教程中讨论CSS属性总是明智的，请确保它们正常降级。
如果您想查看使用单个元素创建的其他图标，我邀请您访问我的网站one-div.com 。 谢谢阅读！
翻译自: https://webdesign.tutsplus.com/articles/building-icons-with-a-single-html-element--webdesign-10012
jenkins 构建单个
扫一扫
481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
