Создаем кнопки при помощи CSS3 и RGBA

Обожаю CSS3. Одна из моих любимых функций в CSS3 — добавление RGBA, цветовой режим, который добавляет альфа-смешивания. Убив не мало времени, изучая эти функции css3 и испытывая их на своих проектах, я научился создавать красивые кнопки при помощи css3 и RGBA. Чтобы показать вам возможности css3, я создал для вас пару примеров кнопок в css3.

CSS3 Кнопка

Вот то, что должно у нас получится:

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

Это простая кнопка, созданная при помощи прозрачного PNG фона (для градиента), рамки, радиуса рамки, тени от рамки и тени от текста... все это собрано при помощи css3. А вот и сам код, который вам нужен для создания этой суперской кнопки:

.awesome{
background: #222 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;
— moz-border-radius: 5px;
— webkit-border-radius: 5px;
— moz-box-shadow: 0 1px 3px #999;
— webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
position: relative;
cursor: pointer;
}

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

Масштаб и RGBA

Отлично, мы создали нашу кнопку и выглядит она отлично, но поскольку мы используем «статические» цвета Hex (шестнадцатеричное значение), то наша кнопка будет плохо масштабироваться. Что делать, если нам нужно будет использовать ее на черном и белом фоне? А как насчет других цветов? Вот тут то нам и пригодится RGBA.

Маленькая деталь. Обратите внимание на кнопку с темным фоном. Я исправил тень от кнопки при помощи RGBA цветов.

При помощи RGBA и CSS3, я сейчас создам 5 дополнительных цветов и 2 дополнительных размера, и заставлю ее работать на любом заднем фоне. Смотрите, все что нам нужно, это изменить всего четыре линии CSS кода:

.awesome {
...
— moz-box-shadow: 0 1px 3px rgba (0,0,0,0.5);
— webkit-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);
...
}

Вот, теперь у нас есть супер клевые кнопки с добавленным альфа-смешиванием. Выглядит так же? Это потому, что у нас стоит 25% черная рамка, 50% тень от рамки и 25% тень от текста, вместо привычных нам Hex значений. Это позволит нам увеличить нашу кнопку для разных фонов, цветов и размеров. Со значениями RGBA, мы имеем слои цветов, вместо отдельных цветов, чем то похеже на то, как создаются прозрачные тени в Photoshop.

Добавляем цвета и размеры

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

/* Razmeru ---------- */
.small.awesome {
font-size: 11px;
}

.medium.awesome {
font-size: 13px;
}

.large.awesome {
font-size: 14px;
padding: 8px 14px 9px;
}

/* Cveta ---------- */
.blue.awesome {
background-color: #2daebf;
}

.red.awesome {
background-color: #e33100;
}

.magenta.awesome {
background-color: #a9014b;
}

.orange.awesome {
background-color: #ff5c00;
}

.yellow.awesome {
background-color: #ffb515;
}

Финал

Вот и все. У нас есть 6 кнопок, у каждой 3 варианта размера. Вот скрин с результатом: