Раздел: HTML & CSS

Эффект почтовой марки

Хочу поведать вам про интересный эффект, открытый мной недавно во время верстки.

«Эффект почтовой марки» — будем называть его так — заключается в «наложении» свойства border-style со значением dashed на свойство box-shadow (CSS3). Суть в том, что если подобрать правильно цвета рамки и тени, то из-за контраста цвета фона блока и цвета рамки создается впечатление, что края блока не ровные, а волнообразные, как у почтовой марки.

Единственный нюанс заключается в подборе цвета. В данном случае цвет рамки #ddd, а цвет тени #aaa. Таким же образом можно подобрать любые однородные цвета и сделать тень от почтовой марки любого цвета.

Код CSS

<mark><style type="text/css"></mark>
<mark style="color:red">#card</mark> <mark>{border:1px dashed #ddd; box-shadow: 0 0 8px #aaa; width:450px;}</mark>
<mark style="color:red">#head_post</mark> <mark>{color:#04285d; font-size:15px}</mark>
<mark style="color:red">#content_post</mark> <mark>{background: url('list.jpg') 245px 5px  no-repeat; height:210px;}</mark>
<mark style="color:red">#author</mark> <mark>{text-align:right;}</mark>
<mark></style></mark>

Код HTML

<mark>
<div id="card">
			<div id="content_post">
			<p id="head_post"></mark>Post card<mark></p>
			<p></mark>
				Все, что сберечь мне удалось,<mark><br></mark>
                Надежды, веры и любви,<mark><br></mark>
                В одну молитву все слилось;<mark><br></mark>
                Переживи, переживи!<mark><br>
			</p>
			<p id="author"></mark>
				Ф.И.Тютчев<mark><br></mark>
				Стихотворения 1824-1873
			<mark></p>
			</div>
		</div></mark>

Плюсы: такое необычное и приятное оформление делается двумя строчками css и не нужно никаких картинок резать, вставлять по частям и писать достаточно громоздкий css

Минусы: очевидно, что воспроизводить эту красоту будут только браузеры поддерживающие CSS3, да и те не без тараканов. Opera, например, рисует штрихи рамки с разной частотой сверху-снизу и слева-справа. Адекватно ведут себя, к сожалению, только FF и Chrome.

Работоспособность: IE9+ FF3,5+ Opera10,5+ Chrome1,0+

Комментировать

Комментарии

три + 12 =