Секреты, трюки, приемы

Каскад и специфичность часто воспринимаются как что-то сложное и запутанное. И в самом деле, если вы не учитываете их в своем коде CSS, это очень быстро приведет к проблемам. Но если у вас есть хотя бы базовые знания в этом вопросе, все становится довольно просто

Черпая вдохновение в тенях, автор статьи Яир Эвен Ор (Yair Even Or) создает нечто подобное, только с эффектом размытия вместо тени. В этой статье вы получите пошаговое объяснение того, как это делается с помощью комбинации масок, градиентов и старого доброго свойства backdrop-filter

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

Как следует из названия, мы собираемся украшать изображения! При этом мы будем украшать изображение, используя только тег img и ничего больше. Всю работу возьмет на себя CSS

CSS, используя определенные приемы, позволяет превращать изображения в аккуратные интерактивные элементы. Эта статья представляет собой сборник необычных 3D-эффектов для изображений, демонстрирующих эти возможности CSS

Ну вот, наконец, у нас есть тригонометрические CSS функции! Наличие такого рода математических способностей CSS открывает целый ряд новых возможностей. И вот, в этом уроке мы пощупаем эти возможности и познакомимся с парой новых функций: sin() и cos().

В этой статье приведены примеры того, как можно при помощи CSS сделать различные геометрические фигуры: треугольники, параллелограммы, ромбы, диалоговые облака, стрелки и многое другое

Реляционный CSS селектор :has() позволяет сделать то, что раньше можно было сделать только при помощи JavaScript. В этой статье мы рассмотрим, как комбинировать :has() с другими селекторами CSS, и какие волшебные возможности предоставляет этот селектор.

Порядок наложения или стековая последовательность описывает порядок расположения HTML элементов. По умолчанию, HTML элементы располагаются в следующем порядке: корневой элемент, непозиционированные элементы в том порядке, в котором они определены...

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

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

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

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

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

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