Создавайте крутые кнопки, используя CSS3 и RGBa.

Что ж, увидев этот заголовок, мы можем сначала игнорировать браузеры IE.

Я признаю, что у меня склонность к минимализму, и я хочу иметь возможность делать больше с наименьшим количеством кода и изображений.

Хотя CSS3 добавляет лишь несколько новых функций, эти свойства могут делать много полезных вещей и значительно упрощать нашу работу. Кнопки, которые мы сделали сегодня, в полной мере используют закругленные углы, эффекты тени блока и тени текста CSS3, используя при этом цвета RGBa.

Давайте сначала посмотрим на демо-версию:

Мы можем сделать эти красивые кнопки в четыре шага:

1. Базовые настройки кнопок

Сначала нам нужно установить основной стиль кнопки. Здесь мы используем тег a. Конечно, вы также можете использовать теги ввода, теги кнопок и т. д. Здесь используется тег a, потому что только тег a из этих трех тегов поддерживает. :hover псевдокласс.

Спасибо ytzong Children's Shoes за его предложение. Мы изменили блок на display:inline-block, который позволяет сохранять строки кода с плавающей запятой и полями. ——Шэнфэй @ 31.05.2009

2. Полупрозрачное изображение градиента png

Это единственное изображение, которое мы здесь используем. Это прозрачное изображение в формате PNG используется для создания цветовых градиентов. Мы можем назвать это изображение монохромным градиентом прозрачности. В CSS вы можете добиться различных эффектов цветового градиента, используя демонстрационный фон + изображение PNG, подобное этому. Конечно, это не особенность CSS3. За исключением браузеров ниже IE6, этот эффект возможен во всех браузерах. Вы можете нажать здесь, чтобы просмотреть файл PNG.

3. Закругленные углы

Закругленные углы (border-radius) — одна из лучших функций CSS3, поддерживаемых в настоящее время браузерами. Помимо браузеров IE, ее поддерживают все браузеры уровня A. Хотя большинство из них реализовано через приватные атрибуты, по крайней мере, она доступна. .

4.Тени и RGBa

Box-shadow и text-shadow — два новых важных свойства, добавленных в CSS3. Они позволяют легко реализовать тени элементов и текста на уровне блока. Однако не лучше ли было бы, если бы цвет тени был полупрозрачным? Тогда элемент лучше сливался бы с фоном. Стоит отметить, что FF поддерживает атрибут text-shadow только до версии 3.5 (в настоящее время поддерживается Firefox 3.5beta4).

 .btn {
 ...
 фон: #222 URL(sprites.png) повтор-x;
 /**Фоновое изображение**/
 -moz-border-radius: 5 пикселей;
 -webkit-border-radius: 5 пикселей;
 радиус границы: 5 пикселей;
 /**закругленные углы**/
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0,5);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0,5);
 /**Тень кнопки**/
 текстовая тень: 0 -1px 1px rgba(0, 0, 0, 0,25);
 /**тень текста**/
 }

Хорошо, теперь наша кнопка полностью готова. Это достигло нашей цели.

Эта кнопка черная, поэтому кнопки других цветов реализовать проще:

Обратите внимание, что эти стили должны быть размещены после .btn. Таким образом, цвет фона этих зеленых, синих, красных и т. д. кнопок может переопределять цвет фона .btn. а затем использовать

Наконец, давайте пожалеем браузер IE. В браузерах IE7 и IE8 эти кнопки будут отображать прямые углы, градиентные цвета, без теней и прозрачных цветов, но в IE6 они будут отображать светло-голубой фон. Это потому, что IE6. не поддерживает прозрачность PNG. Если вы хотите, чтобы в IE6 это выглядело как кнопка, просто используйте фильтры IE после js.