Веб-дизайнерам иногда нужно создавать эффект старины. Одним из способов создать этот эффект является использование заплаток в дизайне сайта, раньше это делалось с помощью изображений, а теперь, благодаря CSS3 и изобретательному использованию его свойств, можно создать заплатку, используя только CSS.

Из этого урока Вы узнаете, как с помощью CSS создать кнопки в виде заплаток для сайта.

Посмотрите демонстрацию работы, чтобы увидеть, что мы будем создавать.

Демонстрация работы

Код HTML 

Код HTML в этом случае очень простой, мы будем использовать ссылку:

<a href="#">CSS Stitched Look</a>

Код CSS 

Так как мы используем ссылку в коде HTML, нужно, чтобы всю работу сделал код CSS.

Сначала мы запишем основные свойства кнопки, а придание ей вида заплатки рассмотрим позже, не забудьте скопировать этот код CSS, чтобы начать создавать кнопку:

.stitched {
   padding: 5px 10px;
   margin: 10px;
   background: #ff0030;
   color: #fff;
   font-size: 21px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #ddd;
   border-radius: 3px;
   -moz-border-radius 3px;
   -webkit-border-radius: 3px;
   text-shadow: -1px -1px #aa3030;
   font-weight: normal;
} 

Вы, вероятно, обратили внимание, что значение свойства границы задано как пунктирное, чтобы граница выглядела пришитой, но граница находится за пределами кнопки, а это не тот эффект, которого мы хотим добиться. Так как мы хотим, чтобы стежки находились внутри кнопки, придется использовать интересный прием со свойством тени блока CSS.

Добавьте следующий код классу stitched:

-moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
   -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
   box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5); 

Свойство тени блока позволяет добавить несколько теней элементу, просто отделяя их запятой. Код CSS выше добавит 2 тени кнопке, первые значения свойства тени добавят тень цвета фона кнопки вокруг всей кнопки. Благодаря первым значениям свойства тени у нас будет граница внутри кнопки, что и создает окончательный эффект заплатки. Вторые значения свойства тени создают обычную тень у кнопки.

Это все, что нужно, чтобы создать эффект заплатки с помощью CSS, используя только пунктирное значение свойства границы и интересный прием с тенью блока.

Посмотрите демонстрацию работы, чтобы увидеть, что мы создали.

Демонстрация работы

Автор урока Paul Underwood

Перевод — Дежурка

Смотрите также:

• Создание ярлыков с использованием CSS для добавления пометок содержимому
• Создание кнопок со значками, но без изображений с использованием CSS
• Создание горизонтального меню с использованием только CSS3