RSS CSS-Tricks Подписаться CSS Tricks - это популярный сайт, посвященный полезным приемам, техникам и ресурсам для веб-разработчиков, в частности, CSS и связанным с ним технологиям. CSS-Tricks css-tricks.com RSS css-tricks.com
Использование анимаций, управляемых прокруткой, для противоположных направлений прокрутки Иногда у дизайнеров бывают глупые идеи, которые в конце концов вам полюбятся. Мне это случилось с этой концепцией, где мне пришлось создать столбцы элементов, движущихся в противоположных направлениях, когда пользователь прокручивает страницу. Замена встраивания CodePen Примечание: Это … Использование анимаций, управляемых прокруткой, для противоположных направлений прокрутки, изначально написано и опубликовано с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку новостей. Using Scroll-Driven Animations for Opposing Scroll Directions css-tricks.com
Первый взгляд на анимации, запускаемые при прокрутке Давайте рассмотрим различия между анимациями, управляемыми прокруткой, и анимациями, запускаемыми прокруткой. Первый взгляд на анимации, запускаемые прокруткой, изначально был написан от руки и с любовью опубликован на CSS-Tricks. Вам также стоит подписаться на рассылку. A First Look at Scroll-Triggered Animations css-tricks.com
Сирена песня ariaNotify() Появился совершенно новый метод ariaNotify(), определенный спецификацией WAI-ARIA 1.3, который предоставляет средства для программного запуска озвучивания в программе чтения с экрана. «Песнь сирены ariaNotify()» изначально была написана от руки и опубликована с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. The Siren Song of ariaNotify() css-tricks.com
Реквизит для этого Props for That создает динамические элементы на основе того, что CSS обычно не может отображать в браузере. Например, положение курсора, значения прогресса, определенные состояния форм, текущее время, скорость прокрутки. Prop For That изначально был написан вручную и опубликован с любовью на CSS-Tricks. Вам также стоит подписаться на их рассылку. Prop For That css-tricks.com
Что важно #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
Почему не работает переход между 3D-видами? Почему мой переход 3D-просмотра не работает?! Sunkanmi решает эту проблему и предлагает элегантное решение. «Почему мой переход 3D-просмотра не работает?» изначально написано от руки и опубликовано с любовью на CSS-Tricks. Вам также следует подписаться на рассылку новостей. Why Isn’t My 3D View Transition Working? css-tricks.com
Нет необходимости включать «навигацию» в ваши метки навигации Одна из тех нюансов, которую стоит хранить в запасе, когда вы пишете для программ чтения с экрана. Не нужно включать слово «навигация» в метки навигации, которые были написаны от руки и опубликованы с любовью на CSS-Tricks. Также стоит подписаться на новостную рассылку. There’s no need to include ‘navigation’ in your navigation labels css-tricks.com
Создание запоминающихся веб-опытов: Современный набор инструментов CSS Существует множество способов создавать запоминающиеся впечатления. Иногда это так просто, как форма, которая заполняется гладко. Но здесь я хочу поделиться техниками, которые я использую, когда хочу, чтобы сайт казался живым и запоминался. Создание запоминающихся веб-опытов: современный набор инструментов CSS, изначально написанный и опубликованный с любовью на CSS-Tricks. Вам также следует подписаться на новостную рассылку. Creating Memorable Web Experiences: A Modern CSS Toolkit css-tricks.com
Прокрутка с управлением, прокрутка с триггером, состояния прокрутки и переходы представления Я сказал одно, а имел в виду другое, и использовал одно, когда мне нужно было другое. Сравниваю анимации, управляемые прокруткой, анимации, запускаемые прокруткой, состояния прокрутки в запросах контейнера и переходы представления для своего будущего "я". Scroll-Driven, Scroll-Triggered, Scroll States и View Transitions, изначально написанные от руки и опубликованные с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. Scroll-Driven, Scroll-Triggered, Scroll States, and View Transitions css-tricks.com
Еще одна попытка создать идеальную круговую диаграмму CSS... без JavaScript! Мы снова погружаемся в CSS-круговые диаграммы! На этот раз автор Антуан Вильпре объясняет семантические и гибкие диаграммы без единой строки JS. Еще одна попытка создать идеальную CSS-круговую диаграмму... без JavaScript! Изначально написана от руки и с любовью опубликована на CSS-Tricks. Вам определенно стоит подписаться и на рассылку. Another Stab at the Perfect CSS Pie Chart… Sans JavaScript! css-tricks.com
offset-path Свойство offset-path в CSS определяет путь движения, по которому элемент будет следовать во время анимации. Изначально это свойство называлось motion-path. Оно, как и все остальные связанные свойства motion-*, переименовываются в спецификации в offset-*. Мы меняем… offset-path, изначально написанное вручную и опубликованное с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. offset-path css-tricks.com
@custom-media Правило `@custom-media` в CSS позволяет создавать псевдонимы для медиа-запросов. `@custom-media` изначально было написано вручную и опубликовано с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. @custom-media css-tricks.com
@функция Правило @function определяет пользовательские CSS-функции. Эти пользовательские функции представляют собой повторно используемые блоки CSS, которые могут принимать аргументы, содержать сложную логику и возвращать значения на основе этой логики. @function изначально написана вручную и опубликована с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. @function css-tricks.com
::поиск-текст Псевдоэлемент CSS ::search-text выбирает совпадающий текст из функции браузера "найти на странице". ::search-text изначально написан и опубликован с любовью на CSS-Tricks. Вам также следует подписаться на новостную рассылку. ::search-text css-tricks.com
Утилита Astro Markdown Component для любого фреймворка В предыдущей статье я говорил о том, почему и как использовать компонент Markdown в Astro. Здесь мы расширим эту тему и поможем вам использовать Markdown везде — независимо от используемого вами фреймворка. Итак, … Утилита компонента Astro Markdown для любого фреймворка была написана и опубликована с любовью на CSS-Tricks. Вам также следует подписаться на новостную рассылку. Astro Markdown Component Utility for Any Framework css-tricks.com
Что важно #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
Раскрытие текста с помощью буквенного интервала CSS Пока мы не получим что-то вроде ::nth-letter, мы всё равно можем создать некоторые действительно крутые текстовые эффекты, используя существующие возможности CSS, такие как letter-spacing, ::first-word и ::first-line. Открывающий текст с помощью CSS letter-spacing был написан от руки и опубликован с любовью на CSS-Tricks. Вы действительно должны подписаться на новостную рассылку. Revealing Text With CSS letter-spacing css-tricks.com
Техническое письмо в эпоху ИИ Это не совсем о ИИ. Это о техническом письме в эпоху ИИ. У меня есть некоторые мысли на эту тему, и я надеюсь, что они будут полезны вам, людям, которые читаете. Техническое письмо в эпоху ИИ было написано от руки и опубликовано с любовью на CSS-Tricks. Вам также следует подписаться на новостную рассылку. Technical Writing in the AI Age css-tricks.com
Переходы представления между документами: масштабирование на сотни элементов Каждое имя перехода вида на странице должно быть уникальным. Проблема в том, что каждый псевдоэлементовый селектор в вашем CSS нацелен на конкретное имя, поэтому ваши стили анимации взрываются в неуправляемую стену селекторов. Переходы вида между документами: масштабирование на сотни элементов изначально написано и опубликовано с любовью на CSS-Tricks. Вы действительно должны подписаться на новостную рассылку. Cross-Document View Transitions: Scaling Across Hundreds of Elements css-tricks.com
Состояние центрирования CSS в 2026 году Несмотря на бесчисленное количество онлайн-ресурсов, легко запутаться при попытке центрировать элемент. Существуют документированные решения, но действительно ли вы понимаете, почему работает выбранный вами код? Давайте посмотрим на текущее состояние вариантов центрирования сегодня, в 2026 году. Состояние центрирования CSS в 2026 году, изначально написанное от руки и опубликованное с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. The State of CSS Centering in 2026 css-tricks.com
Stack Overflow: Когда мы перестаём задавать вопросы Это всё ещё бьёт по голове, когда видишь крутой спад в вопросах на Stack Overflow. Что это значит для обучения в нашей отрасли? Stack Overflow: Когда мы перестаём задавать вопросы, изначально написано от руки и опубликовано с любовью на CSS-Tricks. Вам действительно стоит подписаться на новостную рассылку. Stack Overflow: When We Stop Asking css-tricks.com
Переходы представления между документами: подводные камни, о которых никто не упоминает Это часть 1 из двух частей серии о переходах вида между документами, в которой рассматриваются все подводные камни, от отказа от устаревшего способа подключения к ним до малоизвестного таймаута в 4 секунды. Переходы вида между документами: подводные камни, о которых никто не упоминает, были написаны от руки и опубликованы с любовью на CSS-Tricks. Вам также следует подписаться на рассылку новостей. Cross-Document View Transitions: The Gotchas Nobody Mentions css-tricks.com
Что важно #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
Вычисление и отображение цен со скидкой в CSS Умное использование CSS для расчета и отображения цены продукта со скидкой путем указания базовой цены и суммы скидки, в котором представлены современные возможности CSS, такие как attr(), mod() и round(). Расчет и отображение цен со скидкой в CSS изначально написано и опубликовано с любовью на CSS-Tricks. Вам также следует подписаться на рассылку новостей. Computing and Displaying Discounted Prices in CSS css-tricks.com
rotateX() Функция rotateX() поворачивает элемент вокруг оси X в трехмерном пространстве. rotateX() изначально написана от руки и опубликована с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. rotateX() css-tricks.com
`rotateY()` Функция rotateY() вращает элемент вокруг его вертикальной оси y. rotateY() изначально написана от руки и опубликована с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку. rotateY() css-tricks.com
`rotateZ()` Функция rotateZ() вращает элемент вокруг его оси z, то есть по часовой стрелке или против часовой стрелки. rotateZ() изначально написана от руки и опубликована с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку. rotateZ() css-tricks.com
rotate() Функция rotate() вращает элемент по часовой стрелке или против часовой стрелки в 2D-плоскости. rotate() изначально написана от руки и опубликована с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку. rotate() css-tricks.com
Скоро мы наконец сможем изгнать JavaScript в Тень Предлагаемый API ShadowRealm представляет новый вид области, разработанный специально для изоляции, и только для этого. Скоро мы наконец сможем изгнать JavaScript в ShadowRealm, изначально написанный и опубликованный с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. Soon We Can Finally Banish JavaScript to the ShadowRealm css-tricks.com
Почему пользователи клавиатуры не могут прокручивать контейнеры переполнения Когда пользователь клавиатуры переходит к таблице с помощью клавиши Tab, фокус попадает на ячейку. Затем они нажимают клавиши со стрелками, чтобы прочитать строку, но ничего не происходит. Ваши пользователи экранных читателей этого не заметили, потому что они ориентируются в дереве доступности, а не в контейнере прокрутки. Почему пользователи клавиатуры не могут прокручивать ваши контейнеры с переполнением, был написан и опубликован с любовью на CSS-Tricks. Вам действительно следует подписаться на рассылку новостей. Why Keyboard Users Can’t Scroll Your Overflow Containers css-tricks.com
Использование CSS для формы углов "сложенные уголки" Я наткнулся на технику складывания углов от Kitty Giraudel. В последнее время я увлекся формами углов, поэтому решил, что эту форму угла можно использовать для создания складываемых углов. Использование CSS corner-shape для создания складываемых углов изначально написано и опубликовано с любовью на CSS-Tricks. Вам также следует подписаться на новостную рассылку. Using CSS corner-shape For Folded Corners css-tricks.com
Подарок в стиле скроллинг-истории для мамы в День матери 2026 Я объясню, как моя мама вдохновила этот эксперимент по скроллинг-истории на День матери 2026 года — но также, как она вдохновила мой подход к разработке и жизни. Подарок скроллинг-истории для мамы на День матери 2026 года, изначально написанный и опубликованный с любовью на CSS-Tricks. Вам также следует подписаться на новостную рассылку. A Scrollytelling Gift for Mum on Mother’s Day 2026 css-tricks.com
API подсказок Google Мэт Маркис о том, как Google делает что-то подобное маркетингу альбома U2, но в области веб-стандартов: Как пользователь Chrome, вы, скорее всего, получили Gemini Nano в виде 4ГБ передачи недавно; без запроса разрешения или необходимости в нем. Если вы удалите его, Оригинальный Prompt API от Google был написан и опубликован с любовью на CSS-Tricks. Вам также следует подписаться на новостную рассылку. Google’s Prompt API css-tricks.com
Создание зигзагообразных макетов CSS с помощью сетки и трюка с трансформацией Большинство сеточных макетов расположены в аккуратных рядах, идеально выровнены, как солдаты в строю. Но иногда вы хотите что-то с большим ритмом, например, зигзагообразный узор. Вот как это сделать с помощью CSS Grid. Создание зигзагообразных макетов CSS с помощью сетки и трюка с трансформацией изначально написано и опубликовано с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку новостей. Making Zigzag CSS Layouts With a Grid + Transform Trick css-tricks.com
Карты фиксированного роста: более хрупкие, чем кажутся Выровнять несколько колонок карточек по одной линии — это головная боль, с которой мы все сталкивались, и это становится еще сложнее при работе с фиксированной высотой. Карточки с фиксированной высотой: более хрупкие, чем кажутся, изначально написаны от руки и с любовью опубликованы на CSS-Tricks. Вам также стоит подписаться на рассылку. Fixed-Height Cards: More Fragile Than They Look css-tricks.com
Что важно #10: HTML в Canvas, шестиугольные карты, оптимизация для электронной бумаги и многое другое Разработчики экспериментировали с HTML-in-Canvas, функцией аналитики карты мира в виде шестиугольников, веб-операционной системой для устройств с электронными чернилами, заменой источников изображений с помощью свойства контента и многим другим. Это Что важно #10. Что важно #10: HTML-in-Canvas, шестиугольные карты, оптимизация для электронных чернил и многое другое изначально написано и опубликовано с любовью на CSS-Tricks. Вам также следует подписаться на рассылку новостей. What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More css-tricks.com
Важность родного случайности в CSS Мы получаем новые функции для генерации случайных чисел в CSS! Но путь к этому был долгим и извилистым. Важность нативной случайности в CSS, изначально написанная от руки и опубликованная с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку. The Importance of Native Randomness in CSS css-tricks.com
contrast() Функция фильтра contrast() увеличивает или уменьшает контрастность элемента. contrast() изначально была написана вручную и опубликована с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку. contrast() css-tricks.com
контрастный цвет() Функция contrast-color() принимает значение и возвращает либо черный, либо белый цвет, в зависимости от того, какой из них является наиболее контрастным для этого значения. Функция contrast-color() изначально была написана вручную и с любовью опубликована на CSS-Tricks. Вам действительно стоит подписаться на рассылку. contrast-color() css-tricks.com
Теперь используем несуществующий ::n-буквенный селектор Мой обходной путь может дать властям еще одну причину заявить, что нативная поддержка не нужна, или если мой хак с :nth-letter будет широко использоваться, боги браузеров могут признать необходимость его реальной реализации. Давайте использовать несуществующий псевдоселектор ::nth-letter прямо сейчас, изначально написанный от руки и с любовью опубликованный на CSS-Tricks. Вам также стоит подписаться на рассылку. Let’s Use the Nonexistent ::nth-letter Selector Now css-tricks.com
Воссоздание анимации Vision Pro от Apple в CSS Проверка новых возможностей CSS для анимации прокрутки, чтобы воссоздать сложную анимацию гарнитуры Apple Vision Pro с веб-сайта Apple. Воссоздание анимации Apple Vision Pro в CSS, изначально написанной вручную и опубликованной с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. Recreating Apple’s Vision Pro Animation in CSS css-tricks.com
Улучшение Astro с помощью компонента Markdown Я использую компонент Markdown по двум основным причинам: (1) он уменьшает объем разметки, которую мне нужно писать, и (2) он преобразует типографские символы. Вот как это работает. Улучшение Astro с помощью компонента Markdown, изначально написанное от руки и опубликованное с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. Enhancing Astro With a Markdown Component css-tricks.com
Markdown + Astro = ❤️ Хотя Astro имеет встроенную поддержку Markdown через файлы .md, я бы утверждал, что ваш опыт работы с Markdown можно улучшить с помощью MDX. Markdown + Astro = ❤️ изначально написано и опубликовано с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. Markdown + Astro = ❤️ css-tricks.com
Что нового в !important #9: клип-пути-пазлы, набор инструментов View Transitions, контейнеры только с именами и многое другое В этом выпуске What’s !important: пазлы clip-path, набор инструментов для переходов между представлениями, контейнеры только с именами, обычный обзор новых, примечательных функций веб-платформы и многое другое. What’s !important #9: пазлы clip-path, набор инструментов для переходов между представлениями, контейнеры только с именами и многое другое, изначально написано от руки и опубликовано с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку. What’s !important #9: clip-path Jigsaws, View Transitions Toolkit, Name-only Containers, and More css-tricks.com
Хорошо спроектированная система модулей JavaScript - ваше первое архитектурное решение За каждой технологией должно быть руководство по её использованию. Хотя модули JavaScript упрощают написание «больших» программ, если нет принципов или систем для их использования, поддерживать код может быть сложно. Хорошо спроектированная система модулей JavaScript — ваше первое архитектурное решение, изначально написанное и опубликованное с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. A Well-Designed JavaScript Module System is Your First Architecture Decision css-tricks.com
Радиоавтомат Один из самых известных примеров управления состоянием CSS — это хак с флажком. Что, если мы хотим, чтобы компонент находился в одном из трех, четырех или семи режимов? Вот тут и приходит на помощь Radio State Machine. Radio State Machine изначально была написана вручную и опубликована с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. The Radio State Machine css-tricks.com
7 Просмотр рецептов переходов, которые стоит попробовать Жаждете перехода вида? У Санканми есть множество распространенных переходов, которые вы можете добавить на свой сайт прямо сейчас! 7 рецептов переходов вида, изначально написанных от руки и опубликованных с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. 7 View Transitions Recipes to Try css-tricks.com
Выбор диапазона дат в CSS Хитрый подход для выбора нескольких дат в календаре, где синтаксис ":nth-child()'s “n of selector” делает всю тяжелую работу... даже в JavaScript. Selecting a Date Range in CSS css-tricks.com
Альтернативы ключевому слову !important Каскадные слои, трюки со специфичностью, более умный порядок и даже некоторые хитрые хаки селекторов часто могут заменить `!important` чем-то более чистым, предсказуемым и гораздо менее неловким для объяснения самому себе в будущем. Alternatives to the !important Keyword css-tricks.com
Изучение новых функций многостолбного оформления CSS Chrome 145 представляет свойства column-height и column-wrap, позволяющие переносить дополнительное содержимое в новую строку ниже, создавая вертикальную прокрутку вместо горизонтальной. Looking at New CSS Multi-Column Layout Wrapping Features css-tricks.com
