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

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

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

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

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

Верстка

👍

Полезно - 3

Как вставить css в html: 3 способа добавить css в html

Вы можете по разному добавить css в ваш html-файл. Есть быстрые варианты, есть правильные. Мы рассмотрим все возможные. 1. Подключение внешнего файлы Самый распространенный и правильный вари...

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

Верстка

👍

Полезно - 6

Как сделать номер телефона на сайте кликабельным

Вам нужно знать один маленький секрет, который позволит сделать на любом сайте номер телефона кликабельным. Секрет заключается в том, что кликабельный номер телефона - это ссылка, которая начинаетс...

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

Верстка

👍

Полезно - 35

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

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

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

Верстка

👍

Полезно - 76

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

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

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

Верстка

👍

Полезно - 33

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

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

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

Верстка

👍

Полезно - 31

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

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

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

Верстка

👍

Полезно - 157

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

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

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

Верстка

👍

Полезно - 11

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

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

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

Верстка

👍

Полезно - 11

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

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

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

Верстка

👍

Полезно - 26

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

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

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

← Предыдущая страница — Следующая страница →

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

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

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

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

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

Перейти в Telegram

Наш рейтинг

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

9/10

8/10

8/10

8/10

8/10

7/10

7/10

Что читают?

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

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

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

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

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

Как изменить цвет SVG в 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

Viva Magenta

🤔Цвет 2023 года

Исследовательский институт Pantone выбрал главный цвет 2023 года. Им стал карминово-красный оттенок с фиолетовым подтоном, который назвали Viva Magenta.

#bb2649