design-systems: add 74 brand DESIGN.md files (VoltAgent/awesome-design-md)
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
This commit is contained in:
1 parent
e3738f2b3e
commit
76c4c5b4fe
233 files changed
+54886
-1
No files matched your search
@@ -0,0 +1,51 @@
|
||||
---
|
||||
title: Modern CSS Techniques
|
||||
created: 2026-06-02
|
||||
updated: 2026-06-02
|
||||
type: concept
|
||||
tags: [web-design, modern-css]
|
||||
sources:
|
||||
- raw/articles/web-design-research.md
|
||||
- raw/articles/crawford-new-rules-2026.md
|
||||
confidence: high
|
||||
---
|
||||
|
||||
# Modern CSS Techniques (2025–2026)
|
||||
|
||||
## Ключевые технологии
|
||||
|
||||
### Container Queries
|
||||
- Адаптивность на уровне компонента, не viewport
|
||||
- Компонент подстраивается под свой контейнер, а не под экран
|
||||
- Поддержка: все современные браузеры
|
||||
|
||||
### :has() — родительские селекторы
|
||||
- Революция: родитель может стилизоваться по наличию ребёнка
|
||||
- Пример: `.card:has(img)` → карточка с изображением шире
|
||||
- Chrome 105+, Safari 15.4+
|
||||
|
||||
### Cascade Layers (@layer)
|
||||
- Управление специфичностью, а не борьба с ней
|
||||
- Порядок: reset → base → components → utilities → overrides
|
||||
- Все современные браузеры
|
||||
|
||||
### CSS Nesting
|
||||
- Вложенные селекторы без препроцессоров
|
||||
- Все современные браузеры
|
||||
|
||||
### Scroll-Driven Animations
|
||||
- Параллакс и анимации по скроллу без JS
|
||||
- Chrome 115+
|
||||
|
||||
### Anchor Positioning
|
||||
- Привязка элементов (tooltip, popover) без JS
|
||||
- Chrome 125+
|
||||
|
||||
### Color-mix()
|
||||
- Смешивание цветов в CSS
|
||||
- Полезно для темной темы: `color-mix(in srgb, #fff 10%, #000)`
|
||||
|
||||
## Motion With Intention (Crawford)
|
||||
- Анимация должна направлять, а не впечатлять
|
||||
- Subtle hover, простые fade-in, функциональные transitions
|
||||
- Если пользователь замечает анимацию больше смысла → плохо
|
||||
Reference in new issue
Block a user