Швейная строчка на CSS3

Швейная строчка на 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

19.03.2012

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

Оставить комментарий: