Стилизация флажков (чекбоксов) в CSS
Наверняка вы задумались о том, как можно изменить стандартный вид флажков (чекбоксов), чтобы они выглядели привлекательней с учетом дизайна вашего сайта или задач одной конкретной […]
Последние записи: CSS
Способы добавления плавной прокрутки страницы в CSS и JavaScript
Наверняка вы посещали страницы, которые плавно прокручивают контент при клике на ссылке к соответствующему блоку. Это красиво выглядит на лэндингах (LandingPage, или посадочная страница), в […]
Центрирование элементов в CSS
Центрирование элементов в css — это совсем не праздный вопрос, т.к. это довольно распространенная ситуация в верстке. В этой статье мы рассмотрим разные способы горизонтального […]
Способы построения колонок в CSS
Мы рассмотрим варианты построения макета на основе 4 колонок. Во-первых, такое распределение информации является очень популярным, во-вторых, они хорошо перестраиваются в 2 колонки для планшетов […]
Кнопки с масками на основе SVG
В этой статье мы увидим, как сделать не просто кнопки, а кнопки-иконки, доступные для людей с ограниченными возможностями, с помощью SVG и CSS, не перегружая […]
Использование элемента progress на страницах сайта
При создании веб-сайтов и веб-приложений периодически требуется показать пользователю информацию о ходе выполнения какого-либо запроса или задачи, будь то загрузка файла, воспроизведение видео или импорт […]
Псевдоклассы :not и :is в CSS. Примеры использования
Обычно нам требуется задать некое форматирование для классов, элементов или id. Однако, бывают случаи, когда нужно назначить форматирование для элементов, которые не имеют какого-либо селектора, […]
Примеры верстки книг на HTML и CSS
Вы когда-нибудь задумывались о том, что на HTML и CSS можно сделать книгу? Оказывается, есть умельцы, выкладывающие свои работы на codepen.io, которые с помощью 3D […]
Варианты оформления блока "Наша команда" и профиля пользователя
В этой статье вы найдете подборку примеров кода с ресурса codepen.io, которые предлагают интересные решения с точки зрения дизайна и кода для таких блоков вашего […]