» » >
Эффект градиента - gradient
19.09.2013, 16:03


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

Поддерживается следующими браузерами:

Mozilla Firefox ( 3.6 и выше )
Google Chrome
Apple Safari ( 4 и выше )
Internet Explorer ( 5.5 и выше через свойство filter )

а вот Opera, не понимает данный синтаксис, что очень удивительно, на фоне Internet Explorer.

HTML-Code

<div class="gradient-1"></div>
CSS-Code


.gradient-1 {
  height: 80px;  
  /* Для Mozilla Firefox */
  background: -moz-linear-gradient(top, #496C8D, #adcdea);  
   
  /* Для Safari, Google Chrome */
  background: -webkit-gradient(linear, left top, left bottom, from(#496C8D), to(#adcdea));  

  /* Для Internet Explorer 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#496C8D, endColorstr=#adcdea);
   
  /* Для Internet Explorer 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#496C8D, endColorstr=#adcdea)";
}

Хочу отметить, что данный вариант градиента, лучше отложить на полочку до лучших времён, так как Internet Explorer поддерживается только благодаря фильтрам, а это не очень хорошо, а Opera не поддерживается вообще, лучше дождаться, когда W3 окончательно выпустит спецификацию CSS3.

Категория: HTML-CSS | Добавил: tashkent97
Просмотров: 720 | Загрузок: 75 | Источник: www.center-dm.ru/ | Рейтинг: 4.0/1
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<