1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - коммерческий форумный движок от бывших создателей vBulletin, написанный на PHP.

Цветовая модель RGBA для -webkit-gradient

Тема в разделе "Вопросы по стилям, изменения в CSS и шаблонах", создана пользователем CyberAP, 13.04.2011.

Загрузка
  1. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Собственно, пытаюсь понять, возможно ли вообще её использовать в градиентах на вебките? Все остальные браузеры её поддерживают (ну как все, только Опера и Файрфокс), а вот с вебкитом проблемы. Может быть кто-то знает решение?
     
    CyberAP, 13.04.2011
    #1
  2. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5 746
    Симпатии:
    5 311
    Версия XF:
    1.5.18
    Обязательно RGB? А обычные hex-значения не пойдут?
    Код:
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#000000));
     
    Romchik®, 13.04.2011
    #2
  3. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Не RGB, а RGBA, т.е. с альфа-каналом. RGB webkit хорошо поддерживает, а вот с прозрачностью проблемы.
     
    CyberAP, 13.04.2011
    #3
  4. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Кстати, этот вопрос очень косвенно связан с XenForo, т.к. градиенты там вообще не применяются и никак не обустроены (в отличие от border-radius и box-shadow).
     
    CyberAP, 15.04.2011
    #4
  5. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5 746
    Симпатии:
    5 311
    Версия XF:
    1.5.18
    FireFox:
    Код:
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    Webkit:
    Код:
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
    Opera (начиная с версии 11.10):
    Код:
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* opera */
    Для IE градиент с прозрачностью тоже можно сделать, но там чуть сложней.
     
    Romchik®, 26.04.2011
    #5
    CyberAP нравится это.
  6. Yoskaldyr

    Yoskaldyr Пользователь

    Регистрация:
    27.09.10
    Сообщения:
    1 921
    Симпатии:
    1 163
    Версия XF:
    1.0.4
    есть js который для ie все подобные градиенты и др. html5 фичи делает посредством фильтров DX и др. специфических только для ie фич.
     
    Yoskaldyr, 26.04.2011
    #6
  7. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5 746
    Симпатии:
    5 311
    Версия XF:
    1.5.18
    Просто прописать в CSS для IE:
    Код:
    background: none;
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#00ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#00ffffff);
zoom: 1;
    Не работает, если находится в iframe. Плюс может отключать сглаживание шрифтов.
     
    Romchik®, 26.04.2011
    #7
    Yoskaldyr нравится это.
  8. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Вот при такой структуре градиента rgba работать не будет:
    Код:
    -webkit-gradient(linear, 0 0, 0 100%, from(#a1a1a1), color-stop(0.5, #757575), color-stop(0.5, #595959), to(#707070))
    С колор-стопами сейчас попробую.
    --- добавлено : Apr 27, 2011 1:49 PM ---
    Да, с колор-стопами прокатывает такой вариант.
     
    CyberAP, 27.04.2011
    #8

Поделиться этой страницей