【译】经过css，用一个div作一个芝士汉堡

时间 2019-12-02

标签经过 css 一个 div 芝士汉堡栏目 CSS 繁體版

原文原文链接

原文连接：www.lesscake.com/cheeseburge…css

我喜欢用奇怪的编程思想挑战本身。这是得到乐趣和学习新事物的好方法。此次的挑战是使用一个空 div 在 CSS 中绘制一个芝士汉堡。html

通过大量的试验和错误，我最终获得了这个。编程

这可能不是有史以来最好看的汉堡，但对我来讲是印象最深入的。这代表咱们有可能用一个 div 绘制像这样复杂的东西。bash

在本文中，咱们将一步步制做这种芝士汉堡。less

HTML学习

HTML 很是简短：一个字符集，一个标题，一个 CSS 文件的连接，以及一个 div。spa

<！DOCTYPE html>
<HTML>
  <HEAD>
    <meta charset =“UTF-8”>
    <TITLE> Cheesburger </ TITLE>
    <link rel =“stylesheet”href =“style.css”/>
  </ HEAD>
  <BODY>
    <div class =“burger”> </ div>
  </ BODY>
</ HTML>
复制代码

这就是所有了！如今咱们将把注意力集中在 style.css 文件上。3d

CSScode

汉堡最基本的 CSS 可能看起来像这样。cdn

.burger {
  / *包含汉堡的全部部分* /
  / *包子，奶酪，肉，生菜和芝麻* /
}
复制代码

可是这太有限了，咱们将没法在单个选择器内安装整个汉堡。要找到更多空间，咱们应该使用 ：before 和 ：after 伪元素。

.burger {
  /*奶酪，肉，生菜 */
}

.burger:before {
  /* 面包 */
}

.burger:after {
  /* 芝麻 */
}
复制代码

这可能看起来很少，但这对咱们的目的来讲已经足够了。

面包

小圆面包由两部分组成：上面一层和下面一层。因此咱们必须找到一种方法在一个 CSS 选择器中绘制 2 个不一样的形状，这并不复杂。

咱们首先使用 border 属性绘制 2 个矩形。

.burger:before {
  content: ""; 
  display: block;

  /* 两片面包见的距离 */
  width: 400px;
  height: 55px;

  /* 上层面包 */
  border-top: 80px solid #f5b230;

  /* 下层面包 */
  border-bottom: 50px solid #f5b230;
}
复制代码

而后咱们使用 border-radius 来很好地弯曲面包。

.burger:before {
  /* 和以前一样的代码 */
  content: ""; 
  display: block;
  width: 400px;
  height: 55px;
  border-top: 80px solid #f5b230;
  border-bottom: 50px solid #f5b230;

  /* 新内容 */
  border-radius: 30% 30% 20% 20%; 
}
复制代码

佐料

接下来，咱们将添加主要的汉堡佐料：奶酪，肉和生菜。此次咱们须要将 3 个形状放在一个 CSS 选择器中。

咱们如今就把重点放在肉上。

.burger {
  /* 尺寸 */
  width: 380px;
  height: 40px;

  /* 颜色和形状 */
  background-color: #681f24;
  border-radius: 15px; 
}


复制代码

嗯，那不是很好，有一些肉，但不在正确的位置。不幸的是，咱们不能使用 margin 或 padding 来解决这个问题，由于它会移动整个汉堡，而不只仅是牛排。

那尝试些不一样的东西：用 box-shadow 画出肉。

.burger {
  / *与之前相同* /
  / *咱们刚刚删除了背景颜色* /
  width: 380px;
  height: 40px;
  border-radius: 15px;

  /* 新内容 */
  /* 参数 左外边距, 顶部外边距, 颜色 */
  box-shadow: 10px 85px #681f24; 
}
复制代码

这样可行！然而，咱们面临另外一个问题：咱们如何在同一个 CSS 选择器中添加奶酪和生菜？要解决这个问题，咱们须要确认两件事：

肉，奶酪和生菜能够具备相同的形状，只要它们的颜色不一样便可。
在 CSS 中，咱们能够根据须要使用尽量多的盒子阴影。

因此...咱们只需添加更多的盒子阴影！

.burger {
  /* 与以前相同的代码 */
  width: 380px;
  height: 40px;
  border-radius: 15px; 

  /* 新的盒子阴影 */
  box-shadow: 
      10px 50px #fddb28, 
      /* 奶酪 */
      10px 85px #681f24, 
      /* 肉类 */
      10px 120px #82af15; 
      /* 生菜 */
}
复制代码

请注意，阴影的顺序很重要，由于第一个阴影的顺序靠前，会出如今其余阴影的前面。

芝麻

咱们的汉堡正在造成，但它目前看起来很像热狗。咱们应该经过在顶部面包中添加一些芝麻来解决这个问题。

首先，咱们用 box-shadow 画一粒芝麻。

.burger:after {
  content: "";
  display: block;

  /* 尺寸和形状 */
  width: 10px;
  height: 6px;
  border-radius: 40%;

  /* 位置和颜色 */
  box-shadow: 100px -165px #ffffff;
}
复制代码

而后咱们经过使用许多框阴影复制它。

.burger:after {
  /* 保持以前的代码 */
  content: "";
  display: block;
  width: 10px;
  height: 6px;
  border-radius: 40%;

  /* 添加新的盒子阴影 */
  box-shadow: 
      /* 顶行 */
      100px -165px #ffffff,
      160px -165px #ffffff,
      230px -165px #ffffff,
      290px -165px #ffffff,

      /* 底行 */
      60px -135px #ffffff,
      125px -135px #ffffff,
      190px -135px #ffffff,
      255px -135px #ffffff,
      330px -135px #ffffff;
}
复制代码

更好看的奶酪

若是咱们能让奶酪看起来更像奶酪就更好了。例如，经过显示奶酪切片的一个角。这意味着即便已经使用了全部 CSS 选择器，咱们还要画一个新的图形（一个黄色的三角形）。

若是咱们仔细查看咱们的代码，咱们会注意到目前为止咱们尚未使用 content 属性。让咱们看看当咱们在其中添加字符 ▾ 时会发生什么。

.burger:before {
  /* 改变 content 标签 */
  content: "▾";

  /* ▾ 的颜色和尺寸 */
  color: #fddb28;
  font-size: 120px;

  /* 其余保持相同 */
}
复制代码

咱们确实显示了一个新图形，此次咱们一样不能使用 margin or padding 来解决这个问题。

可是经过一些 CSS 技巧，咱们将完成它。

.burger:before {
  /* 在三角形前添加八个空格 */
  content: " ▾";
  /* 空格会显示在 content 中*/ 
  white-space: pre;

  /* 垂直放置 ▾ */
  line-height: 25px;

  /* 保持其余不变 */
}
复制代码

如今咱们完成了咱们的芝士汉堡。

彩蛋

当我给朋友发送关于我此次挑战的邮件时，她回答了这个聪明的答案。

.burger:before {
  content: "🍔";
  font-size: 100px;
}
复制代码

这样能够减小 CSS，从而得到更好的效果。

结论

我用单个 div 和一些 CSS 设法实现的目标给我留下了深入的印象。固然使用 SVG 会更有意义，但那里的乐趣在哪里呢？