Поиск 

Кроссбраузерный CSS-градиент

Понедельник, Октябрь 18, 2010 г.

Возможность применения CSS-градиента была реализована Webkit около двух лет назад, но он редко использовалася из-за несовместимости с большинством браузеров. Но теперь с Firefox 3.6+, который поддерживает градиент, мы можем создавать градиент без обязательного использования изображения. В этом посте покажем Вам, как создать CSS-градиент, который будет поддерживаться основными браузерами: IE, Firefox 3.6 +, Safari и Chrome.

Для Webkit-браузеров:

Следующий код предназначен для webkit браузеров, таких как Сафари, Хром, и т.д. Он создаст линейный градиент, от верхней точки (#ccc) к основанию (#000).

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000))

Для Firefox 3.6+:

background: -moz-linear-gradient(top, #ccc, #000);


Для Internet Explorer

Этот фильтр будет работать только в IE:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

Кроссбраузерный CSS-градиент:

Поместите эти три строки  кода вместе, и в результате вы получите CSS-градиента, который будет работать во всех современных браузерах. Заметьте: я добавил в начале правило для background, в том случае если пользователь использует браузер, который не поддерживает эти правила.


background: #999; /* for non-css3 browsers */

filter: progid
:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background
: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background
: -moz-linear-gradient(top#ccc#000); /* for firefox 3.6+ */
CSS-градиент для выпадающего меню:
Ниже представлено, как пример, выпадающее меню, которое использует только CSS3:  CSS-градиент, text-shadow, radius-border и box-shadow (никакого Javascript или изображений).
Ограничения Internet Explorer:

Фильтр градиента для Internet Explorer не поддерживает сolor-stop, gradient angle и radial gradient. Это означает, что Вы можете только определить горизонтальный или вертикальный линейный градиент с 2 цветами: StartColorStr и EndColorStr.
Заключение.

Пожалуйста отметьте, что не все браузеры поддерживают CSS-градиент. Чтобы не возникло проблем, Вы не должны целиком полагаться на CSS-градиент, верстая шаблон.
Автор не известтен.
Источник:webmasters.by
Теги: CSS Автор: Testok | Просмотров: 4358 | Нет комментариев | print |

Похожие статьи

все похожие статьи 
Категории
ТОП 10 - Авторы
  1     Луна   1964     2.93   
  2     pobeda   487     2.96   
  3     Tais   444     3.11   
  4     Foma   139     2.92   
  5     Lubov   52     2.91   
  6     Angel   45     2.93   
  7     Dolores   45     2.78   
  8     Paradiz   31     2.83   
  9     Xenta   29     2.85   
  10     Pryanik   26     2.79   
все авторы 
Последние статьи

Торт Пьяная вишня

Понедельник, Апрель 01, 2019 г.
|
Луна | 1650 |

Вода

Среда, Январь 24, 2018 г.
|
Луна | 1053 |

Фруктовые соки

Среда, Январь 24, 2018 г.
|
Луна | 936 |

Вода и жизнь

Среда, Январь 24, 2018 г.
|
Луна | 1493 |

Голубцы с грибами

Среда, Январь 24, 2018 г.
|
Луна | 1511 |
Популярные статьи

Поэзия Заболоцкого

Вторник, Январь 25, 2011 г.
|
Луна | 3844 |
|
pobeda | 70293 |

Материки

Вторник, Май 11, 2010 г.
|
Tais | 327716 |

Айшвария Рай - биография

Вторник, Ноябрь 02, 2010 г.
|
pobeda | 39177 |

Гарем - жизнь в золотой клетке?

Воскресенье, Май 15, 2011 г.
|
pobeda | 4602 |

Облако тегов