Почтовая марка - 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;
}
Похожие публикации: