Градиент средствами CSS

Tarik · October 30, 2013

Мне нужно сделать градиент на всю таблицу.

Пишу в файле CSS:


.gradient {
    background: #dedede; /* Для старых браузров */
    background: -webkit-linear-gradient( bottom, top, #dedede, #ffffff); 
    background: -moz-linear-gradient( bottom, #dedede,  #ffff); /* для firefox 3.6+ */
    background: -o-linear-gradient( bottom, #dedede,  #ffff); /* для Opera 11.10+ */
    background: -ms-linear-gradient( bottom, #dedede,  #ffff); /* для IE10+ */
}

Далее вставляю в теги <table class="gradient"> или <body class="gradient">

Не работает ни в Хроме, ни в ИЕ.

mrnobody · October 30, 2013

Во первых синтаксис другой (не "bottom", а "to bototm"), а во вторых, при указании белого цвета у вас лишняя буква "f". И где в конце вариант задания градиента W3C?

http://jsfiddle.net/EVExL/

SelenIT · October 30, 2013

В префикснутых вариантах как раз "to" не нужен. Строчка с -ms-префиксом тоже не нужна, IE9 всё равно не поймет, релиз IE10 понимает без префикса с "to" (по стандарту), а бетами IE10 нормальные люди не пользуются. Да и -moz-строчка тоже не сильно нужна сейчас — много ли осталось Фоксов ниже 17-го, когда уже вышел 26-й?

На практике сегодня достаточно двух строчек:


background: -webkit-linear-gradient( bottom, #dedede, #fff); /* Safari 6-, в т.ч. мобильные */
background: linear-gradient( to top, #dedede,  #fff); /* стандарт W3C, все новые браузеры */

mrnobody · October 30, 2013

А я не знал, спасибо.

Tarik · October 30, 2013

Спасибо. Тему можно закрывать.

Sign In

Градиент средствами CSS

Question

Tarik

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

mrnobody

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

mrnobody

Link to comment

Share on other sites

Tarik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information