【譯】經過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 會更有意義，但那裏的樂趣在哪裏呢？

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。