Создание работающей сегодня плиточной разметки типа Masonry
Как то возник вопрос, как сделать плиточную раскладку (типа Masonry), которая работала бы во всех браузерах? Ответ был найден. И это заняло всего 66 строк кода JavaScript.
Секреты, трюки, приемы
Создание навигационной панели с "подвижным выделением" с помощью JavaScript и CSS
Создаем навигационную панель с "подвижным выделением" современным средствами Javascript и CSS. В соответствии с данным шаблоном граница вокруг активного элемента навигации анимируется непосредственно от одного элемента к другому, когда пользователь нажимает на элементы меню
Каскадные слои CSS vs БЭМ vs утилитарные классы: управление специфичностью
При написании CSS практически невозможно избежать разочарования, когда стили применяются не так, как ожидалось — это особенность специфичности. Вы применили стиль, он сработал, а позже пытаетесь переопределить его другим стилем и...
Липкие заголовки и полновысотные элементы: Сложная комбинация
Липкое (sticky) позиционирование - одна из тех функций CSS, которая довольно чувствительна и может быть сведена на нет множеством факторов. И один из этих факторов заключается в том, что липкие элементы плохо работают, если им приходится вместе с другими элементами формировать общую высоту
Что может сломать CSS свойство aspect-ratio
В CSS есть свойство aspect-ratio, которое получило полную поддержку примерно в 2021 году. Это свойство дает гораздо лучший дизайнерский результат, чем принудительное изменение размеров. Однако, у него есть и свои особенности использования, незнание которых может привести к некоторым проблемам
Каскад и специфичность в CSS - это просто
Каскад и специфичность часто воспринимаются как что-то сложное и запутанное. И в самом деле, если вы не учитываете их в своем коде CSS, это очень быстро приведет к проблемам. Но если у вас есть хотя бы базовые знания в этом вопросе, все становится довольно просто
Эффект размытия вместо тени на CSS
Черпая вдохновение в тенях, автор статьи Яир Эвен Ор (Yair Even Or) создает нечто подобное, только с эффектом размытия вместо тени. В этой статье вы получите пошаговое объяснение того, как это делается с помощью комбинации масок, градиентов и старого доброго свойства backdrop-filter
Крутые эффекты наведения, основанные на свойстве background
В этой статье мы рассмотрим ряд интересных эффектов, возникающих при наведении курсора мыши на элемент. Создавать мы их будем исключительно при помощи CSS свойства background
Необычные украшения изображений - Магия с одним элементом
Как следует из названия, мы собираемся украшать изображения! При этом мы будем украшать изображение, используя только тег img и ничего больше. Всю работу возьмет на себя CSS
Отблеск, перспектива и поворот - причудливые CSS 3D эффекты для изображений
CSS, используя определенные приемы, позволяет превращать изображения в аккуратные интерактивные элементы. Эта статья представляет собой сборник необычных 3D-эффектов для изображений, демонстрирующих эти возможности CSS
Создаем часы при помощи новых тригонометрических CSS функций sin() и cos()
Ну вот, наконец, у нас есть тригонометрические CSS функции! Наличие такого рода математических способностей CSS открывает целый ряд новых возможностей. И вот, в этом уроке мы пощупаем эти возможности и познакомимся с парой новых функций: sin() и cos().
CSS фигуры: 15+ примеров
В этой статье приведены примеры того, как можно при помощи CSS сделать различные геометрические фигуры: треугольники, параллелограммы, ромбы, диалоговые облака, стрелки и многое другое
Прокачайте свои CSS навыки с селектором :has()
Реляционный CSS селектор :has() позволяет сделать то, что раньше можно было сделать только при помощи JavaScript. В этой статье мы рассмотрим, как комбинировать :has() с другими селекторами CSS, и какие волшебные возможности предоставляет этот селектор.
Что такое z-index и как формируется контекст наложения в CSS
Порядок наложения или стековая последовательность описывает порядок расположения HTML элементов. По умолчанию, HTML элементы располагаются в следующем порядке: корневой элемент, непозиционированные элементы в том порядке, в котором они определены...
Разные способы создать градиентную тень на CSS
Как сделать градиентную тень для элементов с прозрачным и непрозрачным фоном. На самом деле в CSS нет свойства, которое позволяет создавать градиентные тени. И все посты, которые посвящены этой теме, на самом деле рассматривают различные CSS-трюки для аппроксимации градиента. И мы в этой статье тоже рассмотрим пару таких трюков
