我喜欢用奇怪的编程思想挑战自己. 这是获得乐趣和学习新事物的好方法. 这次的挑战是使用一个空 div 在 CSS 中绘制一个芝士汉堡.
经过大量的试验和错误, 我最终得到了这个.
这可能不是有史以来最好看的汉堡, 但对我来说是印象最深刻的. 这表明我们有可能用一个 div 绘制像这样复杂的东西.
在本文中, 我们将一步步制作这种芝士汉堡.
HTML 非常简短: 一个字符集, 一个标题, 一个 CSS 文件的链接, 以及一个 div.
- <!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 文件上.
CSS
汉堡最基本的 CSS 可能看起来像这样.
- .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 会更有意义, 但那里的乐趣在哪里呢?
来源: https://juejin.im/post/5c5dfabb51882562c16b6e13