Статьи

Липкие заголовки и полновысотные элементы: Сложная комбинация

Липкие заголовки и полновысотные элементы: Сложная комбинация

alexei09/01/2025 - 09:00

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

Альтернатива обычным техническим иллюстрациям и визуализации данных

Альтернатива обычным техническим иллюстрациям и визуализации данных

alexei31/12/2024 - 09:38

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

Что может сломать CSS свойство aspect-ratio

Что может сломать CSS свойство aspect-ratio

alexei12/12/2024 - 08:33

В CSS есть свойство aspect-ratio, которое получило полную поддержку примерно в 2021 году. Это свойство дает гораздо лучший дизайнерский результат, чем принудительное изменение размеров. Однако, у него есть и свои особенности использования, незнание которых может привести к некоторым проблемам

Разрешите представиться, Каскадные слои CSS

Разрешите представиться, Каскадные слои CSS

alexei09/10/2024 - 08:31

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

Что такое медиаобъект? Еще один кирпичик вашего сайта

Что такое медиаобъект? Еще один кирпичик вашего сайта

alexei19/09/2024 - 08:51
Из чего состоит интернет? По крайней мере, уровень пользовательского интерфейса в основном состоит из медиаблоков. Обычно, это изображение, расположенное слева, и какой-нибудь описательный текст справа от него
Секрет эффективного CSS? Соблюдайте модульность!

Секрет эффективного CSS? Соблюдайте модульность!

alexei10/09/2024 - 20:26
Включение CSS и HTML в абстракции, обрабатываемые на сервере, в конечном итоге ведет к значительному раздуванию кода, потому что CSS и HTML требуют гораздо более модульной структуры объектов, чем, например, PHP
Как структурировать CSS? Разбираемся в синтаксисе БЭМ

Как структурировать CSS? Разбираемся в синтаксисе БЭМ

alexei30/08/2024 - 09:14
БЭМ (Блок, Элемент, Модификатор) - это методология именования селекторов CSS, придуманная ребятами из Яндекса. Это разумный способ присвоения имен вашим CSS классам, чтобы придать им больше прозрачности и смысла для других разработчиков
Как структурировать CSS? Знакомьтесь - BEM

Как структурировать CSS? Знакомьтесь - BEM

alexei24/08/2024 - 08:37
На небольших сайтах обычно не имеет особого значения то, как вы организуете свои стили. Однако, когда дело доходит до более крупных и сложных проектов, тогда то, как вы организуете свой код, является ключом к эффективности по крайней мере в трех аспектах...
Тестирование кода HTML при помощи CSS

Тестирование кода HTML при помощи CSS

alexei18/08/2024 - 08:33
Мы поговорим о том, можно ли тестировать HTML при помощи возможностей CSS (тестирование целостности HTML с использованием CSS-селекторов) без использования JavaScript, и что могут предложить последние новшества самого CSS
Каскад и специфичность в CSS - это просто

Каскад и специфичность в CSS - это просто

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

Эффект размытия вместо тени на CSS

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

Как анимировать контур при помощи CSS

alexei12/02/2024 - 09:47
Загрузчики и индикаторы прогресса являются одними из широко используемых примеров в учебниках по CSS. Существует множество способов их реализации. В этой статье будет показан подход, использующий анимированные пользовательские свойства, конический градиент, CSS свойство offset и эмодзи
CSS тени и Неоморфный дизайн

CSS тени и Неоморфный дизайн

alexei29/01/2024 - 09:41
Неоморфизм, также известный как мягкий дизайн пользовательского интерфейса, - это направление дизайна, которое подразумевает создание 3D-подобных обтекаемых или мягких фигур с помощью CSS теней. В этой статье мы рассмотрим, как добавить различные типы теней к блочным элементам и тексту.