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

Почтовая марка - CSS

В оформлении сайта может понадобиться почтовая марка. Например, при оформлении страницы с почтовым адресом компании. Предлагаем вашему вниманию пример стильной почтовой марки.
Почтовая марка — специальный знак почтовой оплаты, выпускаемый и продаваемый национальными (и иными) почтовыми ведомствами и обладающий определённой номинальной стоимостью (номиналом). Служит для облегчения сборов за пересылку предметов (отправлений), осуществляемых почтой. Франкирование этим знаком, то есть маркирование отправления (наклейка на него марки), свидетельствует о факте оплаты услуг почтового ведомства (прежде всего — пересылки и доставки корреспонденции: писем, открыток и т. п.). Обычно марка представляет собой листок бумаги небольшого размера, преимущественно прямоугольной формы, как правило, с зубцовкой и клеем, нанесённым на оборотную сторону. Помимо номинала, на марках может указываться наименование почтовой администрации, их выпустившей; зачастую на ней изображены различные символы, декоративные элементы и рисунки. А теперь, когда вам известно все про марки, перейдем к стилям:
.stamp {
 width: 280px;
 height: 180px;
 display: inline-block;
 padding: 10px;
 background: white;
 position: relative;
 
 /*The stamp cutout will be created using crisp radial gradients*/
 background: radial-gradient(
 transparent 0px, 
 transparent 4px, 
 white 4px,
 white
 );
 /*reducing the gradient size*/
 background-size: 20px 20px;
 /*Offset to move the holes to the edge*/
 background-position: -10px -10px;
}
.stamp:after {
 content: '';
 position: absolute;
 /*We can shrink the pseudo element here to hide the shadow edges*/
 left: 5px; top: 5px; right: 5px; bottom: 5px;
 /*Shadow - doesn't look good because of the stamp cutout. */
 box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);
 /*pushing it back*/
 z-index: -1;
}
/*Some text*/
.stamp:before {
 content: 'CSS3';
 position: absolute;
 bottom: 0; left: 0;
 font: bold 24px arial;
 color: white;
 opacity: 0.75;
 line-height: 100%;
 padding: 20px;
}
Дальше останется только разместить код на вашу страницу и указать ваше изображение для марки:
 Похожие публикации: CSS

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