今天，我们通过一个教程介绍如何使用Photoshop，CSS和一些小图像设计和编写自己的多汁标签云！ 我们将使用古老的推拉门技术，但如果您想推开信封并在WordPress中使用此方法，我们将在最后包括一些高级CSS选择器方法。 预备，准备，开始！
书面教程
在正确的位置上进行一点点抛光可以真正为原本标准的页面设计增添色彩。 今天，我们将逐步介绍如何创建自己的“标签云”元素的自定义变体，您可以在当今几乎任何博客系统中找到该元素。
我们将快速浏览设计（这很容易），然后深入研究CSS，使所有内容融合在一起。 在您自己的项目中使用它，并将其放入个人博客中，完全由您决定...让我们深入研究吧！
步骤01：设计标签
此时，观众中CSS纯粹主义者可能会畏缩，因为我们将打开Photoshop。 为什么？ 因为我们要创建一个完全自定义的标签设计。 我们今天将要使用的这个特殊标签可以在CSS中实现吗？ 可能-我敢肯定，有些CSS忍者会很快指出这些只是基本形状...但是，如果您想添加纹理怎么办？ 还是完全不同的形状（扇形边缘）？
除了让浏览器仅尝试与CSS一起使用时令人头疼之外，最重要的是，最好知道如何一起使用图像和CSS，这正是我们要做的。
继续并启动Photoshop。 打开一个新的文档，尺寸为71px x 29px。
宽度实际上在这里并不重要...但是高度将是您要记住的东西。
接下来，让我们在文档上绘制一个半径为2px的圆角矩形 。 稍后为投影留出一些空间...在我们的示例中，我在底部和侧面保留了2px。
现在是时候创建我们的自定义形状了。 我们将使用Photoshop的“ 添加点”和“ 转换点”工具。 除了修补点数直到您拥有所需的形状之外，这没有什么其他用途，因此请多做点尝试。 这是我们的：
不过，我们在标签中需要有一个小Kong...您知道的，这样人们就可以在其中循环一个虚拟字符串。 好的，也许不是，但是它为我们增加了一些额外的耀斑，而CSS则无法做到。 使用椭圆选框工具绘制一个圆形选区（在绘制时按住Shift键可使其保持完美）。
做出选择后，选择选择的反面（ Select> Inverse ），然后使用图层检查器底部的“ 添加图层蒙版”按钮将其变成标签形状上的矢量蒙版。
为了简洁起见（我们确实想进入编码部分，对吧？！），让我们在这里略过图层样式。 您可以添加自己的调整，但是这是我们的样子：
最终结果应如下所示：
您会在PSD中（在本教程的“下载”文件夹中）注意到，我也在文本中添加了内容。 如果您需要在任何设计模型中使用此功能，请随意执行此操作。
注意：您可以自己轻松地反转标签的方向。 我们实际上将向您展示如何在编码阶段创建朝左和朝右的标签。
步骤02：切片和标记
！ 因此，我们已经设计了标签……但是如何在实际的网页中使用它呢？ 我们将从将标签分成三部分开始：
- 左边
- 中心渐变
- 右边
将所有这些另存为PNG图形以保留透明度，并将它们存储在名为“ images”的文件夹中。
现在我们需要创建我们的基本标记。 我们将使用一个简单的逻辑方法（使用DIV层）开始进行此操作，但是与所有与代码相关的事物一样，我们将在以后的步骤中进行清理（并减少所需的代码量） 。
这是每个标签的基本标记：
<div class="tag tag-left">
<div class="left"></div>
<div class="center"><a href="#">Design</a></div>
<div class="right"></div>
</div>让我们快速回顾一下：本质上，我们有一个主标签包装器DIV（.tag），其中包含三个嵌套的DIV：
- 左DIV（用于我们的左侧图形）
- 中心DIV（用于我们的标签文本和背景渐变）
- 右DIV（用于我们的右侧图形）
您可以继续重复该代码块几次，以测试彼此相邻堆叠的多个标签。
现在是时候添加我们CSS了。
步骤03：基本CSS
我们将通过对每个div应用一些基本规则来启动CSS。 我将向您展示每个代码，然后说明其功能：
.tag {
font-size: 11pt;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
float: left; /* Makes each tag stay together in one piece */
margin: 5px;
}
.tag .center{
background: url("images/gradient.png") repeat-x scroll left top transparent;
float: left;
height: 29px; /* Same as your image height */
width: auto;
padding: 0px 6px; /* Give the text a little room to breathe */
}
.tag .center a{
vertical-align: middle; /* Important for fitting the text in perfectly */
line-height: 21pt; /* Important for fitting the text in perfectly */
color: #0f2d39;
text-decoration: none;
}此代码块设置了将包裹在我们标签中的元素； 请注意，我们在此处添加了一些类型规则，简单的浮点数以及每个标签之间的边距以将它们隔开。
上面CSS中的后两个规则涵盖了标签的中心部分-建立背景渐变和一些间距。
此时，您应该具有一些如下所示的标签：
现在让我们为左侧和右侧元素添加一些样式。
.tag-left .left{
background: url("images/tagleft_left.png") no-repeat scroll left top transparent;
display: block;
float: left;
height: 29px; /* Same as your image height */
width: 15px; /* Same as your image width */
}
.tag-left .right{
background: url("images/tagleft_right.png") no-repeat scroll right top transparent;
display: block;
float: left;
height: 29px; /* Same as your image height */
width: 4px; /* Same as your image width */
}上面的代码块做三件事：
- 定位背景图像。
- 确定标签左侧和右侧的高度/宽度。 这应该与您的图片大小匹配；）
- 告诉元素浮动，使它们正确对齐。
现在，您的标签应该非常接近完整：
但是，如果我们想包括另一种类型的标签……说一个面向相反方向的标签怎么办？ 这就是“左标签”和“右标签”选择器起作用的地方。 通过在顶层添加这些，我们实际上可以在CSS中添加一些规则，以允许使用完全不同的标记：
.tag-right .left{
background: url("images/tagright_left.png") no-repeat scroll left top transparent;
display: block;
float: left;
height: 29px; /* Same as your image height */
width: 4px; /* Same as your image width */
}
.tag-right .right{
background: url("images/tagright_right.png") no-repeat scroll right top transparent;
display: block;
float: left;
height: 29px; /* Same as your image height */
width: 16px; /* Same as your image width */
}哪个应该给您正确的“正确标签”样式：
请注意，标签云右上方的朝右标签。
做完了！ 好吧，有点...坦白地说，这是处理这种影响的一种非常繁重的方式。 在下一步中，我们将带您进入一些更高级CSS选择器，以找到一种更为优雅的方法。
Google字体注意：您可能已经注意到我在这里使用自定义字体（ Droid Sans ）。 添加自己的自定义字体很容易，只需访问Google字体网站，找到所需的字体，然后添加该字体的嵌入代码和CSS规则。
Google字体（或类似的字体）的优点在于，您实际上可以将大多数CSS字体样式应用于文本……这意味着我们可以使用诸如text-shadow之类的属性来创建微妙的灯光效果。
步骤04：进阶CSS
任何长时间编码的人都会告诉您，总有一种方法可以改进一段代码。 这正是我们在最后一步中将要做的。
让我们首先回顾一下以前的方法的不足之处。
- 标记过多！ 我们不需要使用四个不同的DIV元素来实现此效果。
- 重手CSS！ 当然，它可以工作，但是有更多优雅CSS编写方式，因此实际上不需要多余的标记。
- 不灵活！ 需要大量的标记和粗糙CSS意味着它无法（轻松）在WordPress之类的CMS中工作
这是使用CSS ：before和：after选择器减轻负载的另一种方法。
让我们首先完整地查看原始CSS，然后使用选择器将其重写：
原始CSS
/* Generic Tag Styling / Typography +++++++++++++++++++++++++++++++++++++++++++++++++++ */
.tag {
font-size: 11pt;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
float: left; /* Makes each tag stay together in one piece */
margin: 5px;
}
.tag .center{
background: url("images/gradient.png") repeat-x scroll left top transparent;
float: left;
height: 29px; /* Same as your image height */
width: auto;
padding: 0px 6px; /* Give the text a little room to breathe */
}
.tag .center a{
vertical-align: middle; /* Important for fitting the text in perfectly */
line-height: 21pt; /* Important for fitting the text in perfectly */
color: #0f2d39;
text-decoration: none;
}
/* Left-tag Rules ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.tag-left .left{
background: url("images/tagleft_left.png") no-repeat scroll left top transparent;
display: block;
float: left;
height: 29px; /* Same as your image height */
width: 15px; /* Same as your image width */
}
.tag-left .right{
background: url("images/tagleft_right.png") no-repeat scroll right top transparent;
display: block;
float: left;
height: 29px; /* Same as your image height */
width: 4px; /* Same as your image width */
}
/* Right-tag Rules +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.tag-right .left{
background: url("images/tagright_left.png") no-repeat scroll left top transparent;
display: block;
float: left;
height: 29px; /* Same as your image height */
width: 4px; /* Same as your image width */
}
.tag-right .right{
background: url("images/tagright_right.png") no-repeat scroll right top transparent;
display: block;
float: left;
height: 29px; /* Same as your image height */
width: 16px; /* Same as your image width */
}新CSS
/* Generic Tag Styling / Typography +++++++++++++++++++++++++++++++++++++++++++++++++++ */
.tag {
float: left;
margin: 5px;
height: 29px; /* Same as your image height */
width: auto;
}
.tag a{
background: url("images/gradient.png") repeat-x scroll left top transparent;
float: left;
height: 29px;
padding: 5px 6px;
color: #0F2D39;
font-size: 11pt;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}
.tag:before{
content: '';
background: url("images/tagleft_left.png") no-repeat scroll 0 0 transparent;
display: block;
float: left;
height: 29px; /* Same as your image height */
width: 15px; /* Same as your image width */
}
.tag:after{
content: '';
background: url("images/tagleft_right.png") no-repeat scroll 0 0 transparent;
display: block;
float: right;
height: 29px; /* Same as your image height */
width: 4px; /* Same as your image width */
}
/* Flip-tag Rules +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.tag.flip:before{
content: '';
background: url("images/tagright_left.png") no-repeat scroll left top transparent;
display: block;
float: left;
height: 29px; /* Same as your image height */
width: 4px; /* Same as your image width */
}
.tag.flip:after{
content: '';
background: url("images/tagright_right.png") no-repeat scroll right top transparent;
display: block;
float: right;
height: 29px; /* Same as your image height */
width: 16px; /* Same as your image width */
}有什么不同？ 首先，我们消除了DIV中对左右元素的需要。
在这里，只需比较旧标记和新标记：
旧HTML标记
<div class="tag tag-left">
<div class="left"></div>
<div class="center"><a href="#">Design</a></div>
<div class="right"></div>
</div>新HTML标记
<span class="tag">
<a href="#">Design</a>
</span>通过使用：before和：after选择器，我们可以有效地将“滑动门”注入标记中，而无需增加任何负载。 结果是标记更加整洁，并且实际上可以在所有现代浏览器上使用！ 我们还从使用DIV元素切换到简单的SPAN元素（在这种情况下，SPAN更具意义）。
奖励步骤01：添加：Hover状态
那么，如果我们希望标签具有悬停状态怎么办？ 实际上非常简单-只需在类选择器与：before和：after选择器之间插入：hover选择器，添加几个新规则。
例如：
.tag:hover:before{}这就解决了选择问题-从这里基本上，您可以添加自己的鼠标悬停时变化形式。 您可以执行任何操作，从更改文本颜色到不透明度，甚至更改实际的背景图形。 这是我们在演示中使用的：
/* Mouse Hover Rules +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.tag a:hover{
background: url("images/gradient_hover.png") repeat-x scroll left top transparent;
}
.tag:hover:before{
background: url("images/tagleft_left_hover.png") no-repeat scroll 0 0 transparent;
}
.tag:hover:after{
background: url("images/tagleft_right_hover.png") no-repeat scroll 0 0 transparent;
}
.tag.flip:hover:before{
background: url("images/tagright_left_hover.png") no-repeat scroll left top transparent;
}
.tag.flip:hover:after{
background: url("images/tagright_right_hover.png") no-repeat scroll right top transparent;
}请注意，换出图像可以在第一次加载图像时产生快速的闪烁效果。有多种方法可以解决此问题，但这是另一个教程;）
奖励步骤02：在WordPress中使用它
在WordPress中使用这个小技巧也很容易。 在您通常在模板文件之一中使用的“ the_tags”函数上，查看WordPress Codex页面 。我们将期待了解如何更改用于吐出标签的标记。
这是一个如何将渲染的标签变成无序列表的示例：
<?php the_tags('<ul><li>','</li><li>','</li></ul>'); ?>我们只需更改它以匹配我们自己的系统：
<?php the_tags('<span class="tag">','</span><span class="tag">','</span>'); ?>而已！ 只要在您的style.css文件（或您在主题中使用的任何.css文件）中包含关联CSS，就应该准备好一些很棒的小自定义标签！
感谢大家的关注：)我们总是欢迎就我们如何改进或不同之处发表评论！
翻译自: https://webdesign.tutsplus.com/articles/create-and-code-your-own-juicy-tag-cloud--webdesign-3131
扫一扫
1017
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
