CSS-Tricks на русском Подписаться CSS Tricks - это популярный сайт, посвященный полезным приемам, техникам и ресурсам для веб-разработчиков, в частности, CSS и связанным с ним технологиям. CSS-Tricks css-tricks.com RSS css-tricks.com CSS-Tricks на русском RSS thenote.app
Решено: Селектор префикса класса CSS Недавно принятое предложение позволит нам выбирать классы, которые являются префиксом для вариаций с подстановочным знаком, например .prefix-*.Решено: Селектор префикса класса CSS, изначально написанный вручную и опубликованный с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. Resolved: CSS Class Prefix Selector css-tricks.com +1
CSS Навигация: Первые шаги Применяйте стиль, когда кто-то переходит с одной конкретной страницы на другую. Идея состоит в том, чтобы сделать источники для переходов между документами декларативными в CSS, а не управлять этим в JavaScript.CSS Navigation Matching, Early Days, изначально написанная вручную и с любовью опубликованная на CSS-Tricks. Вам также стоит подписаться на рассылку. CSS Navigation Matching, Early Days css-tricks.com +1
WordPress.com Студенческий план Как преподаватель веб-разработки для начинающих, я считаю, что создание сайта на WordPress — отличный финальный проект. Однако размещение этих проектов всегда было препятствием.Студенческий план WordPress.com, изначально написанный от руки и опубликованный с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. WordPress.com Student Plan css-tricks.com +1
Переключение тёмного режима: двух состояний вполне достаточно Лиа выступает против реализации светлого/темного режима, предлагающей три варианта для посетителей: светлый, темный и системный.Переключатели темного режима: двух состояний достаточно, изначально написано от руки и с любовью опубликовано на CSS-Tricks. Вам также стоит подписаться на рассылку. Dark mode toggles: two states are enough css-tricks.com +1
Что важно №17: API пользовательских выделений, сопоставление CSS-навигации, исправление обводки текста и многое другое Кроме того, как стилизовать скелетные пользовательские интерфейсы, как включить диагональную прокрутку, как изображения могут переполнять сами себя, и даже больше. По сути, как делать много действительно классных (CSS) вещей.Что важно №17: Custom Highlight API, CSS Navigation Matching, исправление text-stroke и многое другое, изначально написанное от руки и опубликованное с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More css-tricks.com +1
Заблокировано aria-hidden: Предупреждение верно, и каждое найденное вами исправление ошибочно Предупреждение верно. И рекомендуемые исправления, которые вы, вероятно, видели, неверны. Вот что вы можете сделать вместо этого, чтобы правильно устранить проблему.Заблокировано aria-hidden: Предупреждение верно, и каждое найденное вами исправление неверно, изначально написано от руки и с любовью опубликовано на CSS-Tricks. Вам также стоит подписаться на рассылку. Blocked aria-hidden: The Warning is Right, and Every Fix You’ve Found is Wrong css-tricks.com +1
Анимация свойства CSS border-image Границы изображений — недооцененная функция. Один интересный факт заключается в том, что срезы границ изображений могут проходить по всей границе элемента, а их анимация создает красивые эффекты.Анимация CSS border-image, изначально написанная вручную и опубликованная с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. Animating CSS border-image css-tricks.com +1
SmashingConf Фрайбург 2026, 7–10 сентября Очные конференции Smashing Magazine возвращаются и пройдут в чудесном городе Фрайбург со 7 по 10 сентября.SmashingConf Freiburg 2026, 7-10 сентября, изначально написанная от руки и опубликованная с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. SmashingConf Freiburg 2026, September 7-10 css-tricks.com +1
Использование и стилизация элемента диалогового окна В этом элементе, кажущемся незначительной частью веб-архитектуры, много нюансов. У меня есть некоторые заметки, полученные в результате его изучения.Использование и стилизация элемента диалога, изначально написанного вручную и опубликованного с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. Using and Styling the Dialog Element css-tricks.com +1
2026 State of CSS, Опросы разработчиков Несколько заметок и выводов из результатов опроса State of CSS 2026, включая приятное упоминание CSS-Tricks!State of CSS 2026, опросы разработчиков, изначально написанные от руки и опубликованные с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. 2026 State of CSS, Devs Surveys css-tricks.com +1
Декорации для Gap уже доступны, вот что нового Сегодня, благодаря полной поддержке CSS gap decorations в Chrome и Edge, начиная с версии 149, вы можете очень легко стилизовать отступы с большим контролем.Gap Decorations теперь доступны, вот что нового, изначально написано от руки и с любовью опубликовано на CSS-Tricks. Вам также стоит подписаться на рассылку. Gap Decorations Are Now Available, Here’s What’s New css-tricks.com +1
Что важно №16: Анимации sibling-index(), варианты использования ключевого слова infinity, запросы к контейнеру с фиксацией и многое другое Функция sibling-index() для анимаций, CSS и Чемпионата мира по футболу 2026, варианты использования ключевого слова infinity, запросы для "застрявших" контейнеров и многое другое.Что такое !important #16: sibling-index() для анимаций, варианты использования ключевого слова infinity, запросы для "застрявших" контейнеров и многое другое, изначально написанное от руки и опубликованное с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. What’s !important #16: sibling-index() Animations, Use Cases for the infinity Keyword, Container Stuck Queries, and More css-tricks.com +1
режим записи Свойство CSS writing-mode определяет, располагаются ли строки текста горизонтально или вертикально, а также направление, в котором движутся блоки и строки. .element { writing-mode: vertical-rl; }Это наиболее полезно для таких языков, как китайский, японский или…writing-mode изначально написан от руки и опубликован с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. writing-mode css-tricks.com +1
Pointer-Events Свойство pointer-events контролирует, может ли элемент стать целью событий указателя, таких как клики, состояния наведения и другие события, основанные на указателе. Другими словами, оно позволяет вам решить, должен ли браузер рассматривать элемент как интерактивный, когда…pointer-events, изначально написанное вручную и опубликованное с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку. pointer-events css-tricks.com +1
Что важно №15: CSS, учитывающий границы, CSS, основанный на времени, CSS на всю ширину и многое другое Подобно прошлому разу, «Важное №15» довольно насыщено — прочитайте все о CSS, учитывающем границы, обеспечении доступности сеточных дорожек, создании веб-дизайнов, основанных на времени, исправлении полноэкранного CSS, улучшении настраиваемых выборов, новых функциях веб-платформы и многом другом.«Важное №15: CSS, учитывающий границы, CSS, основанный на времени, полноэкранный CSS и многое другое» было изначально написано от руки и с любовью опубликовано на CSS-Tricks. Вам также стоит подписаться на рассылку. What’s !important #15: Boundary-aware CSS, Time-based CSS, Full-bleed CSS, and More css-tricks.com +1
Готовьтесь к мощному свойству CSS border-shape! Недавно мы получили функцию shape() и свойство corner-shape. Что еще нам может понадобиться для создания фигур в CSS? Позвольте мне рассказать: свойство border-shape!Приготовьтесь к мощному свойству CSS border-shape! Изначально написано от руки и опубликовано с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. Get Ready For the Powerful CSS border-shape Property! css-tricks.com +1
Что !important #14: Оформление промежутков, random(), изменение размера поля и многое другое Я знаю, вы заняты, поэтому в What’s !important #14 я быстро пробегусь по тому, что произошло за последние несколько насыщенных недель, несмотря на небольшое количество обновлений браузеров. От CSS Quake до CSS Gap Decorations — это нельзя пропустить!What’s !important #14: Gap Decorations, random(), field sizing и многое другое, изначально написано от руки и опубликовано с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. What’s !important #14: Gap Decorations, random(), field sizing, and More css-tricks.com +1
Сдвигающаяся грань между состояниями CSS и событиями JavaScript В CSS всегда были псевдоклассы, которые стилизовали элементы в зависимости от взаимодействия пользователя. Однако последние нововведения стирают грань между тем, на что "слушает" CSS, и тем, как они становятся альтернативой тому, на что обычно слушает JavaScript."Стирающаяся грань между состояниями CSS и событиями JavaScript" была написана вручную и опубликована с любовью на CSS-Tricks. Вам действительно стоит подписаться на их рассылку. The Shifting Line Between CSS States and JavaScript Events css-tricks.com +1
translateZ() Функция translateZ() приближает или отдаляет элемент от пользователя.translateZ() изначально была написана вручную и опубликована с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. translateZ() css-tricks.com +1
translateY() Функция translateY() смещает элемент по вертикали на указанное расстояние.translateY() изначально написана вручную и опубликована с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. translateY() css-tricks.com +1
translateX() Функция translateX() сдвигает элемент по горизонтали на указанную величину.translateX() изначально была написана от руки и опубликована с любовью на CSS-Tricks. Вам также следует подписаться на рассылку. translateX() css-tricks.com +1
перевести() Функция CSS translate() сдвигает элемент с его исходного положения на двухмерной плоскости.Функция translate() изначально была написана вручную и опубликована с любовью на CSS-Tricks. Вам также следует подписаться на рассылку. translate() css-tricks.com +1
Использование анимаций, управляемых прокруткой, для противоположных направлений прокрутки Иногда у дизайнеров бывают глупые идеи, которые в конце концов вам полюбятся. Мне это случилось с этой концепцией, где мне пришлось создать столбцы элементов, движущихся в противоположных направлениях, когда пользователь прокручивает страницу.Замена встраивания CodePenПримечание: Это …Использование анимаций, управляемых прокруткой, для противоположных направлений прокрутки, изначально написано и опубликовано с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку новостей. Using Scroll-Driven Animations for Opposing Scroll Directions css-tricks.com +1
Первый взгляд на анимации, запускаемые при прокрутке Давайте рассмотрим различия между анимациями, управляемыми прокруткой, и анимациями, запускаемыми прокруткой.Первый взгляд на анимации, запускаемые прокруткой, изначально был написан от руки и с любовью опубликован на CSS-Tricks. Вам также стоит подписаться на рассылку. A First Look at Scroll-Triggered Animations css-tricks.com +1
Сирена песня ariaNotify() Появился совершенно новый метод ariaNotify(), определенный спецификацией WAI-ARIA 1.3, который предоставляет средства для программного запуска озвучивания в программе чтения с экрана.«Песнь сирены ariaNotify()» изначально была написана от руки и опубликована с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. The Siren Song of ariaNotify() css-tricks.com +1
Реквизит для этого Props for That создает динамические элементы на основе того, что CSS обычно не может отображать в браузере. Например, положение курсора, значения прогресса, определенные состояния форм, текущее время, скорость прокрутки.Prop For That изначально был написан вручную и опубликован с любовью на CSS-Tricks. Вам также стоит подписаться на их рассылку. Prop For That css-tricks.com +1
Что важно #13: @функция, alpha(), CSS Wordle и многое другое Функции CSS, функция alpha(), сеточные ряды, некоторые вещи о диалоговых окнах, о которых вы, возможно, не знаете, CSS Wordle и многое другое — это то, что важно сейчас.Что важно #13: @function, alpha(), CSS Wordle и многое другое, изначально написано и опубликовано с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку. What’s !important #13: @function, alpha(), CSS Wordle, and More css-tricks.com +1
Почему не работает переход между 3D-видами? Почему мой переход 3D-просмотра не работает?! Sunkanmi решает эту проблему и предлагает элегантное решение.«Почему мой переход 3D-просмотра не работает?» изначально написано от руки и опубликовано с любовью на CSS-Tricks. Вам также следует подписаться на рассылку новостей. Why Isn’t My 3D View Transition Working? css-tricks.com +1
Нет необходимости включать «навигацию» в ваши метки навигации Одна из тех нюансов, которую стоит хранить в запасе, когда вы пишете для программ чтения с экрана.Не нужно включать слово «навигация» в метки навигации, которые были написаны от руки и опубликованы с любовью на CSS-Tricks. Также стоит подписаться на новостную рассылку. There’s no need to include ‘navigation’ in your navigation labels css-tricks.com +1
Создание запоминающихся веб-опытов: Современный набор инструментов CSS Существует множество способов создавать запоминающиеся впечатления. Иногда это так просто, как форма, которая заполняется гладко. Но здесь я хочу поделиться техниками, которые я использую, когда хочу, чтобы сайт казался живым и запоминался.Создание запоминающихся веб-опытов: современный набор инструментов CSS, изначально написанный и опубликованный с любовью на CSS-Tricks. Вам также следует подписаться на новостную рассылку. Creating Memorable Web Experiences: A Modern CSS Toolkit css-tricks.com +1
Прокрутка с управлением, прокрутка с триггером, состояния прокрутки и переходы представления Я сказал одно, а имел в виду другое, и использовал одно, когда мне нужно было другое. Сравниваю анимации, управляемые прокруткой, анимации, запускаемые прокруткой, состояния прокрутки в запросах контейнера и переходы представления для своего будущего "я".Scroll-Driven, Scroll-Triggered, Scroll States и View Transitions, изначально написанные от руки и опубликованные с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. Scroll-Driven, Scroll-Triggered, Scroll States, and View Transitions css-tricks.com +1
Еще одна попытка создать идеальную круговую диаграмму CSS... без JavaScript! Мы снова погружаемся в CSS-круговые диаграммы! На этот раз автор Антуан Вильпре объясняет семантические и гибкие диаграммы без единой строки JS.Еще одна попытка создать идеальную CSS-круговую диаграмму... без JavaScript! Изначально написана от руки и с любовью опубликована на CSS-Tricks. Вам определенно стоит подписаться и на рассылку. Another Stab at the Perfect CSS Pie Chart… Sans JavaScript! css-tricks.com +1
offset-path Свойство offset-path в CSS определяет путь движения, по которому элемент будет следовать во время анимации.Изначально это свойство называлось motion-path. Оно, как и все остальные связанные свойства motion-, переименовываются в спецификации в offset-. Мы меняем…offset-path, изначально написанное вручную и опубликованное с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. offset-path css-tricks.com +1
@custom-media Правило @custom-media в CSS позволяет создавать псевдонимы для медиа-запросов.@custom-media изначально было написано вручную и опубликовано с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. @custom-media css-tricks.com +1
@функция Правило @function определяет пользовательские CSS-функции. Эти пользовательские функции представляют собой повторно используемые блоки CSS, которые могут принимать аргументы, содержать сложную логику и возвращать значения на основе этой логики.@function изначально написана вручную и опубликована с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. @function css-tricks.com +1
::поиск-текст Псевдоэлемент CSS ::search-text выбирает совпадающий текст из функции браузера "найти на странице". ::search-text изначально написан и опубликован с любовью на CSS-Tricks. Вам также следует подписаться на новостную рассылку. ::search-text css-tricks.com +1
Утилита Astro Markdown Component для любого фреймворка В предыдущей статье я говорил о том, почему и как использовать компонент Markdown в Astro.Здесь мы расширим эту тему и поможем вам использовать Markdown везде — независимо от используемого вами фреймворка. Итак, …Утилита компонента Astro Markdown для любого фреймворка была написана и опубликована с любовью на CSS-Tricks. Вам также следует подписаться на новостную рассылку. Astro Markdown Component Utility for Any Framework css-tricks.com +1
Что важно #12: Тестирование Safari, ::checkmark, позиционирование HTML-якорей и многое другое Старое (тестирование в Safari, когда у вас нет Safari), новое (::checkmark), промежуточное (позиционирование якорей, но с использованием HTML) и многое другое.Что такое !important #12: Тестирование Safari, ::checkmark, позиционирование HTML- якорей и многое другое, написано и опубликовано с любовью на CSS-Tricks. Вам также следует подписаться на рассылку новостей. What’s !important #12: Safari Testing, ::checkmark, HTML Anchor Positioning, and More css-tricks.com +1
Раскрытие текста с помощью буквенного интервала CSS Пока мы не получим что-то вроде ::nth-letter, мы всё равно можем создать некоторые действительно крутые текстовые эффекты, используя существующие возможности CSS, такие как letter-spacing, ::first-word и ::first-line.Открывающий текст с помощью CSS letter-spacing был написан от руки и опубликован с любовью на CSS-Tricks. Вы действительно должны подписаться на новостную рассылку. Revealing Text With CSS letter-spacing css-tricks.com +1
Техническое письмо в эпоху ИИ Это не совсем о ИИ. Это о техническом письме в эпоху ИИ. У меня есть некоторые мысли на эту тему, и я надеюсь, что они будут полезны вам, людям, которые читаете.Техническое письмо в эпоху ИИ было написано от руки и опубликовано с любовью на CSS-Tricks. Вам также следует подписаться на новостную рассылку. Technical Writing in the AI Age css-tricks.com +1
Переходы представления между документами: масштабирование на сотни элементов Каждое имя перехода вида на странице должно быть уникальным. Проблема в том, что каждый псевдоэлементовый селектор в вашем CSS нацелен на конкретное имя, поэтому ваши стили анимации взрываются в неуправляемую стену селекторов.Переходы вида между документами: масштабирование на сотни элементов изначально написано и опубликовано с любовью на CSS-Tricks. Вы действительно должны подписаться на новостную рассылку. Cross-Document View Transitions: Scaling Across Hundreds of Elements css-tricks.com +1
Состояние центрирования CSS в 2026 году Несмотря на бесчисленное количество онлайн-ресурсов, легко запутаться при попытке центрировать элемент. Существуют документированные решения, но действительно ли вы понимаете, почему работает выбранный вами код? Давайте посмотрим на текущее состояние вариантов центрирования сегодня, в 2026 году.Состояние центрирования CSS в 2026 году, изначально написанное от руки и опубликованное с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. The State of CSS Centering in 2026 css-tricks.com +1
Stack Overflow: Когда мы перестаём задавать вопросы Это всё ещё бьёт по голове, когда видишь крутой спад в вопросах на Stack Overflow. Что это значит для обучения в нашей отрасли?Stack Overflow: Когда мы перестаём задавать вопросы, изначально написано от руки и опубликовано с любовью на CSS-Tricks. Вам действительно стоит подписаться на новостную рассылку. Stack Overflow: When We Stop Asking css-tricks.com +1
Переходы представления между документами: подводные камни, о которых никто не упоминает Это часть 1 из двух частей серии о переходах вида между документами, в которой рассматриваются все подводные камни, от отказа от устаревшего способа подключения к ним до малоизвестного таймаута в 4 секунды.Переходы вида между документами: подводные камни, о которых никто не упоминает, были написаны от руки и опубликованы с любовью на CSS-Tricks. Вам также следует подписаться на рассылку новостей. Cross-Document View Transitions: The Gotchas Nobody Mentions css-tricks.com +1
Что важно #11: 3D сцены вокселей, Летающий фокус, синтаксис CSS и многое другое Если 3D сцены вокселей (которые можно стилизовать), анимации полета фокуса или новые синтаксисы CSS вам интересны, то этот выпуск What’s !important определенно для вас.What’s !important #11: 3D сцены вокселей, полет фокуса, синтаксисы CSS и многое другое изначально написано и опубликовано с любовью на CSS-Tricks. Вам также следует подписаться на рассылку. What’s !important #11: 3D Voxel Scenes, Flying Focus, CSS Syntaxes, and More css-tricks.com +1
Вычисление и отображение цен со скидкой в CSS Умное использование CSS для расчета и отображения цены продукта со скидкой путем указания базовой цены и суммы скидки, в котором представлены современные возможности CSS, такие как attr(), mod() и round().Расчет и отображение цен со скидкой в CSS изначально написано и опубликовано с любовью на CSS-Tricks. Вам также следует подписаться на рассылку новостей. Computing and Displaying Discounted Prices in CSS css-tricks.com +1
rotateX() Функция rotateX() поворачивает элемент вокруг оси X в трехмерном пространстве.rotateX() изначально написана от руки и опубликована с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. rotateX() css-tricks.com +1
rotateY() Функция rotateY() вращает элемент вокруг его вертикальной оси y.rotateY() изначально написана от руки и опубликована с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку. rotateY() css-tricks.com +1
rotateZ() Функция rotateZ() вращает элемент вокруг его оси z, то есть по часовой стрелке или против часовой стрелки.rotateZ() изначально написана от руки и опубликована с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку. rotateZ() css-tricks.com +1
rotate() Функция rotate() вращает элемент по часовой стрелке или против часовой стрелки в 2D-плоскости.rotate() изначально написана от руки и опубликована с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку. rotate() css-tricks.com +1
