Firefox

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

background: -moz-linear-gradient(#D0ECF4, #5BC9E1, #D0ECF4);

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

Chrome, Safari

background: -webkit-gradient(linear, 0 0, 0 100%, from(#D0ECF4), to(#D0ECF4), color-stop(0.5, #5BC9E1));

Параметр color-stop указывает точку приложения нового цвета. Значение варьируется от 0 до 1.

Пример 2. Кнопки с улучшенным градиентом

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(#D0ECF4, #5BC9E1, #D0ECF4);

background: -webkit-gradient(linear, 0 0, 0 100%, from(#D0ECF4), to(#D0ECF4), color-stop(0.5, #5BC9E1));

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>

Результат примера показан на рис. 4.

Рис. 4. Градиент, какой надо градиент

Аналогично можно создавать любые другие градиенты на кнопке или другом элементе (рис. 5). Но это уже сделайте самостоятельно, для чего в практикум добавил соответствующую задачу.

Рис. 5. Такие разные кнопки

Подведу итоги. Кнопку с градиентом и скругленными уголками без изображений сделать можно. Однако с браузерами разброд и шатание. Опера вообще не умеет работать с градиентами, в IE 9 наблюдается неприятный баг при сочетании градиента с уголками (рис. 6).

Рис. 6. Наложение фона на уголки в IE 9

Что ж, пока будем делать «красивости» для браузеров Firefox, Safari и Chrome.

<== предыдущая лекция	\|	следующая лекция ==>
Firefox	\|	Development,malntenanceand upd,;tting