Container Queries: адаптивные компоненты без медиазапросов

Представьте карточку-виджет, которая сама подстраивается к ширине блоков сетки, не глядя на размеры экрана. Container Queries дают такую гибкость: элемент ориентируется на контейнер и меняет стили при порогах вроде @container (min-width: 40rem).

В этой статье подробно о контейнерных запросах — понятная теория, примеры кода и обзор текущей поддержки во всех основных браузерах.

#фронтенд #css #адаптивность

Матовое стекло следующего уровня с backdrop-filter в CSS

Для создания эффекта матового стекла на веб-сайте самый просто способ — использования filter: blur(). Но Джош Комо предлагает вариант с помощью backdrop-filter: blur(), ещё одного CSS-свойства, которое делает эффект круче.

В этой статье вы узнаете, чем оно отличается от классического свойства filter, как браузер вычисляет «то, что под элементом», какие эффекты (blur, brightness, contrast…) сочетаются между собой и где сегодня есть поддержка. В конце — интерактивная песочница: меняйте параметры и сразу видите результат.

#фронтенд #css

Как сделать обтекание текста без лишней вёрстки

Используйте свойство shape-outside, которое позволяет добавить обтекание текста по фигуре. Весь текст вне обтекания сам подстроится под оставшееся место.

.column--left .shape {
  float: right;
  shape-outside: circle(100px at 100% 50%);
}

#советы #css

Тюним стартовую страницу Firefox: убираем лишнее, добавляем своё

В свежем гайде автор показывает, как «причесать» новую вкладку Firefox без расширений: скрыть рекламные блоки, заменить «карточки» на собственные закладки, подправить отступы и фон с помощью пары строк пользовательского CSS.

Гайд в двух часть: первая и вторая. Если хотите довести до ума какую-то часть браузера или исправить ошибки разработчиков, то переходите по ссылкам.

#фронтенд #css #firefox

Эффект выгорающей кинопленки

Нашел интересный codepen-проект. Здесь автор решил сделать эффект при наведении, похожий на выгорающую кинопленку. При этом он учитывает положение курсора в момент наведения при отработке эффекта.

Посмотреть код можно здесь: https://codepen.io/kiranpate1/pen/MWMGKdv

#codepen #css #javascript

Одна переменная на три мира: как синхронизировать значение между HTML, CSS и JavaScript

В статье Крис Койер показывает, как установить переменную size в Pug и передать её одновременно в HTML (для генерации сетки), CSS (через --size для настройки grid-template-columns) и JavaScript (через window.size для навигации по стрелкам). Простой приём, который позволяет управлять интерфейсом из одного источника данных.

#фронтенд #pug #css #javascript

CSS Custom Highlight API: стилизуйте текст, не ломая DOM

Представьте, что выделять важные фразы можно не вставляя <span>, да ещё с управлением из JavaScript. CSS Custom Highlight API позволяет создавать стилизованные диапазоны текста почти без изменений в DOM-структуре. От ::selection до пользовательских псевдо-элементов стили — всё настраивается через JS и CSS, а документация показывает примеры применения и текущую поддержку браузеров.

Подробности по ссылке: https://tproger.ru/articles/css-custom-highlight-api

#фронтенд #css #api

CSS-стилизация курсоров нового уровня

Представьте не просто смену стрелки, а настоящий динамичный указатель: текст внутри, плавные анимации, фильтры и смена состояния при клике — всё это возможно благодаря JavaScript поверх CSS.

В статье показано, как превратить обычный <div> в кастомный курсор, который отслеживает движение мыши, меняет внешний вид при отдельных состояниях и автоматически отключается на тач-устройствах и при запросе снижения анимации.

#фронтенд #css #ux

Жидкие эффекты на CSS

Этот 6‑минутный ролик показывает, как с помощью только CSS создать плавное «жидкое» движение в фонах, кнопках и карточках с эффектом растекающейся жидкости. Урок идеально подходит, если вы хотите добавить анимацию без нагрузки JS и расширить визуальный арсенал интерфейса.

#фронтенд #css

