Как создать логотип Hashnode с помощью HTML и CSS
coding html css logo logo-design

Как создать логотип Hashnode с помощью HTML и CSS

22 февраля 2023 г.

В этой статье мы узнаем, как воссоздать логотип Hashnode с помощью простого HTML/CSS. JavaScript не используется.

Предпосылки

  • Базовые знания HTML/CSS
  • Редактор кода, такой как VS Code
  • Веб-браузер, такой как Chrome/Firefox/Edge

Анализ логотипа

Логотип Hashnode доступен в светлой и темной темах и выглядит как наклонный квадрат с изогнутыми краями и кругом в центре.

HTML-код

Для этого проекта создадим два файла. index.html и style.css.

Откройте VS Code и создайте шаблон HTML, нажав ! и введите. Затем свяжите style.css в теге head. В разделе body давайте создадим два div'а; один внутри другого, как показано ниже.

<div class="blue-square">
  <div class="circle"></div>
</div>

Внешний div имеет класс blue-square, в котором мы будем стилизовать внешнюю синюю область логотипа, а внутренний div имеет класс circle, в котором мы будем стилизовать внутренний круг. логотипа.

Весь index.html будет выглядеть так:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>HashNode Logo</title>
  </head>

  <body>
    <div class="blue-square">
      <div class="circle"></div>
    </div>
  </body>
</html>

Стили с помощью CSS:

В этом разделе мы стилизуем логотип с помощью CSS. Давайте сделаем box-sizing как border-box. Давайте удалим все ненужные поля и отступы, которые придумывает браузер.

И, наконец, давайте создадим переменную CSS --bgcolor, чтобы задать черный или белый фон для соответствующей темы.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  --bgcolor: white;
}

Теперь давайте поместим наш логотип по центру страницы. Поскольку наш blue-square является прямым дочерним элементом элемента body. Мы можем использовать селектор body и центрировать div внутри него, используя свойство flex.

body {
  background-color: var(--bgcolor);
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

Здесь мы дали свойству background-color переменную --bgcolor. Мы сделали display как flex, чтобы сделать его flexbox. Для высоты задано значение 100vh, чтобы занимать всю высоту области просмотра.

justify-content: center сделает div центрированным по горизонтали, а align-items: center сделает div по центру по вертикали.

<цитата>

Примечание: align-items: center не будет работать, если вы не укажете свойство высоты для своего элемента.

На экране по-прежнему ничего не будет видно.

Давайте перейдем к стилю внешней части нашего логотипа, которая представляет собой область синего цвета. Используйте селектор .blue-square, чтобы задать стиль элемента.

.blue-square {
  width: 60px;
  height: 60px;
  background-color: blue;
  border-radius: 20px;
  rotate: 45deg;
}

Давайте зададим внешнему div height и width 60px и background-color blue< /код>. И давайте зададим border-radius 20px, чтобы он выглядел более изогнутым. На данный момент это будет выглядеть как синий квадрат с изогнутыми границами, как показано ниже:

Square

Но на самом деле логотип не просто квадратный, а наклонный. Итак, давайте повернем его на 45 градусов. Добавьте это свойство в указанный выше селектор.

.blue-square {
  /* Other Properties */
  rotate: 45deg;
}

Теперь это даст нам сходство с настоящим логотипом.

Tilted Square

Теперь давайте перейдем к созданию центрального круга. Но подождите, чтобы сделать круг центрированным, нам нужно сделать его родителем flexbox и передать свойства justify-content и align-items center. Итак, здесь родителем circle является синий квадрат. Давайте добавим к этому эти свойства.

.blue-square {
  /* Other Properties */
  display: flex;
  justify-content: center;
  align-items: center;
}

Теперь давайте стилизуем элемент circle. Давайте зададим ему цвет фона, такой же, как у переменной --bgcolor. Давайте зададим ему width и height 24px. Чтобы сделать div кругом, давайте зададим ему border-radius 50%. Это сделает div кругом. Вот так просто.

.circle {
  background-color: var(--bgcolor);
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

Вот и все. Логотип Hashnode готов. Попробуйте изменить переменную --bgcolor между black и white, чтобы увидеть логотип в светлом и темном режимы.

В темном режиме:

Logo Dark Mode

В легком режиме:

Logo Light Mode

<цитата>

Отказ от ответственности: он может иметь или не иметь точное соотношение сторон, размеры и другие характеристики исходного логотипа. По вопросам легального использования логотипа Hashnode обращайтесь напрямую в команду Hashnode.

Заключение

Если вы нашли это полезным, поставьте лайк и поделитесь своими мыслями в комментариях ниже. Вы можете увидеть логотип в действии в кодовой ручке ниже.

https://codepen.io/knirmalkumar/pen/oNPgdgo?embedable=true

Также опубликовано здесь< /p>

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE

COPYRIGHT 2020 COFFEE-WEB.RU