Статьи

CSS функция min() и адаптивность сайта

CSS функция min() и адаптивность сайта

alexei25/03/2025 - 09:02

В этой статье мы поэкспериментируем с CSS функцией min() и изучим её гибкость в работе с различными единицами измерения, чтобы определить, является ли она универсальным решением для адаптивности

Что если использовать контейнерные единицы измерения для... всего?

Что если использовать контейнерные единицы измерения для... всего?

alexei14/03/2025 - 09:00

Контейнерные единицы измерения, это такие же единицы измерения (вроде, px или rem, но более тесно связанные с единицами измерения области просмотра, например, vw или vi), размер которых зависит от контейнера, в котором они находятся

Введение в управляемую прокруткой CSS анимацию - Прогресс просмотра

Введение в управляемую прокруткой CSS анимацию - Прогресс просмотра

alexei04/03/2025 - 08:26

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

Regex стала лучше - История и будущее регулярных выражений в JavaScript

Regex стала лучше - История и будущее регулярных выражений в JavaScript

alexei29/01/2025 - 09:33

Раньше регулярные выражения в JavaScript были недостаточно мощными по сравнению с другими современными языками программирования, но многочисленные улучшения, появившиеся в последние годы, в корне изменили эту ситуацию. И теперь они могут стать потрясающим инструментом для поиска и замены текста

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

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

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