Firefox

Дата добавления: 2015-07-09; просмотров: 640; Нарушение авторских прав

background: -moz-linear-gradient(#00BBD6, #EBFFFF);

В градиенте указывается исходная точка, угол градиента, начальный и конечный цвет. В нашем случае, когда градиент идет вертикально сверху вниз, достаточно задать только цвета, остальные параметры используются по умолчанию.

Chrome, Safari

background: -webkit-gradient(linear, 0 0, 0 100%, from(#00BBD6), to(#EBFFFF));

Здесь указывается тип градиента (linear), стартовая точка приложения градиента (левый верхний угол), финальная точка (левый нижний угол), а также начальный и конечный цвет.

Internet Explorer

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBD6', endColorstr='#EBFFFF');

Браузер IE идет своим путем и для разных эффектов применяет свойство filter, в том числе и для градиента. Здесь все тривиальнее, пишется только начальный и конечный цвет градиента.

Опера отдыхает, в ней градиенты еще не реализованы.

Собираем воедино все свойства для браузеров, уголков и градиентов (пример 1).

Пример 1. Кнопки с линейным градиентом

HTML 5CSS 2.1CSS 3IE 9CrOpSaFx

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Кнопки</title>

<style type="text/css">

button.new {

background: -moz-linear-gradient(#00BBD6, #EBFFFF);

background: -webkit-gradient(linear, 0 0, 0 100%, from(#00BBD6), to(#EBFFFF));

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBD6', endColorstr='#EBFFFF');

padding: 3px 7px;

color: #333;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

border: 1px solid #666;

}

</style>

</head>

<body>

<form action="">

<p><button>Исходная кнопка</button></p>

<p><button class="new">Новая кнопка</button></p>

</form>

</body>

</html>

Получилось довольно симпатично (рис. 3), но есть и явные отличия от первоначальной кнопки — она выглядит плоской, как доска.

Рис. 3. Вид кнопки с градиентом

Сделать кнопку нужной формы можно опять же градиентом, «играя» цветами. Двумя значениями градиента уже не обойтись, к счастью, Firefox и Safari предлагают решение.

<== предыдущая лекция	\|	следующая лекция ==>
Рамка вокруг полей формы	\|	Firefox