33 lines
703 B
Markdown
33 lines
703 B
Markdown
---
|
|
name: layout/full-bleed-content
|
|
title: Full-Bleed Content Sections
|
|
description: Content that breaks container boundaries for visual impact.
|
|
tags: [layout, full-bleed, breaking-boundaries, premium]
|
|
source: stripe.com, apple.com, brad.co, amppz.com
|
|
---
|
|
|
|
# Full-Bleed Content
|
|
|
|
## CSS
|
|
|
|
```css
|
|
.full-bleed-section {
|
|
width: 100vw;
|
|
margin-left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
}
|
|
```
|
|
|
|
## Anti-patterns
|
|
|
|
| ❌ Плохо | ✅ Хорошо |
|
|
|----------|-----------|
|
|
| Без `overflow-x: hidden` на body | Всегда overflow hidden |
|
|
| Без `transform` | `translateX(-50%)` |
|
|
| Без container | `max-width: 1200px` |
|