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

Стильная табличка для сообщений - CSS

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

Запрещено читать текст.
Нарушаем.

Итак, для реализации такой таблички вам понадобится css:
@import "bourbon";
@import url(http://fonts.googleapis.com/css?family=Vesper+Libre:500);
.tablefon{
 background: url('/images/tablefon.jpg');
}

.container__main{
 max-width: 600px;
 margin: 0 auto; 
 padding: 2em 1em;
}

.container__centered{
 padding: 1em 3em 1em 5em;
 border: 10px solid #3e4545;
}

.grit {
 -webkit-mask-image: url(/images/a.png);
 -moz-mask-image: url(/images/a.png);
 -o-mask-image: url(/images/a.png);
 mask-image: url(/images/a.png); 
}

p{
 color: #3e4545;
 font-family: 'Vesper Libre', serif;
 font-size: 60px;
 line-height: 120%;
 text-shadow: 2px 2px 4px rgba(225, 225, 225, 0.35);
}
Для стилей надо скачать два файла изображений: текст и снег, а также на страницу следует разместить контейнер с текстом:
< div class="tablefon" style="margin-top:15px;">
< div class="container__main" >
 < div class="container__centered grit">< center >
 < p >Запрещено читать текст. < br />Нарушаем.
<⁄ center>
<⁄ div>
<⁄ div>
<⁄ div>
 Похожие публикации: css

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