Крутые кнопки на 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.
В данном примере градиент сделан с помощью прозрачного PNG. Есть еще некоторые проблемы – например довольно неудачный нижний border да тени смотрятся слишком темными.
Теперь доработаем код с помощью RGBA:
еперь, после добавления прозрачности к теням, тексту и нижнему бордеру, кнопка явно стала выглядеть намного «круче» и плавнее. Эффект от использования RGBA подобен используемым в Фотошопе теням. Дело за малым – подогнать размеры, цвета и прописать динамику:
вот что получаем в итоге
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;
}
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);
… }
…
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;
}
.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;
}
вот что получаем в итоге
0| Всего комментариев: 0 | |
 | Информация: Посетители, находящиеся в группе Гости, не могут оставлять комментарии. |