Blur без JS: как CSS создаёт размытые заглушки для изображений

Представьте: на вашем сайте вместо сплошной пустоты или блоков скачут удобные размытые заглушки (LQIP), и всё это срабатывает без JavaScript, обёрток и лишней разметки. При этом цвет заглушек не выбирается вручную под каждую картинку, а подставляется автоматически на основе цветов изображения. Один кастомный CSS-переменный --lqip, немного битовой арифметики и радиальные градиенты — и браузер сам создаёт нужный LQIP-плейсхолдер.

Код битовой упаковки, ограничения css calc(), градиенты в сетке 3×2 и другие детали уже ждут вас в статье: https://leanrada.com/notes/css-only-lqip/

#фронтенд #css #lqip

Первый сайт «своими руками»: пошаговая инструкция без фреймворков

Начало не всегда должно быть сложным. В этом гайде поэтапно разбирается создание сайта на чистом HTML и CSS — от структуры папок до стилей, адаптивного меню и внедрения Google Fonts. Полезно как новичкам, так и тем, кто хочет освежить фундамент перед переходом на современные фреймворки.

А вы когда последний раз вручную писали сайт без сборщиков?

#фронтенд #html #css

Естественно, Liquid Glass

Нашел интересный CodePen-проект: Apple со своим обновлением заставили сообщество переосмыслять Liquid Glass, не без этого. Автор реализовал такое с помощью пользовательского шейдера (shaderMaterial) на WebGL с помощью three.js.

Посмотреть код можно здесь: https://codepen.io/supah/pen/dPodbrX

#codepen #css #javascript
@tproger_web

Mobile‑first или Desktop‑first? Как выбрать с чего начать вёрстку

При запуске проекта важно определить: что приоритетнее — мобильный или десктопный интерфейс? Эта статья объясняет:

— Почему mobile‑first = UX для пальцев: удобство планшетов и смартфонов, индексирование Google.
— Когда desktop‑first выигрывает: дашборды, CRM, интерфейсы с насыщенным взаимодействием.
— Простые примеры медиазапросов (@media (min-width) vs max-width) и практические советы по написанию адаптивного CSS.

С чего обычно начинаете вы?

#фронтенд #css #адаптивность

Наглядный совет, как создавать простые анимации с помощью CSS

Здесь собраны 4 примера простых анимаций и код к ним. Они помогут разобраться, как пользоваться кейфреймами тем, кто лучше понимает наглядную демонстрацию, а не сухую теорию.

#совет #css

Адаптивные изображения и подписи на CSS: сила container-queries и :has()

Теперь не обязательно «гадать», подгоняя стили картинок и подписей под медиазапросы — CSS получил мощные инструменты. В статье показано, как с помощью container-queries и :has() адаптировать изображения к размеру блока и менять расположение и стили элементов в зависимости от размеров экрана или блока. Примеры кода и пояснения помогут освоить эти новые фишки CSS уже сегодня.

#фронтенд #css #адаптивность

Всего две строчки CSS, чтобы дать любому блоку возможность менять размер.

#совет #css

CSS Loaders: готовые анимации загрузки без JS

Когда нужно быстро добавить симпатичный индикатор загрузки — не обязательно писать его с нуля. На css-loaders.com собраны десятки готовых CSS‑анимаций: спиннеры, полоски, точки, волны и даже креативные 3D‑эффекты. Все варианты работают без JavaScript и легко кастомизируются под ваш дизайн. Просто копируйте код и вставляйте в проект.

#фронтенд #css #ui

Partial Keyframes: анимация в CSS без лишней работы

Иногда нужно анимировать только одно свойство, оставив остальные нетронутыми. В статье объясняется техника partial keyframes, которая позволяет писать ключевые кадры для одного свойства, оставляя, например, изначальное значение нетронутым. Это упрощает код и делает анимации более гибкими. С примерами кода и визуальными иллюстрациями — всё понятно даже тем, кто только начинает осваивать CSS‑анимации.

#фронтенд #css #анимация

Псевдоэлемент vs Псевдокласс: Практические советы для реальных проектов

