Швейная строчка на CSS3
Швейная строчка — довольно часто встречающийся элемент современного дизайна веб-сайтов. Обычно ее рисуют в Photoshop. Но с приходом CSS3 появилась возможность выполнить такую строчку при помощи кода, без использования каких-либо изображений.
Сделать это весьма просто. Блоку с текстом вначале задается пунктирная рамка (border) толщиной в 2 пикселя.
Затем при помощи новых правил, входящих в состав CSS3, этой рамке задается скругление радиусом в 3 пикселя. Но так строчка будет лежать на самом краю блока, что не есть гуд.
Поэтому добавим еще одну фишку из арсенала CSS3 — box-shadow с тем же фоновым цветом, что и основной блок и толщиной в 3 пикселя. Это как бы нарастит блок во внешнее пространство и создаст симпатичную тень. При этом строчка окажется внутри блока.
Вот полный набор правил CSS:
.stitched {
width: 250px;
padding: 10px;
margin: 10px;
background: #777;
color: #fff;
border: 2px dashed #ddd;
border-radius: 3px;
-moz-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 #777, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 3px #777, 2px 1px 6px 4px rgba(10,10,0,.5);
}
Enjoy!
За наводку спасибо paulund.co.uk
