CSS & Дизайн
25 статей по категории CSS & Дизайн
Термины по теме категории
Быстрые определения и связанные понятия, которые чаще всего встречаются в материалах этой категории.
Минификация кода: что это и зачем нужна
Минификация (minification) — удаление лишних символов из CSS, JS и HTML без изменения функциональности. Уменьшает размер файлов на 20-60%.
Alt текст: что это и зачем нужен
Alt текст (атрибут alt) — текстовое описание изображения для поисковиков и экранных читалок. Влияет на SEO изображений и доступность сайта.
Адаптивный дизайн: что это и как реализовать
Адаптивный дизайн (Responsive Design) — подход к веб-разработке, при котором сайт корректно отображается на всех устройствах: мобильных, планшетах, десктопах.
Lazy Loading: что это и как реализовать
Lazy Loading (ленивая загрузка) — техника оптимизации, при которой изображения и контент загружаются только когда попадают в область просмотра.
Все категории блога
Переключайтесь между категориями для изучения разных тем
Статьи в категории "CSS & Дизайн"
Найдено 25 статей
CSS спрайты: оптимизация иконок и графики для веб-сайта
Руководство по CSS спрайтам: объединение иконок в один файл, настройка background-position, SVG спрайты и современные альтернативы.
Дизайн-токены: что это, зачем нужны и как использовать в CSS, Tailwind и JSON
Полное руководство по дизайн-токенам: CSS custom properties, Tailwind config, JSON-формат. Как создать единую дизайн-систему и синхронизировать стили между кодом и дизайном.
Адаптивная вёрстка: как тестировать, брейкпойнты, viewport и device presets
Полное руководство по тестированию адаптивной вёрстки: breakpoints, viewport meta tag, device presets для iPhone, Android, планшетов. Как проверить сайт на всех экранах.
CSS border-radius: полное руководство с генератором
CSS border-radius: синтаксис, 1–4 значения, slash notation для эллипсов. Проценты vs px, круг, pill, blob. Поддержка браузеров, производительность, адаптивность.
CSS clip-path: как создавать фигурные маски для элементов
CSS clip-path: синтаксис polygon, circle, ellipse, inset. Практические примеры, анимации, поддержка браузеров, советы по производительности. Генератор clip-path на reChecker.
Как извлечь цветовую палитру из изображения для веб-дизайна
Извлечение цветовой палитры из изображения: зачем нужно, основы теории цвета, алгоритмы (median-cut, k-means). CSS-переменные, инструменты и методы.
CSS фильтры: blur, brightness, contrast и другие эффекты
CSS filter: все функции (blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert, opacity, drop-shadow). filter vs backdrop-filter, производительность, порядок композиции, примеры.
CSS и SCSS: отличия, преимущества и конвертация
CSS vs SCSS/Sass: вложенность, переменные, миксины, партиалы. Когда использовать, миграция с CSS, инструменты конвертации. Конвертер CSS ↔ SCSS на reChecker.
Специфичность CSS-селекторов: полное руководство
Что такое специфичность CSS, как она вычисляется (a,b,c), inline styles vs !important, типичные ошибки, методология BEM, стратегии избежания войн специфичности.
Glassmorphism в CSS: как создать эффект матового стекла
Glassmorphism в CSS: что это, backdrop-filter, поддержка браузеров, fallback-решения, доступность. Принципы дизайна и практические примеры. Генератор на reChecker.
px vs rem vs em: какие единицы измерения использовать в CSS
Полное руководство по единицам измерения CSS: px, rem, em, vw, vh. Когда использовать каждую, доступность, адаптивная вёрстка, важность базового размера шрифта.
Типографическая шкала: как создать систему размеров шрифтов
Модульная шкала типографики: соотношения (minor third, perfect fourth, golden ratio), практическое применение, CSS-переменные, интеграция с Tailwind, адаптивная типографика.
Как создать доступную цветовую палитру для сайта
Практическое руководство по созданию цветовых палитр с учётом WCAG: выбор базовых цветов, генерация оттенков, проверка контраста и инструменты.
Цвета в вебе: HEX, RGB, HSL, HSV — что когда использовать
Сравнение форматов цветов в веб-разработке: HEX, RGB, HSL, HSV. Когда какой формат выбирать, конвертация и практические рекомендации.
CSS box-shadow: все свойства, примеры и трюки
Полное руководство по CSS box-shadow: синтаксис, множественные тени, inset, размытие, распространение. Практические примеры и приёмы для веб-дизайна.
CSS Flexbox: полное руководство с примерами
Подробное руководство по CSS Flexbox: свойства контейнера и элементов, оси, выравнивание, практические примеры и типичные паттерны вёрстки.
CSS градиенты: linear, radial, conic — полное руководство
Полное руководство по CSS-градиентам: linear-gradient, radial-gradient, conic-gradient. Синтаксис, примеры и практическое применение.
CSS Grid: полное руководство по сеткам
Подробное руководство по CSS Grid: свойства контейнера и элементов, именованные области, авторазмещение, практические примеры и типичные паттерны.
Центрирование в CSS с Flexbox: все способы
Полное руководство по центрированию элементов с помощью CSS Flexbox: по горизонтали, вертикали, по обеим осям, а также центрирование с учётом отступов.
Flexbox vs CSS Grid: когда что использовать
Сравнение Flexbox и CSS Grid: сильные стороны каждой технологии, типичные сценарии использования и рекомендации по выбору для разных задач вёрстки.
Конвертация HTML в JSX: особенности и подводные камни
Руководство по преобразованию HTML в JSX для React. Отличия синтаксиса, атрибуты, обработка событий и типичные ошибки.
Как перейти с обычного CSS на Tailwind
Пошаговое руководство по миграции проекта с обычного CSS на Tailwind: стратегии, инструменты, типичные замены и решение частых проблем.
Адаптивные макеты на CSS Grid: практические примеры
Практическое руководство по созданию адаптивных макетов с CSS Grid: брейкпоинты, auto-fill, auto-fit, медиа-запросы и готовые паттерны.
Tailwind CSS: руководство по утилитарному CSS-фреймворку
Подробное руководство по Tailwind CSS: установка, конфигурация, утилитарные классы, кастомизация и лучшие практики для веб-разработки.
Контраст цветов по WCAG: требования и проверка доступности
Руководство по требованиям WCAG к контрасту цветов: уровни AA и AAA, коэффициенты контрастности, инструменты проверки и практические рекомендации.
Хотите больше контента?
Изучите другие категории блога или воспользуйтесь нашими инструментами