使用CSS渐变绘制图像

我所说的\"CSS图像\"是指仅使用HTML元素和CSS创建的图像。它们看起来像是adobeillustrator中绘制的svg，但它们是在浏览器中制作的。我见过的一些技巧是修补边界半径、框阴影，有时甚至是clip-path。如果你在CodePen上搜索每天的css图片，你会发现很多很棒的例子。我自己画了一些，包括这个无限长的护手，但在一个元素只有背景和其他属性的最小使用。让我们来看看如何用自己的方式来创建CSS图像。。回顾一下，论点如下： background: || || [ / ]? || || || || ; 它们可以以任何顺序出现，除了position和size之间必须有/。我们也必须保持这两个论点的顺序，否则我们会得到意想不到的结果。并非所有这些都需要包括在内，为此，我们将不使用color、repeat、attachment、origin或clip参数。剩下的是image，size，和position。但是，由于背景默认重复，我们必须将background-repeat: no-repeat;放在background中所有内容的正下方（如果某些背景应该重复，我们可以使用repeating-linear-gradient()和repeating-radial-gradient()）。在这种情况下，框架CSS将是这样的：我们甚至可以使用多组背景参数！因此，我们可以像这样用逗号堆叠和分开它们： .image {background: / , / , / ;background-repeat: no-repeat;} 上面的结构是我们如何在每个形状上画一行图像的基础。请记住，渲染顺序与绝对位置或固定位置元素的顺序相反。第一个将出现在顶部而不是底部。换言之，下面的圆（径向渐变）将从下到上呈现（底部为蓝色，顶部为红色）。 .circles { background:radial-gradient(7em 7em at 35% 35%, red 50%, transparent 50%),radial-gradient(7em 7em at 50% 50%, gold 50%, transparent 50%),radial-gradient(7em 7em at 65% 65%, blue 50%, transparent 50%);background-repeat: no-repeat;width: 240px;height: 240px;}绘图我们将使用Sass（SCSS）来绘制这些图像，以便我们可以使用调色板的变量。这将使代码更短，更容易阅读，并改变颜色变暗或变亮的变体。我们可以在普通的CSS中使用变量，而不使用Sass，但是由于internetexplorer缺乏支持，让我们继续使用Sass。为了解释这是如何工作的，我们将试验使用线性和径向渐变的形状。设置调色板我们的调色板将由RGB或HSL颜色组成。我稍后会解释为什么要保持这两种格式的颜色。在本例中，我们将使用RGB。 $r: rgb(255,0,0); // hsl(0,100%,50%)$o: rgb(255,128,0); // hsl(32,100%,50%) 为了使代码简短易读，我喜欢做的是使用至少一个字母来表示每种颜色（例如，$r表示红色）。如果使用一种颜色的较深或较浅的色调，我会在一个或多个字母前加上一个d表示深色，一个l表示浅色。我用$dr表示暗红色，用$lr表示浅红色。如果需要两个以上的阴影，我会在末尾加一个数字来表示阴影级别。例如，$dr1代表暗红色，$dr2代表暗红色，$lr1代表浅红色，$lr2代表浅红色。这样的调色板看起来是这样的（先暗，后正常，最后亮）： $dr1: rgb(224,0,0);$dr2: rgb(192,0,0);$r: rgb(255,0,0);$lr1: rgb(255,48,48);$lr2: rgb(255,92,92);设置比例和画布我们将使用em单位作为图像尺寸，以便可以轻松地按比例调整图像大小。由于1em等于元素的字体大小，因此如果更改，图像的每个单位都会相应地调整。让我们把字体大小设为10px，宽度和高度都设为24em。10px的单位是最容易思考的，因为如果你用心去计算，你会立刻得到240×240px。然后，为了看看画布的边缘在哪里，我们将使用1px的灰色轮廓。 $r: rgb(255,0,0); // hsl(0,100%,50%)$o: rgb(255,128,0); // hsl(32,100%,50%).image {background-repeat: no-repeat;font-size: 10px;outline: 1px solid #aaa;width: 24em;height: 24em;} 请注意使用较小的字体大小，但是，浏览器有一个最小字体大小设置（出于方便访问的原因）。如果将字体大小设置为4px，最小值为6px，则将强制设置为6px。此外，只需使用calc()和视口单位即可启用响应。如果需要的话，也许我们可以使用像calc(10px + 2vmin)这样的东西，但现在我们还是用10px吧。绘制图形有趣的部分从这里开始。为了画一个中心为8×8em的正方形，我们使用了一个带有两个相同颜色挡块的linear-gradient()来画。 .image {background:linear-gradient($r, $r) 50% 50% / 8em 8em;...} 为了把它塑造成更像梯形的东西，同时设置一个60度的角度，让我们把transparent的$T加到调色板上，然后把$r和$T的挡块都放在63%（就在右下角被切断之前）。 $T: transparent;.image {background:linear-gradient(60deg,$r 63%, $T 63%) 50% 50% / 8em 8em;...} 把两个挡块都设置在同一个值会使倾斜的一侧和其他挡块一样脆。不过，如果你更仔细地观察，它似乎不是o像素化：为了纠正这个问题，我们稍微调整其中一个挡块（调整幅度为1%左右），使边缘足够平滑。所以，让我们把***43***的63%改为62%。在处理径向渐变时，圆边也是一个问题，我们将在后面看到。如果你在Safari以外的浏览器中查看，即使转换成不透明的颜色（比如橙色），一切看起来都很棒。在Safari中过渡到***44***的问题是，您会注意到倾斜侧有一点黑色衬里。这是因为Safari中的***45***关键字始终是黑色透明的，因此我们看到一些黑色。我真希望苹果能解决这个问题，但他们永远不会。暂时，让我们在***47***下为红色透明度添加一个新的***46***变量。把我们用于***49***的***48***报废，因为我们将不再使用它。 ***50*** 然后让我们用***52***替换***51***。这解决了我们的狩猎问题！ ***53*** 如果您一直想知道为什么我们不使用十六进制颜色，Internet Explorer和Edge不支持#rgba和#rrggbbaa符号（是的，如果您不知道的话，十六进制从2016年末就有一个alpha通道），我们希望它尽可能跨浏览器工作。我们还希望与颜色格式的选择保持一致。现在让我们将形状垂直移动到20%，并绘制一个相同尺寸的橙色圆。另外，为其透明版本添加另一个变量。对于光滑的边缘，在实心和透明的橙子之间插入1%的间隙。 ***54*** 为了与我们的尺寸保持一致，第二个色块应为50%，而不是100%。定位形状渐变的定位方式取决于单位是否正确固定或百分比。假设我们将两个渐变都变成正方形，并尝试将它们水平放置在整个div上。 ***55*** 红色正方形完全脱离画布（轮廓），橙色正方形的右侧与另一侧接触。使用固定单位就像在HTML5画布中放置绝对定位的元素或绘制形状。从这个意义上说，原点在左上角是正确的。当使用百分比和设置的背景大小时，div会得到背景大小一半的\"假填充\"。同时，背景的原点居中（不要与***56***混淆，后者涉及方框角）。现在，如果我们将这些渐变变成圆形的径向渐变，并应用相同的x位置24em和100%，两个都会在另一侧切成两半。这是因为原点总是在中心，如果我们这样写背景： ***57*** 如果我们重写背景，使位置和大小在渐变之后，使用***58***，它们的位置将像线性渐变一样。红色的在外面，橙色的在右边。\"假填充\"在橙色中再次出现。 ***59*** 没有一种合适的方法来定位形状，但是要将其像绝对或固定的HTML元素一样放置，请使用固定单位。如果需要快速将形状（使用***60***参数）放置在死点，50%是最佳选择，因为形状的原点将是其中心。使用100%如果它应该接触到非常右边。 h4>svg>Sizing Shapesp>Sizing in CSS background正如我们所期望的那样，但是它仍然受到用于位置固定或百分比的单位的影响。如果我们再把正方形的宽度改为10em，红色的会向右扩展，橙色的会侧向扩展。 ***61*** 如果我们用***62***单位作为y位置，形状在改变高度后会向下增长或向上收缩。如果我们使用一个百分比，那么它将扩展两个垂直方向。刚才，我们研究了两种用径向渐变绘制圆的方法。第一种方法是指定***63***和***64***之间的宽度和高度，然后指定后面的位置： ***65*** 第二种方法是在中心使用***66***，然后给出位置和大小： ***67*** 这些方法都画圆，但会导致不同的输出，因为： 1. 的第一种方法占据整个div，因为没有真实的背景位置或大小。 2. 给第二种方法一个真实的位置和大小，它就会设置一个边界框。因此，它的行为就像一个线性梯度形状。假设我们用***69***替换***68***。你会看到第一。我们从***124***开始，然后加上或减去每一块的宽度，或者我应该说正方形的边界半径。这些背景将位于最后三个背景之上。 ***125*** 然后屏幕将是一个17.25×30em的矩形。就像home按钮的部分一样，我们将使用***126***将其水平居中。从顶部开始，它将是5em. ***127*** 最后，我们将添加相机和扬声器。该相机是一个简单的1×1的蓝色到灰色的径向没有花哨的计算。不过，纯灰色的演讲者会更投入一些。它将是一个5×1米的矩形，边界半径为0.5米。为了画这个，我们先画一个矩形，宽度的前4个字母，中间是***128***。然后我们使用0.5×1em的半圆，其中梯度位置为***129***和***130***。最好的方法是使用一些新的***131***表达式来定位这些矩形的左右两侧。对于左边，我们将从主体中心减去一半矩形宽度和一半圆形宽度（***132***）。右侧将遵循相同的模式，但会添加，因此***133***. ***134*** 删除div周围的灰色轮廓，iPhone就完成了！动画图像您可能会认为可以使用***135***来制作这些图像的动画，但您只能做这么多。例如，不可能单独设置单个背景旋转的动画。事实上，***136***动画的表现通常不如***137***动画好，所以我不建议使用它。要以任何我们希望的方式制作图像的任何部分的动画，我们可以让***138***或***139***伪元素负责该部分。如果我们需要更多的选择，那么我们可以恢复到多个子div，但不需要每个小细节都有一个。对于我们的动画图像示例，我们将创建这个动画雷达：我们首先绘制静态部分，除了灰色框架和旋转的手之外，其他都是静态部分。在此之前，让我们提供调色板（注：我们不需要***140***表示***141***）和基本代码。 ***142*** 由于此图像将是完全圆形的，我们可以安全地应用50%的边界半径。然后，我们可以使用一个重复的径向渐变来绘制彼此相距约1/3的环。要按预期重复渐变以开始、结束和循环，我们需要将起始颜色指定为0（或不指定0）。与前面的示例不同，我们不使用***145***来居中线条，因为稍后使用伪元素时，Internet Explorer将使整件事情变得尴尬。要画四条在中心相交的0.4em线，要知道线的一半应该是10em处div的一半。因此，我们减去并加上0.4的一半（0.4/> ****146*** 为了防止对角线的像素化，我们在绿色和透明绿色之间留了一个0.04em的小间隙。然后，要创建一些照明，添加这个透明到黑色的径向渐变： ***147*** ，完成雷达的静态部分。现在，我们绘制灰色的框架，在***148***下交上另一个背景堆栈，并添加动画。我们之所以不把框架放在这里是有原因的。因为手动容器应该适合整个div，所以我们不希望它与框架重叠。这个伪元素应该填充空间，为了确保它留在那里，让我们绝对定位它。我们将使用相同的边界半径，以便它在Safari中设置动画时保持圆形。 ***149*** 然后，为了绘制手，我们将其大小设为容器的一半，并将其保持在左上角。最后，在上面，我们画出框架。 ***150*** 现在我们的小玩意儿完成了！这个绘制CSS图像的方法有几个优点。首先，与光栅化图像文件相比，HTML将非常轻量级。第二，如果不使用实验性属性和API（这些属性和API可能不被广泛支持），它非常适合处理无法很好绘制的图像。这并不是说这种方法比使用嵌套在子元素中的父元素更好。但也有一个缺点。您必须放弃使用浏览器开发工具突出显示单个形状的功能。您需要对背景进行注释和取消注释，以确定它是哪个背景。只要对每一块背景进行分组和标记，就可以更快地找到特定的背景。设置由颜色变量组成的调色板。禁用背景重复，为目标元素设置***151***的比例和***152***单位的画布宽度和高度。使用临时***153***来显示工作时的边。自下而上绘制每个形状，因为背景是按此顺序渲染的。每个形状的***154***语法都遵循***155***（有或没有位置和大小）。为了得到想要的结果，有很多跳出框框的思考和实验。我们创建的三个示例刚好足以说明这个概念。我们已经研究了如何排序每个背景，绘制部分圆，圆角矩形，并稍微调整渐变停止平滑的边缘。要了解更多信息，请随意解剖和研究我在这个CodePen集合中制作的其他示例！

使用CSS渐变绘制图像

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么