[Перевод] Сделать чизбургер с div через css

CSS
[Перевод] Сделать чизбургер с div через css

Оригинальная ссылка:Woohoo. less cake.com/cheese не так хорош, как…

Мне нравится бросать себе вызов странными идеями программирования. Это отличный способ развлечься и узнать что-то новое. На этот раз задача состоит в том, чтобы использовать пустойdivсуществуетCSSрисуем чизбургер.

После долгих проб и ошибок я, наконец, получил это.

Возможно, это не самый красивый бургер, но он произвел на меня самое сильное впечатление. Это показывает, что можно использовать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;
}

Затем мы используем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было бы логичнее, но где же тут веселье?

Категории