Статьи

Как структурировать 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 сделать различные геометрические фигуры: треугольники, параллелограммы, ромбы, диалоговые облака, стрелки и многое другое
Прокачайте свои CSS навыки с селектором :has()

Прокачайте свои CSS навыки с селектором :has()

alexei25/06/2023 - 09:08
Реляционный CSS селектор :has() позволяет сделать то, что раньше можно было сделать только при помощи JavaScript. В этой статье мы рассмотрим, как комбинировать :has() с другими селекторами CSS, и какие волшебные возможности предоставляет этот селектор.
Что такое z-index и как формируется контекст наложения в CSS

Что такое z-index и как формируется контекст наложения в CSS

alexei05/06/2023 - 09:26
Порядок наложения или стековая последовательность описывает порядок расположения HTML элементов. По умолчанию, HTML элементы располагаются в следующем порядке: корневой элемент, непозиционированные элементы в том порядке, в котором они определены...
60 классных кнопок на CSS с анимацией

60 классных кнопок на CSS с анимацией

alexei14/04/2023 - 10:26
Кнопки являются важной частью веб-дизайна, поскольку они не только улучшают пользовательский интерфейс, но и влияют на внешний вид и эстетику веб-сайта. В этой статье вы найдете коллекцию лучших кнопок на CSS.