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

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

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

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

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

Верстка

👍

Полезно - 14

Как сделать эффект нажатия кнопки на CSS

Здесь ты узнаешь, как сделать эффект вдавливания кнопки на CSS. Забегая наперед скажем, что ничего сложного тут нет, справиться сможет любой новичок. Пример Что у нас получится в итоге (клик...

Владимир Самойлов

Верстка

👍

Полезно - 48

Появление элементов при скролле

В этой статье мы рассмотрим, как можно сделать плавное появление элементов при прокрутке страницы. Мы будем использовать css и немного нативного js, без использования сторонних библиотек. Прист...

Владимир Самойлов

Верстка

👍

Полезно - 3

Как с помощью CSS изменить картинку при наведении курсора

Как добиться смены картинки при наведении? Это можно реализовать с помощью css. Готовый пример: Объяснение. Как мы сделали, чтобы картинка менялась при наведении? Мы в HTML код...

Владимир Самойлов

Верстка

👍

Полезно - 14

Как выровнять картинку по центру с помощью CSS

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

Владимир Самойлов

Верстка

👍

Полезно - 97

Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение

Достаточно популярный запрос, как сделать гамбургер меню. Я покажу вам вариант с использованием html, css и js. Это адаптивный вариант, то есть он будет работать и на мобильных устройствах. Дем...

Владимир Самойлов

Верстка

👍

Полезно - 4

Как изменить цвет кнопки: полная инструкция для новичков

Поменяем цвет фона и текста у кнопки при наведении. Будем использовать два способа. Первый - просто меняем фон и цвет у кнопки. Второй - меняем фон кнопки с помощью псевдоэлемента :before Кн...

Владимир Самойлов

Верстка

👍

Полезно - 6

Кнопка с бликом: как сделать анимированный блик на чистом CSS

В этой статье вы узнаете, как сделать анимированный блик на кнопке. Делать это будем с помощью css-анимации, используя keyframes. Без JS, только HTML и CSS. Демо А теперь давайте по порядку. ...

Владимир Самойлов

Верстка

👍

Полезно - 9

Плавное подчеркивание ссылки при наведении на чистом CSS

В это статье я расскажу, как можно сделать плавное подчеркивание ссылки на ховере. Все будет реализовано на css, без использования сторонних библиотек. Предположим, у вас есть ссылка: <a...

Владимир Самойлов

Верстка

👍

Полезно - 27

Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS

Прочитав эту статью, вы узнаете, как сделать так, чтобы при наведении мышки, изображение плавно увеличивалось. И не просто увеличивалось в размерах, а чтобы создавался эффект зума. Мы будем исп...

Владимир Самойлов

← Предыдущая страница

CSS Головоломки в Telegram

Подписывайся и не пропускай:

Актуальные новости

Интересные задачки

Полезные подборки

Перейти в Telegram

Наш рейтинг

🏆Лучший хостинг для сайта

9/10

8/10

8/10

8/10

8/10

7/10

7/10

Что читают?

🏆Популярные записи

Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение

Появление элементов при скролле

Перенос сайта на Тильде на свой хостинг. Пошаговое руководство

Как выровнять картинку по центру с помощью CSS

Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS

Проверка знаний

🤔Хорошо ли вы знаете 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