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

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

Автор TechDude

Категория: Для веб-майстра

Швейна стрічка — елемент що досить часто зустрічається у сучасному дизайні веб-сайтів. Зазвичай її малюють в Photoshop. Але з приходом CSS3 з’явилася можливість виконати таку стрічку за допомогою коду, без використання будь-яких зображень.

Зробити це досить просто. Блоку з текстом спочатку задається пунктирна рамка (border) завтовшки в 2 пікселя. Потім за допомогою нових правил, які входять до складу CSS3, цій рамці задається скруглення радіусом в 3 пікселя. Але так строчка буде лежати на самому краю блоку, що не є гуд. Тому додамо ще одну фішку з арсеналу CSS3box-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);
}

За підтримки:
При поддержке phq24.ru — Музыкальный портал In Music.

8 Август 2012

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

rss
Про блог
TechDude.Blog – персональний блог, который не имеет одной конкретной тематики. Тут вы найдете интересные и полезные статьи про: интернет, гаджети, музику, видео, спорт, искусство, web и социальные сервисы.
Надеемся, что Вам понравиться!
Подпишитесь на обновления блога и получайте свежие новости на свой E-mail. Введите свей e-mail тут:


Флаг
Розмовляй українською!
Якщо вважаеш потрібним зберегти українську мову – просто розмовляй українською. УкрЦентр