Кодинг
★ Рубрика: Кодинг
★ Тема: CSS

Блок переменного размера с тенью

На этот текст вы обязательно обратите внимание так как он выделяется тенью. Но, главная особенность этого блока текста в том, что размеры блока заранее не известны. Блок адаптируется под текст и под размеры экрана, на котором отображается.

Такой способ подходит не только для отображения текста, но и для создания рамок фотографий. Смотрите пример, как это выглядит с фоткой. Получилось даже лучше чем с текстом.

Фото

Теперь осталось только порадовать вас кодом css-стиля для создания адаптивного эффекта тени:
p {
 margin: 0em 0em 0;
 padding: 1.5em;
 border: 20px solid transparent;
 border-image: url(shadow.png) 8% 7% 13%;
 text-align: justify;
}
Изображение для границы можно скачать здесь: shadow.png.
 Похожие публикации: CSS

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]