GPU-ускорение CSS-фильтров в Chromium

    Одно из нововведений в Chromium 19 — CSS-фильтры с аппаратным графическим ускорением. С помощью свойства filter осуществляется попиксельная обработка любого видимого элемента на странице — всего одной строчкой CSS.

    Сочетая в строчке разные параметры, можно придумывать оригинальные эффекты.


    img { -webkit-filter: sepia(100%) contrast(200%) blur(5px) }

    Параметры фильтра: сепия, насыщенность, прозрачность, размытие, яркость, инверсия, контраст, создание тени и другие. Это отличный способ улучшить оформление страницы, а также создавать веб-приложения и игры с новыми возможностями.

    При наличии нормальной GPU-карты эффекты работают совершенно без подтормаживаний и позволяют даже запускать графический редактор в браузере, полностью реализованный на CSS, и даже с применением анимации -webkit-transition.



    Более подробно об использовании CSS-фильтров см. справочник по фильтрам на HTML5Rocks (перевод на рус. яз.).

    Добавим, что в будущем у веб-дизайнеров появится возможность создавать собственные фильтры, чтобы применять их эксклюзивно на своём сайте.

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 20

      0
      А в черновиках W3C есть что-нибудь похожее или это инициатива разработчиков Chromium?
      +5
      Статья о том, что фильтры в Хроме 19 теперь ускоряются при помощи GPU? Круто. А ведь раньше она бы выглядела так:
      Вышел Chrome 19, нововведения:



      — CSS-фильтры теперь ускоряются видеокартой



        –25
        Нахуя писать статью если в конце ставить ссылку на «более подробную статью»?
          +21
          Зачем писать в комментарии мат, если, в данном случае, вполне можно обойтись и без него, особенно.
            –22
            Я же не говорю тебе как писать, хотя мог бы например обратить внимание на твои запятые.
              +1
              Может Вы не в курсе, но на Хабре мат запрещен.
                0
                Каюсь, в посл. момент передумал писать длинно + заменял местами слова, потому остались лишние.
              –2
              Это ализар.
              –1
              Вау. В хроме появились очередные ни с чем не совместимые фильтры. Примерно такие же были уже в IE6, но его же все ругают, так не будем об этом вспоминать
                +8
                фильтры от IE6 не были в черновиках W3C
                0
                А есть ли возможность делать заблуренный фон, чтобы размывалось то что под элементом?
                  0
                  Фильтры применяются к элементам, но не к ихним свойствам. К бэкграунду применить не получится. Можно завернуть два абсолютно спозиционированных элемента в контейнер и наложить один на другой. Тогда можно применить фильтр к нижнему элементу с бэкграундом и все получится.
                    0
                    Возможно ли нарисовать менюшку или полупрозрачное окно, чтобы ровно по его рамке, контент снизу был размыт? Контейнер и абсолютное позиционирование здесь не поможет.
                    +3
                    По ссылке справочник по фильтрам на англ. Я недавно делал перевод этой статьи, здесь.
                      0
                      Вставить в статью ссылку не помешало бы.
                    0
                    +tag iOS 6.0 Safari ;)
                      0
                      Фильтр drop-shadow() работает куда интереснее свойства box-shadow. CSS свойство генерирует тень шейпа (прямоугольник, круг) не учитывая border. А фильтр умеет отбрасывать тень от границ любого стиля.
                        +1
                        А если честно. Зачем это всё? Если оформлять страницу, то уже в определенном заранее стиле. Зачем встраивать фотошоп в браузер?
                          0
                          Мне кажется тут речь не простых веб-страничках, а о веб-приложениях и веб-сервисах.

                        Only users with full accounts can post comments. Log in, please.