【譯】通過css，用一個div做一個芝士漢堡

諍陽發表於2019-02-08
CSS

原文連結：www.lesscake.com/cheeseburge…

我喜歡用奇怪的程式設計思想挑戰自己。這是獲得樂趣和學習新事物的好方法。這次的挑戰是使用一個空 div 在 CSS 中繪製一個芝士漢堡。

經過大量的試驗和錯誤，我最終得到了這個。

【譯】通過css，用一個div做一個芝士漢堡

這可能不是有史以來最好看的漢堡，但對我來說是印象最深刻的。這表明我們有可能用一個 div 繪製像這樣複雜的東西。

在本文中，我們將一步步製作這種芝士漢堡。

HTML

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;
}
複製程式碼

【譯】通過css，用一個div做一個芝士漢堡

然後我們使用 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%; 
}
複製程式碼

【譯】通過css，用一個div做一個芝士漢堡

佐料

接下來，我們將新增主要的漢堡佐料：乳酪，肉和生菜。這次我們需要將 3 個形狀放在一個 CSS 選擇器中。

我們現在就把重點放在肉上。

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

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


複製程式碼

【譯】通過css，用一個div做一個芝士漢堡

嗯，那不是很好，有一些肉，但不在正確的位置。不幸的是，我們不能使用 margin 或 padding 來解決這個問題，因為它會移動整個漢堡，而不僅僅是牛排。

那嘗試些不同的東西：用 box-shadow 畫出肉。

.burger {
  / *與以前相同* /
  / *我們剛剛刪除了背景顏色* /
  width: 380px;
  height: 40px;
  border-radius: 15px;

  /* 新內容 */
  /* 引數 左外邊距, 頂部外邊距, 顏色 */
  box-shadow: 10px 85px #681f24; 
}
複製程式碼

【譯】通過css，用一個div做一個芝士漢堡

這樣可行！然而，我們面臨另一個問題：我們如何在同一個 CSS 選擇器中新增乳酪和生菜？要解決這個問題，我們需要確認兩件事：

  • 肉，乳酪和生菜可以具有相同的形狀，只要它們的顏色不同即可。
  • 在 CSS 中，我們可以根據需要使用盡可能多的盒子陰影。

所以...我們只需新增更多的盒子陰影！

.burger {
  /* 與之前相同的程式碼 */
  width: 380px;
  height: 40px;
  border-radius: 15px; 

  /* 新的盒子陰影 */
  box-shadow: 
      10px 50px #fddb28, 
      /* 乳酪 */
      10px 85px #681f24, 
      /* 肉類 */
      10px 120px #82af15; 
      /* 生菜 */
}
複製程式碼

【譯】通過css，用一個div做一個芝士漢堡

請注意，陰影的順序很重要，因為第一個陰影的順序靠前，會出現在其他陰影的前面。

芝麻

我們的漢堡正在形成，但它目前看起來很像熱狗。我們應該通過在頂部麵包中新增一些芝麻來解決這個問題。

首先，我們用 box-shadow 畫一粒芝麻。

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

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

  /* 位置和顏色 */
  box-shadow: 100px -165px #ffffff;
}
複製程式碼

【譯】通過css，用一個div做一個芝士漢堡

然後我們通過使用許多框陰影複製它。

.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，用一個div做一個芝士漢堡

更好看的乳酪

如果我們能讓乳酪看起來更像乳酪就更好了。例如，通過顯示乳酪切片的一個角。這意味著即使已經使用了所有 CSS 選擇器，我們還要畫一個新的圖形（一個黃色的三角形）。

如果我們仔細檢視我們的程式碼，我們會注意到目前為止我們還沒有使用 content 屬性。讓我們看看當我們在其中新增字元 ▾ 時會發生什麼。

.burger:before {
  /* 改變 content 標籤 */
  content: "▾";

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

  /* 其他保持相同 */
}
複製程式碼

【譯】通過css，用一個div做一個芝士漢堡
我們確實顯示了一個新圖形，這次我們同樣不能使用 margin or padding 來解決這個問題。

但是通過一些 CSS 技巧，我們將完成它。

.burger:before {
  /* 在三角形前新增八個空格 */
  content: "        ▾";
  /* 空格會顯示在 content 中*/ 
  white-space: pre;

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

  /* 保持其他不變 */
}
複製程式碼

【譯】通過css，用一個div做一個芝士漢堡

現在我們完成了我們的芝士漢堡。

彩蛋

當我給朋友傳送關於我這次挑戰的郵件時，她回答了這個聰明的答案。

.burger:before {
  content: "?";
  font-size: 100px;
}
複製程式碼

這樣可以減少 CSS，從而獲得更好的效果。

結論

我用單個 div 和一些 CSS 設法實現的目標給我留下了深刻的印象。 當然使用 SVG 會更有意義，但那裡的樂趣在哪裡呢？

相關文章