Как создать логотип 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, чтобы он выглядел более изогнутым. На данный момент это будет выглядеть как синий квадрат с изогнутыми границами, как показано ниже:
Но на самом деле логотип не просто квадратный, а наклонный. Итак, давайте повернем его на 45 градусов. Добавьте это свойство в указанный выше селектор.
.blue-square {
/* Other Properties */
rotate: 45deg;
}
Теперь это даст нам сходство с настоящим логотипом.
Теперь давайте перейдем к созданию центрального круга. Но подождите, чтобы сделать круг центрированным, нам нужно сделать его родителем 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, чтобы увидеть логотип в светлом и темном режимы.
В темном режиме:
В легком режиме:
Отказ от ответственности: он может иметь или не иметь точное соотношение сторон, размеры и другие характеристики исходного логотипа. По вопросам легального использования логотипа Hashnode обращайтесь напрямую в команду Hashnode.
Заключение
Если вы нашли это полезным, поставьте лайк и поделитесь своими мыслями в комментариях ниже. Вы можете увидеть логотип в действии в кодовой ручке ниже.
https://codepen.io/knirmalkumar/pen/oNPgdgo?embedable=true
Также опубликовано здесь< /p>
Оригинал