Что такое псевдоэлемент?
Псевдоэлемент позволяет добавить виртуальный элемент внутрь выбранного, не изменяя HTML-разметку. Это похоже на добавление штампа к документу: элемент остаётся прежним, а его оформление дополняется декоративными деталями, например, первой буквой абзаца или декоративной линией.

Пример:

p::first-letter {
  font-size: 2em;
  color: red;
}

Используйте псевдоэлементы, если хотите добавить что-то дополнительное, например, декоративные иконки или элементы оформления, которые не требуют отдельного HTML-блока.

Псевдоэлементы бывают следующими:

— ::before — добавляет контент перед содержимым элемента.
— ::after — добавляет контент после содержимого.
— ::first-letter — стилизует первую букву элемента.
— ::first-line — оформляет первую строку текста.
— ::grammar-error — позволяет оформить часть документа, содержащую грамматическую ошибки, подсвеченную браузеров.
— ::marker — стилизует поле маркера пункта, как маркированного, так и нумерованного.
— ::selection — соответствует части документа, которая была выбрана.
— ::spelling-error — как и ::grammar-error выделяет ошибку, отмеченную браузером, но уже орфографическую

Что такое псевдокласс?
Псевдокласс меняет внешний вид элемента в зависимости от состояния, как будто элемент «перевоплощается» в зависимости от вашего взаимодействия с ним. Это работает, когда пользователь наводит курсор, активирует элемент или переводит его в фокус.

Пример:

a:hover {
  color: green;
}

Псевдоклассы применяются для управления активностью элемента — от наведения до фокуса — и помогают улучшить интерактивность пользовательского интерфейса.

Псевдоклассов очень много. Вот некоторые популярные виды псевдоклассов:
— :hover — применяется при наведении курсора.
— :active — активируется во время нажатия.
— :focus — используется, когда элемент находится в фокусе (например, форма ввода).
— :visited — для посещённых ссылок.
— :not() — позволяет исключить элементы из селектора.

Когда использовать каждый вариант?
Псевдоэлементы добавляют декоративные или вспомогательные элементы визуально, не нарушая структуру HTML. Если вам нужно, чтобы страница выглядела ярче или содержала дополнительные визуальные подсказки (например, стрелочки, рамки, иконки), выбирайте псевдоэлементы.

Псевдоклассы же изменяют внешний вид уже существующих элементов в зависимости от их состояния. Это удобно для создания интерактивного интерфейса: ссылки изменяют цвет при наведении, поля выделяются в фокусе и так далее.

Важные моменты и подводные камни
При использовании этих инструментов важно учитывать совместимость браузеров: некоторые старые версии могут не поддерживать все возможности.

Также будьте внимательны к вопросам доступности: добавляемый декоративный контент не должен нарушать читаемость страницы или мешать пользователям с ограниченными возможностями. Кроме того, чрезмерное использование может усложнить поддержку кода, поэтому старайтесь использовать именно те варианты, которые действительно улучшают интерфейс и не дублируют функционал HTML.

Как вы применяете псевдоэлементы и псевдоклассы в своих проектах? Поделитесь опытом в комментариях!

#простымисловами #фронтенд #css

Вопросы с собеседований: что такое специфичность CSS-селекторов и как она работает?

Типы селекторов расположены по возрастанию специфичности:
— Селекторы типов элементов (например, h1) и псевдоэлементов (например, ::before).
— Селекторы классов (например, .example), селекторы атрибутов (например, [type="radio"]) и псевдоклассов (например, :hover)
— Селекторы идентификаторов (например, #example).

Универсальный селектор (*), комбинаторы (+, >, ~, ' ') и отрицающий псевдокласс (:not()) не влияют на специфичность. Но селекторы, объявленные внутри :not(), влияют.

Стили, обьявленные в элементе (например, style="font-weight:bold"), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.

Расчёт специфичности:
— тег и псевдоэлемент имеют специфичность 0001;
— класс, псевдокласс, атрибут — 0010;
— id имеет специфичность 0100;
— инлайновый стиль имеет приоритет 1000.

#простымисловами #собеседование #css