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

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

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

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

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

👍
Полезно - 26
В этой статье мы рассмотрим, как можно сделать плавное появление элементов при прокрутке страницы. Мы будем использовать css и немного нативного js, без использования сторонних библиотек. Прист...
👍
Полезно - 0
Как добиться смены картинки при наведении? Это можно реализовать с помощью css. Готовый пример: Объяснения. Как мы сделали, чтобы картинка менялась при наведении? Мы в html код...
👍
Полезно - 1
В этой статье рассмотрим, какие есть методы выравнивания картинки по центру блока. Давайте создадим нашу разметку, с которой будем работать. Создадим класс .wrap и внутрь его добавим картин...
👍
Полезно - 37
Достаточно популярный запрос, как сделать гамбургер меню. Я покажу вам вариант с использованием html, css и js. Это адаптивный вариант, то есть он будет работать и на мобильных устройствах. Дем...
👍
Полезно - 1
Поменяем цвет фона и текста у кнопки при наведении. Будем использовать два способа. Первый - просто меняем фон и цвет у кнопки. Второй - меняем фон кнопки с помощью псевдоэлемента :before Кн...
👍
Полезно - 2
В этой статья вы узнаете, как сделать анимированный блик на кнопке. Делать это будем с помощью css-анимации, используя keyframes. Без JS, только HTML и CSS. Демо А теперь давайте по порядку. ...
👍
Полезно - 4
В это статья я расскажу, как можно сделать плавное подчеркивание ссылки на ховере. Все будет реализовано на css, без использования сторонних библиотек. Предположим, у вас есть ссылка: <a...
👍
Полезно - 10
Прочитав эту статью, вы узнаете, как сделать так, чтобы при наведении мышки, изображение плавно увеличивалось. И не просто увеличивалось в размерах, а чтобы создавался эффект зума. Мы будем исп...
CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Вступай в клуб
🧑‍💻Присоединяйся к сообществу!
Patreon
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
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