Эффект “Прошитого” блока на Css

Иногда необходимо сделать блок “прошитый” нитками. Это можно реализовать на css:

.you_class {
padding: 20px;
margin: 10px;
background: #ff0030;
color: #fff;
font-size: 21px;
font-weight: bold;
line-height: 1.3em;
border: 2px dashed #fff;
border-radius: 10px;
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-shadow: -1px -1px #aa3030;
font-weight: normal;
}

Используйте свой class в html:

<div class="you_class">Тут пример текста</div>

Будет выглядеть вот так:

Эффект "Прошитого" блок

Можно посмотреть в действии здесь.

Комментарии закрыты к записи