Создание верстки с тремя колонками, где текст на краях перекрывает центральную колонку, можно осуществить с использованием HTML и CSS. Основная идея заключается в применении отрицательных отступов и абсолютного позиционирования элементов. Вот пример, как это сделать:
### HTML:
```html
<div class="container">
<div class="column left">
<p>Текст слева, который заходит на центральную колонку.</p>
</div>
<div class="column center">
<p>Центральный текст.</p>
</div>
<div class="column right">
<p>Текст справа, который тоже заходит на центральную колонку.</p>
</div>
</div>
```
### CSS:
```css
.container {
display: flex;
justify-content: center;
position: relative;
}
.column {
width: 30%; /* Ширина колонок */
position: relative;
}
.left, .right {
z-index: 1; /* Позволяем тексту левой и правой колонок перекрывать центральную колонку */
}
.center {
z-index: 0;
}
.left p {
margin-right: -50px; /* Отрицательный отступ для перекрытия */
}
.right p {
margin-left: -50px; /* Отрицательный отступ для перекрытия */
}
```
### Примечания:
1. **Размеры колонок**: Убедитесь, что ширина колонок в сумме не превышает 100% (в данном случае 30% * 3 = 90%).
2. **Отрицательные отступы**: Настройте значения отрицательных отступов на основе ваших потребностей для перекрытия.
### Вторая часть: текст за краями изображения
Чтобы текст заходил на края изображения, вы можете использовать аналогичный подход:
### HTML:
```html
<div class="image-container">
<img src="your-image.jpg" alt="Image">
<div class="text-overlay">
<p>Текст, который заходит на края изображения.</p>
</div>
</div>
```
### CSS:
```css
.image-container {
position: relative;
width: 100%; /* Или фиксированная ширина */
}
.image-container img {
width: 100%; /* Заставляем изображение занимать всю ширину контейнера */
}
.text-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Центрируем текст */
z-index: 1;
width: 100%; /* Растягиваем текст на всю ширину */
margin-left: -20px; /* Отрицательный левый отступ для выхода текста за края изображения */
margin-right: -20px; /* Отрицательный правый отступ для выхода текста за края изображения */
text-align: center; /* Выравниваем текст по центру */
}
```
### Примечания:
1. **Позиционирование**: Используйте абсолютное позиционирование для наложения текста на изображение.
2. **Отрицательные отступы**: Подбирайте значения отступов по своему усмотрению.
Эти примеры могут быть адаптированы и модифицированы в зависимости от ваших требований и дизайна.