КАРТА САЙТА

HTML

CSS

PHP

ССЫЛКИ

Крутые кнопки на CSS 3


Развитие CSS3, как и HTML5, не стоит на месте. Одним из интересных нововведений является RGBA. Первые три буквы это не безызвестные RGB, а последняя, А, означает альфа-канал и задает прозрачность. Выглядит запись так:

rgba(r, g, b, a);

При этом, значения r , g и b можно посмотреть в любом графическом редакторе, а значение ‘a’ – означает прозрачность и работает также как и opacity. Правда работает пока это далеко не везде, а именно: IE9, Firefox 3+, Opera 10+, Safari 3.2+.

Теперь о кнопках: вот кнопка, построенная на новом CSS3: border-radius, box-shadow и text-shadow.

.awesome{ background: #FF5C00 url(/images/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
border-radius: 5px;
box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
position: relative;
cursor: pointer;
}


Супер Крутая Кнопка »

В данном примере градиент сделан с помощью прозрачного PNG. Есть еще некоторые проблемы – например довольно неудачный нижний border да тени смотрятся слишком темными.
Теперь доработаем код с помощью RGBA:

.awesome{
…
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
… }

Теперь, после добавления прозрачности к теням, тексту и нижнему бордеру, кнопка явно стала выглядеть намного «круче» и плавнее. Эффект от использования RGBA подобен используемым в Фотошопе теням. Дело за малым – подогнать размеры, цвета и прописать динамику:

/* Sizes ———- */
.small.awesome {
font-size: 11px;
}
.medium.awesome {
font-size: 13px;
}
.large.awesome {
font-size: 14px;
padding: 8px 14px 9px;
}
/* Colors ———- */
.blue.awesome {
background-color: #2daebf;
} .blue.awesome:hover {
background-color: #007D9A;
}
.red.awesome {
background-color: #e33100;
}
.red.awesome:hover {
background-color: #872300;
}
.orange.awesome {
background-color: #ff5c00;
}
.orange.awesome:hover {
background-color: #D45500;
}

вот что получаем в итоге

Awesome buttone » Awesome buttone » Awesome buttone »

Awesome buttone » Awesome buttone » Awesome buttone »

Внимание! Примеры, приведенные здесь, не всеми браузерами обрабатываются корректно. Если у вас именно такой браузер – рекомендуем его обновить до последней версии.

Материалы взяты с Zurb.com