Рубрика: Верстка

Верстка — это столб, на котором все держится. Ни один сайт не будет работать без верстки. HTML должен быть, чтобы сайт заработал.

В последнее время большой бум в IT. И многие, кто начинает интересоваться этой темой в итоге приходят к верстке. Это первая ступень в мире сайтов.

Нельзя недооценивать верстальщика. Все вот эти красивые эффекты, которые вы видите на своих любимых сайтах — все это работа верстальщика. Параллаксы, модальные окна и другие фичи — это дело рук верстальщика.

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

Верстка
👍
Полезно - 26
Появление элементов при скролле
В этой статье мы рассмотрим, как можно сделать плавное появление элементов при прокрутке страницы. Мы будем использовать css и немного нативного js, без использования сторонних библиотек. Прист...
Читать дальше
Верстка
👍
Полезно - 0
Как с помощью CSS изменить картинку при наведении курсора
Как добиться смены картинки при наведении? Это можно реализовать с помощью css. Готовый пример: Объяснения. Как мы сделали, чтобы картинка менялась при наведении? Мы в html код...
Читать дальше
Верстка
👍
Полезно - 1
Как выровнять картинку по центру с помощью CSS
В этой статье рассмотрим, какие есть методы выравнивания картинки по центру блока. Давайте создадим нашу разметку, с которой будем работать. Создадим класс .wrap и внутрь его добавим картин...
Читать дальше
Верстка
👍
Полезно - 37
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Достаточно популярный запрос, как сделать гамбургер меню. Я покажу вам вариант с использованием html, css и js. Это адаптивный вариант, то есть он будет работать и на мобильных устройствах. Дем...
Читать дальше
Верстка
👍
Полезно - 1
Как изменить цвет кнопки: полная инструкция для новичков
Поменяем цвет фона и текста у кнопки при наведении. Будем использовать два способа. Первый - просто меняем фон и цвет у кнопки. Второй - меняем фон кнопки с помощью псевдоэлемента :before Кн...
Читать дальше
Верстка
👍
Полезно - 2
Кнопка с бликом: как сделать анимированный блик на чистом CSS
В этой статья вы узнаете, как сделать анимированный блик на кнопке. Делать это будем с помощью css-анимации, используя keyframes. Без JS, только HTML и CSS. Демо А теперь давайте по порядку. ...
Читать дальше
Верстка
👍
Полезно - 4
Плавное подчеркивание ссылки при наведении на чистом CSS
В это статья я расскажу, как можно сделать плавное подчеркивание ссылки на ховере. Все будет реализовано на css, без использования сторонних библиотек. Предположим, у вас есть ссылка: <a...
Читать дальше
Верстка
👍
Полезно - 10
Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS
Прочитав эту статью, вы узнаете, как сделать так, чтобы при наведении мышки, изображение плавно увеличивалось. И не просто увеличивалось в размерах, а чтобы создавался эффект зума. Мы будем исп...
Читать дальше
← Предыдущая страница
CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Перейти в Telegram
Вступай в клуб
🧑‍💻Присоединяйся к сообществу!
Patreon
Перейти на Patreon
Наш рейтинг
🏆Лучший хостинг для сайта
1
Ukraine
9/10
2
HostPro
8/10
3
TutHost
8/10
4
REG
8/10
Где учиться
🧑‍🎓Рекомендуемые курсы
Javascript-разработчик
Введение в программирование
SEO-специалист
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили: 

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
10px
20px
30px
Very Peri
🤔Цвет 2022 года
Институт цвета Pantone объявил цвет 2022 года. Это сиреневый оттенок под названием 17-3938 Very Peri.
#6667ab