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,35 @@
|
||||
---
|
||||
name: layout/overlapping-layers
|
||||
title: Overlapping Elements
|
||||
description: Elements that overlap to create depth and visual interest.
|
||||
tags: [layout, overlapping, depth, premium]
|
||||
source: amppz.com, brad.co, stripe.com, linear.app
|
||||
---
|
||||
|
||||
# Overlapping Elements
|
||||
|
||||
## CSS
|
||||
|
||||
```css
|
||||
.overlapping-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
}
|
||||
.image-card {
|
||||
grid-column: span 6;
|
||||
z-index: 1;
|
||||
}
|
||||
.text-card {
|
||||
grid-column: 7 / span 6;
|
||||
margin-top: -60px;
|
||||
z-index: 2;
|
||||
}
|
||||
```
|
||||
|
||||
## Anti-patterns
|
||||
|
||||
| ❌ Плохо | ✅ Хорошо |
|
||||
|----------|-----------|
|
||||
| Без `z-index` | `z-index: 1/2` |
|
||||
| `margin-top: -200px` | `margin-top: -30px` |
|
||||
| Без mobile fallback | `@media (max-width: 768px)` |
|
||||
Reference in new issue
Block a user