Как создать градиент CSS3 в Opera?

Я могу создавать градиенты CSS в IE6/7/8/9/FF3.6+ и Chrome (см. ниже).

Мой вопрос:

Как создать градиент в Opera?

.gradient{
        /*Mozilla Firefox 3.6*/
        background-image: -moz-linear-gradient(top, #dcdcdc, #c6c6c6);

        /*Webkit aka Google Chrome*/
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c6c6c6),color-stop(1, #dcdcdc));

        /*Internet Explorer 6,7 and 8*/
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc', endColorstr='#c6c6c6');

        /*Internet Explorer 8 only*/
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc', endColorstr='#c6c6c6')";

        /* Opera */
        /* ??? */
}

gradient css opera
person etoxin    schedule 03.11.2010    source источник

Ответы (9)


arrow_upward
7
arrow_downward

Используйте этот:

background-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));

person cgvector    schedule 10.04.2012
comment
обратите внимание, что префикс -o- больше не нужен в Opera 12.1 и выше. - person David Storey; 02.05.2013

arrow_upward
13
arrow_downward

Opera 10.x поддерживает SVG в фоновых изображениях, а SVG позволяет создавать градиенты почти так же, как это делают расширения CSS для Firefox и Safari.

Поддержка фона SVG в Opera, кажется, имеет некоторые неприятные ошибки, когда ваш элемент также имеет границы в 10.0 и ниже, но в 10.5 он кажется достаточно надежным (по моему ограниченному опыту).

CSS 
/* Opera */
background-image: url(gradient.svg);
gradient.svg 
<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
    <defs>
        <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
            <stop offset="0%" style="stop-color: #c6c6c6;"/>
            <stop offset="100%" style="stop-color: #dcdcdc;"/>
        </linearGradient>
    </defs>

    <rect x="0" y="0" fill="url(#gradient)" width="100%" height="100%" />
</svg>

Вы также можете включить SVG непосредственно в файл CSS, используя URL-адрес данных, если вы кодируете SVG в URL-адресе. (Например, в Python это можно сделать, удалив символы новой строки и ненужные пробелы, а затем передав содержимое файла в urllib.quote).

Это немного нечитаемо, но сохраняет HTTP-запрос, и если у вас есть более одного градиента SVG, встроенного в ваш файл CSS, вы должны увидеть некоторую экономию пропускной способности по сравнению с отдельными файлами (при условии, что ваш файл CSS заархивирован).

/* Opera */
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.0%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22gradient%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20style%3D%22stop-color%3A%20%23c6c6c6%3B%22/%3E%3Cstop%20offset%3D%22100%25%22%20style%3D%22stop-color%3A%20%23dcdcdc%3B%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20fill%3D%22url%28%23gradient%29%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20/%3E%3C/svg%3E);
person Paul D. Waite    schedule 07.11.2010

arrow_upward
10
arrow_downward

Должно быть таким же, как у Мозиллы, но с идентификатором Opera:

-o-linear-gradient(top, #dcdcdc, #c6c6c6);

Работает в Opera 11.10 и новее.

person John    schedule 17.03.2011

arrow_upward
9
arrow_downward

На Dev.Opera была опубликована статья о том, как использовать линейные градиенты в Opera (11.10+). http://dev.opera.com/articles/view/css3-linear-gradients/

person JercSi    schedule 26.05.2011

arrow_upward
5
arrow_downward

Градиенты CSS3, использующие новейший синтаксис (более близкий, но не совсем такой, как у Firefox, поскольку спецификация эволюционировала), сейчас находятся в разработке в Opera Presto (нашем движке рендеринга). Скорее всего, это не будет сделано для Opera 11, но, вероятно, будет сделано для более поздней версии.

person David Storey    schedule 05.12.2010

arrow_upward
5
arrow_downward

Последние сборки Opera (>=2042) поддерживают линейный градиент CSS3.

person sabiland    schedule 14.03.2011

arrow_upward
4
arrow_downward

Opera не поддерживает градиенты CSS3 ( пока что). Однако вы можете каким-то образом эмулировать их, используя box-shadow. См. http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/.

person Frédéric Hamidi    schedule 03.11.2010
comment
У кого-нибудь есть пример этого? - person etoxin; 04.11.2010
comment
@etoxin: в статье, на которую есть ссылка в ответе, довольно много примеров. - person Paul D. Waite; 07.11.2010

arrow_upward
2
arrow_downward

Для браузера Опера

background-image: -o-linear-gradient(rgb(0,189,0),rgb(0,181,255));
person TAJPOINT    schedule 10.12.2012

arrow_upward
1
arrow_downward

-o-linear-gradient(top, #dcdcdc, #c6c6c6);

Это пока лучший вариант. Я попробовал метод SVG, и он не только ужасно выглядит в коде, но и приводит к исчезновению фона в Firefox.

Спасибо всем за публикацию. Недавно мне пришлось реализовать градиенты и в Opera, и это было больно.

person James    schedule 30.04.2011