Статьи

Разрешите представиться, Каскадные слои 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 теней. В этой статье мы рассмотрим, как добавить различные типы теней к блочным элементам и тексту.
Отблеск, перспектива и поворот - CSS 3D-эффекты для изображений

Отблеск, перспектива и поворот - причудливые CSS 3D эффекты для изображений

alexei13/09/2023 - 09:26
CSS, используя определенные приемы, позволяет превращать изображения в аккуратные интерактивные элементы. Эта статья представляет собой сборник необычных 3D-эффектов для изображений, демонстрирующих эти возможности CSS
Создаем часы при помощи новых тригонометрических CSS функций sin() и cos()

Создаем часы при помощи новых тригонометрических CSS функций sin() и cos()

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

CSS фигуры: 15+ примеров

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