Жизнь это - мгновения, промежутки. Ночь ушла, солнце скоро взойдет. Сделайте эти промежутки настолько прекрасными насколько это возможно - наполненными молчанием, наполненными благодарностью к существованию, которое дало вам шанс, благодарностью по отношению ко всем тем, кто вам помог. И ждите.


3 июня 2011 г.

Создание красивой CSS3 кнопки за считанные минуты

Опубликовано в 08.12.2010, 6:54 пп, от DeniDenx, в рубрику: Дизайн.
Для своих «СДЛ» проектов мы довольно часто хотим красивый дизайн вплоть до мелочей. Обычно мы рисуем все в Photoshop. Но в этом уроке, я сокращу ваше время и покажу как можно за считанные минуты создать красивую web 2.0 кнопку.
Пожалуй начнем. Для начала зададим основу, просто квадратная кнопка. Ниже вы можете наблюдать то как она выглядет.
1
2
3
4
5
6
7
8
9
10
11
12

border: 1px solid #5d9046;
background: #67AA25;
color: #fff;
text-transform: uppercase;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
width: 156px;
font-size: 14px;
font-weight: bold;
padding: 8px 0;
text-align: center;
display: block;



Срезание краев. Сделаем их закругленными. Образец вы можете наблюдать ниже.
1
2
3

border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;




Добавление теней. С помощью следующего кода, мы придадим тень нашей кнопке.
1
2
3
4

text-shadow: 1px 1px 1px #666;
-moz-box-shadow: 0 1px 3px #111;
-webkit-box-shadow: 0 1px 3px #111;
box-shadow: 0 1px 3px #111;




Создание градиентного фона для нашей кнопки . Последний штрих, и красивейшая кнопочка – готова!
1
2
3
4

background: #3F8EB5; /* old browsers */
background: -moz-linear-gradient(top, #3F8EB5 0%, #1D76A0 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3F8EB5), color-stop(100%,#1D76A0)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3F8EB5', endColorstr='#1D76A0',GradientType=0 ); /* ie */





О совместимости, можете не беспокоится. Поддерживается во всех браузерах. Дальше можно поэкспериментировать и попробовать добавить :hover и :active. Желаю удачи! В ваших творениях.
Автор: TomashBraun на 07:08
Ярлыки:

Комментариев нет:

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

Подписаться на: Комментарии к сообщению (Atom)