Вероятно вы встречали дизайн, который похоже на швейную строчку, что довольно часто можно встретить этот оригинальный элемент. Так как его променяют в основном в блоках, просто прошивают внутри блока, отступив от сторон по несколько пикселей, что смотрится оригинально и запоминающий. Но главное, что этот блок полностью рабочий, так как в нем можно разместить разную информацию.
Но, а ним только стоит создать его под нее, а как сделать, то ниже вам представлено 2 варианта, которые по своей структуре схожи, но вот визуально они разнятся. Где есть возможность выбрать тот который больше подходит вашему дизайну, и где-то его доработать по усмотрению.
Первый вариант:
HTML
Код
<div class="effekt-shveynoy0strochki">Красивый эффект швейной строчки при помощи CSS3</div>
CSS
Код
.effekt-shveynoy0strochki {
padding: 7px 15px;
margin: 8px;
background: #f9f8f8;
color: #4a4343;
font-size: 23px;
font-weight: bold;
line-height: 1.3em;
border: 2px dashed #ccc3c3;
border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
-moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 4px #e40c34, 2px 1px 4px 4px rgba(21, 21, 2, 0.5);
box-shadow: 0 0 0 4px #f9f5f5, 2px 1px 6px 4px rgba(23, 23, 1, 0.5);
text-shadow: 1px 1px 2px #dad0d0;
font-weight: normal;
width: 315px;
height: 150px;
}
Демонстрация
Второй вариант:
На этом варианте не задаем высоту, здесь она автоматически зависит от написанных знаков.
HTML
Код
<div class="shveynaya_stroka_dizayna">Ранние обзоры универсально положительны - возможно, даже больше, чем они были для NES Classic.</div>
CSS
Код
.shveynaya_stroka_dizayna {
width: 310px;
padding: 15px;
margin: 15px;
background: #dedbdb;
color: #332f2f;
border: 2px dashed #676161;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-box-shadow: 0 0 0 3px #777, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 3px #b3aaaa, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 3px #ded8d8, 2px 1px 6px 4px rgba(25, 25, 24, 0.5);
}
Демонстрация
Красивая имитация под швейную строку при помощи свойств CSS3, где идет оформление краев блоков с содержанием.
