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

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

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5,00 out of 5)
Загрузка...

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

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