Поставить штамп на текст - CSS

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

Это текст на котором есть штамп. Есть штамп на этом тексте, если кто не видит его по каким-то причинам. Может браузер у вас старый. Это текст на котором есть штамп. Есть штамп на этом тексте, если кто не видит его по каким-то причинам. Может браузер у вас старый. Это текст на котором есть штамп. Есть штамп на этом тексте, если кто не видит его по каким-то причинам. Может браузер у вас старый. Это текст на котором есть штамп. Есть штамп на этом тексте, если кто не видит его по каким-то причинам. Может браузер у вас старый. Это текст на котором есть штамп. Есть штамп на этом тексте, если кто не видит его по каким-то причинам. Может браузер у вас старый. Это текст на котором есть штамп. Есть штамп на этом тексте, если кто не видит его по каким-то причинам. Может браузер у вас старый.

А теперь перейдем к тому, как штамп поставить на ваш текст. Приведем коды примера. Сразу css-стиль:

div.box
{
 width:100%;
 border:solid 1px #cecece;
 display:inline-block;
 vertical-align:top;
 box-sizing:border-box;
 padding:10px;
 color:#999;
 position:relative;
margin-top:10px;
margin-bottom:10px;
}

div.box.sample:after
{
 content:"ВАЖНО";
 position:absolute;
 top:80px;
 left:100px;
 z-index:1;
 font-family:Arial,sans-serif;
 -webkit-transform: rotate(-45deg); /* Safari */
 -moz-transform: rotate(-45deg); /* Firefox */
 -ms-transform: rotate(-45deg); /* IE */
 -o-transform: rotate(-45deg); /* Opera */
 transform: rotate(-45deg);
 font-size:40px;
 color:#c00;
 background:#fff;
 border:solid 4px #c00;
 padding:5px;
 border-radius:5px;
 zoom:1;
 filter:alpha(opacity=20);
 opacity:0.2;
 -webkit-text-shadow: 0 0 2px #c00;
 text-shadow: 0 0 2px #c00;
 box-shadow: 0 0 2px #c00;
}

И контейнер с текстом:

<div class="box sample">Здесь ваш текст....</div>

Думается, вы догадались что текст надписи легко изменить, исправив вот это на ваше:

 content:"ВАЖНО";

Можно также сделать несколько штампов на один текст, можно менять положение штампа на тексте. Наверное, сами разберетесь.

Похожие публикации: css

Войти и комментировать [ Вход | Регистрация ]