使用HTML和CSS设计可自定义的路标
#css #教程 #codepen #learning

原始文章： Customizable Street Sign

街道标志是城市景观的重要组成部分，引导我们穿越城市和社区。但是，您是否曾经想在特殊场合创建自己的独特路标，还是只是为了娱乐？在本教程中，我们将向您展示如何使用HTML和CSS设计时尚的路标，甚至通过更改其颜色来自定义它。本教程的灵感来自MockoFun上的免费在线模板Street Sign Maker，这是一种在线图形设计应用程序，使创意设计变得容易。
Customizable Street Sign

HTML入门

让我们的街道标志的HTML结构开始。我们将保持简单，并在类街道上使用<div>元素。这里是HTML代码：

    <div class="street-sign">MOCKOFUN</div>

在此示例中，我们使用文本ockofunâ作为我们的路标，但是您可以用您选择的任何文本替换它。

使用CSS造型

Customizable Street Sign

现在，让我们深入了解CSS代码，这将使我们的路标在视觉上吸引人和可定制。我们将使用CSS变量，使更改标志的颜色变得容易。这里是CSS代码：

:root {
  --green: #145203;
  --blue: #0561ad;
  --yellow:#FDDA16;
  --white:#FFFFFF;

  --superscript: "ST";
}

.street-sign {
  --sign-color: var(--green);
  margin: 40vh auto;
  white-space: nowrap;
  font-size: min(15vh, 60px);
  background-color: var(--sign-color);
  width: min-content;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  padding: 0.25em 0.25em 0.25em 0.5em;
  border-radius: 0.25em;
  box-shadow: 0 0 0 0.1em white, 0 0 0 calc(0.1em + 1px) var(--sign-color), 0.2em 0.2em 0.1em rgba(0, 0, 0, 0.25);
}

.street-sign::after {
  content: var(--superscript);
  font-size: 0.5em;
  vertical-align: super;
  margin-left: 0.5em;
}

.street-sign.inverted{
  color:black;
  box-shadow:0 0 0 0.1em black, 0 0 0 calc(0.1em + 1px) var(--sign-color), 0.2em 0.2em 0.1em rgba(0,0,0,0.25);
}

让S分解此CSS代码的关键组件：

  1. css变量：我们定义了颜色变量，--green，--blue，--yellow和--white，可以自定义以更改标志的颜色。此外，我们为上标文本定义了一个--superscript变量（例如，sstâ）。
  2. .street-sign class ：此类风格我们的路标。以下是一些重要的样式细节：
    • --sign-color：此变量确定符号的背景颜色。默认情况下，它设置为--green，但是您可以轻松地将其更改为--blue或您喜欢的任何其他颜色。
    • margin，white-space和font-size属性控制标志的定位和文本大小。
    • background-color设置了基于--sign-color变量的背景颜色。
    • color将文本颜色定义为白色。
    • font-family和font-weight确定使用的字体及其重量。
    • padding，border-radius和box-shadow在标志中添加风格细节。
  3. .street-sign::after伪元素：此伪元素使我们能够在标志中添加一个上标（例如，stâ）。您可以更改--superscript变量，以显示不同的上标文本，例如“ Road”，“ w”，“ ave”，“ blvd”等。<< /li>
  4. .street-sign.inverted类：是CSS类，您可以为黄色和白色标志添加。这些路标将具有黑色文字颜色和黑色边框。

这是关于路标边框代码的快速解释。在这种情况下，我使用CSS阴影，但是如果您阅读我的CSS Stroke Definitive Guide，您会看到其他许多方法可以实现这一目标。

css .box-shadow: 0 0 0 0.1em white, 0 0 0 calc(0.1em + 1px) var(--sign-color), 0.2em 0.2em 0.1em rgba(0, 0, 0, 0.25);

在CSS代码的这一系列中，您将多个盒子阴影应用于.street-sign类，以在标志周围实现时尚的边界效应。让我们分解此框的每个部分阴影：

  1. 第一个影子：0 0 0 0.1em white这是路标的白色边界。
    • 0用于水平偏移：这意味着没有水平偏移，因此阴影直接出现在元素后面。
    • 0用于垂直偏移：同样，没有垂直偏移，因此阴影就在元素后面。
    • 0用于模糊半径：模糊半径设置为零，这意味着阴影具有锋利的边缘。
    • 0.1em用于扩散半径：传播半径通过将阴影扩展到0.1em的远处而产生类似边界的效果。
    • white用于阴影颜色：阴影的这一部分是白色的，它创建了内边界的外观。
  2. 第二个阴影：0 0 0 calc(0.1em + 1px) var(--sign-color)这是路标的外部边缘，与街道标志本身是相同的颜色。
    • 0用于水平和垂直偏移：不应用水平或垂直偏移。
    • 0对于模糊半径：没有模糊效果。
    • calc(0.1em + 1px)对于扩散半径：这动态地计算出范围比以前的阴影稍大，从而产生了外边界效应。
    • var(--sign-color)用于阴影颜色：阴影的这一部分符合由--sign-color变量定义的颜色，使您可以自定义边框颜色。
  3. 第三个影子：0.2em 0.2em 0.1em rgba(0, 0, 0, 0.25)这是一种额外的效果，为整个路标创造了漫射的落下阴影效果。
    • 0.2em用于水平偏移：0.2em的略有水平偏移给右侧和下方的阴影外观。
    • 0.2em用于垂直偏移：同样，0.2em的垂直偏移在符号向右侧和下方创建阴影。
    • 0.1em对于模糊半径：这为阴影增添了微妙的模糊效果。
    • rgba(0, 0, 0, 0.25)用于阴影颜色：阴影是半透明且黑暗的，它会产生阴影效果以深入到标志。

总而言之，通过将这些多个盒子阴影结合在一起，您可以为路标创建视觉上吸引人的边界效果。第一个阴影是内边界，第二个阴影是外边界，第三个阴影提供了微妙的落下阴影效果，导致标志的抛光时尚外观。

定制街道标志的颜色

Customizable Street Sign

要自定义标志的颜色，只需更改CSS的:root部分中--sign-color变量的值即可。例如，要使标志蓝色，请这样更新：

:root {
  --green: #145203;
  --blue: #0561ad;

  --superscript: "ST";
}
.street-sign{
  --sign-color: var(--blue); /\* Change to blue \*/
...

您可以尝试使用不同的颜色值来创建与您的偏好或项目主题相匹配的路标。对于某些浅色，您可能需要使用.invered CSS类才能具有黑色文字和边框。

iCustomizable Street Sign Customizable Street Sign

在Codepen上尝试一下！

是否想查看并尝试该行动中的路标项目？您可以在CodePen上找到代码。随意自定义，更改文本或探索浏览器中的不同颜色选项。设计自己的路牌很有趣！

结论

使用HTML和CSS创建时尚且可自定义的路标是一种为您的网络项目增添个人风格的有趣方式。该教程受到MockoFun的街道标志模板的启发，为您带来了稳固的基础。无论您是要设计一个活动的娱乐标志，还是在网站上添加独特的元素，都可以乐趣设计自己的路标！