Статьи

Прокачайте свои CSS навыки с селектором :has()

Прокачайте свои CSS навыки с селектором :has()

alexei25/06/2023 - 09:08
Реляционный CSS селектор :has() позволяет сделать то, что раньше можно было сделать только при помощи JavaScript. В этой статье мы рассмотрим, как комбинировать :has() с другими селекторами CSS, и какие волшебные возможности предоставляет этот селектор.
Что такое z-index и как формируется контекст наложения в CSS

Что такое z-index и как формируется контекст наложения в CSS

alexei05/06/2023 - 09:26
Порядок наложения или стековая последовательность описывает порядок расположения HTML элементов. По умолчанию, HTML элементы располагаются в следующем порядке: корневой элемент, непозиционированные элементы в том порядке, в котором они определены...
60 классных кнопок на CSS с анимацией

60 классных кнопок на CSS с анимацией

alexei14/04/2023 - 10:26
Кнопки являются важной частью веб-дизайна, поскольку они не только улучшают пользовательский интерфейс, но и влияют на внешний вид и эстетику веб-сайта. В этой статье вы найдете коллекцию лучших кнопок на CSS.
Магические числа в CSS

Магические числа в CSS

alexei06/04/2023 - 08:50
Несмотря на сказочное название, магические числа - это плохо. Это термин старой школы программирования, обозначающий "неименованную числовую константу". В CSS магическими числами называют значения, которые при определенных обстоятельствах вполне работоспособны, но настолько хрупки, что при изменении этих обстоятельств склонны ломаться
Разные способы создать градиентную тень на CSS

Разные способы создать градиентную тень на CSS

alexei29/03/2023 - 17:50
Как сделать градиентную тень для элементов с прозрачным и непрозрачным фоном. На самом деле в CSS нет свойства, которое позволяет создавать градиентные тени. И все посты, которые посвящены этой теме, на самом деле рассматривают различные CSS-трюки для аппроксимации градиента. И мы в этой статье тоже рассмотрим пару таких трюков
Функции плавности в CSS переходах и анимации

Функции плавности в CSS переходах и анимации

alexei24/02/2023 - 09:25
Пользовательские функции плавности позволяют улучшить впечатление пользователей от CSS анимации и создает более приятный пользовательский опыт взаимодействия с проектом. В этой статье мы ближе познакомимся с функциями плавности и рассмотрим, как можно их использовать для создания CSS анимаций
Как создать сложную анимацию на CSS

Как создать сложную анимацию на CSS

alexei30/01/2023 - 09:24
В этой статье вы узнаете, как при помощи CSS создать анимированный шар, движущийся по траектории, напоминающей американские горки. Также, вы узнаете, как работает CSS функция cubic-bezier, и как объединить несколько простых анимаций, чтобы создать одну сложную
Руководство по CSS анимации. Принципы и примеры

Руководство по CSS анимации: Принципы и примеры

alexei28/12/2022 - 17:56
В этой статье мы сделаем наши первые шаги в CSS анимации и рассмотрим основные рекомендации по созданию анимации с помощью CSS. Мы будем все изучать на примерах, создавая анимацию, используя принципы традиционной анимации
Простая адаптивная типографика при помощи clamp() - Используем возможности SASS

Простая адаптивная типографика при помощи clamp() - Используем возможности SASS

alexei27/10/2022 - 09:21
Адаптивная типографика становится все более популярной, тем более что CSS функция clamp() теперь доступна в каждом браузере. Но, если честно, для достижения нужного результата все еще требуется провести много вычислений. Поэтому вместо того, чтобы добавлять полную функцию clamp() непосредственно в код, мы можем облегчить нашу работу с помощью Sass.
Функции CSS, за которые мы благодарны, и функции CSS, которые нам нужны

Функции CSS, за которые мы благодарны, и функции CSS, которые нам нужны

alexei10/10/2022 - 10:08
Мы собрали в одном месте некоторые из замечательных новых функций CSS, за которые мы благодарны. Также, у нас возникли определенные пожелания, которые на наш взгляд не мешало бы добавить в спецификации CSS
Руководство по медиа-запросам определения типа устройства ввода

Руководство по медиа-запросам определения типа устройства ввода

alexei21/09/2022 - 08:34
В этой статье мы поговорим о том, как адаптировать наши сайты в зависимости от типа устройства: есть ли у него указатель или нет, и насколько он точен. Чтобы адаптировать наш сайт к возможностям этих устройств, мы поговорим о том, как правильно использовать специальные медиа-запросы hover, pointer, any-hover и any-pointer
Малоизвестные и редко используемые функции CSS в 2022 году

Малоизвестные и редко используемые функции CSS в 2022 году

alexei16/06/2022 - 09:25
CSS постоянно развивается, и некоторые интересные и полезные свойства либо остаются совершенно незамеченными, либо по тем или иным причинам остаются в стороне от публичных дискуссий. В этой статье мы рассмотрим часть таких CSS свойств и селекторов
Современная отзывчивая типографика при помощи CSS clamp

Современная отзывчивая типографика при помощи CSS clamp

alexei08/05/2022 - 10:10
В этой статье мы рассмотрим принципы отзывчивой типографики, примеры использования, лучшие практики, способы их реализации при помощи CSS функции clamp и как рассчитать правильные параметры. Мы также узнаем, как решить некоторые проблемы с принципами доступности и рассмотрим одну важную проблему, которую пока нельзя исправить, но о которой знать все же нужно
Создание слайдера который выглядит одинаково во всех браузерах

Создание слайдера который выглядит одинаково во всех браузерах

alexei16/02/2022 - 09:14
Каждый браузер отображает элемент слайдера по-разному. В этой статье мы рассмотрим причудливость слайдера или диапазонного элемента ввода и продемонстрируем, как оформить его таким образом, чтобы он выглядел одинаково во всех основных браузерах