• Действия за которые начисляется оплата.
  • Подпись на форуме
  • Работа копирайтера хотелось бы узнать...
  • Только фотографии
  • Новости начинающему · Новые сообщения · Участники · Правила форума · Поиск · RSS
    Страница 1 из 11
    Модератор форума: Newly_made10 
    Форум » Людям с гордым именем - WEB мастера. » Скрипты, украшения, все для юзабилити сайта. » Обесцвечивание картинки средствами CSS (Filter Grayscale для обесцвечивания картинки средствами CSS)
    Обесцвечивание картинки средствами CSS
    Newly_made10Дата: Понедельник, 2016-01-25, 5:42 AM | Сообщение # 1
    умный
    Группа: Администраторы
    Сообщений: 422
    Награды: 4
    Репутация: 101
    Статус: Offline
    Filter Grayscale для обесцвечивания картинки средствами CSS (плюс использование jQuery для IE10+ )


    Для того чтобы превратить изображение в черно-белое с помощью CSS нам понадобятся фильтры.
    Наверное, все знают про фильтры, которые поддерживали еще старые версии IE. Несмотря на все свои недостатки “ослики” обеспечивали такие возможности как

    ALPHA – задание прозрачности
    BLUR – размытие объекта
    CHROMA – задание прозрачности определенного цвета изображения
    DROPSHADOW – создание тени объекта
    GRAY – создание черно-белого изображения
    GLOW – создание свечения вокруг объекта
    INVERT – инвертирование цветов объекта
    EMBOSS/ENGRAVE – создание рельефной серой поверхности, гравюры из объекта
    И вот пришел тот светлый день, когда подобного рода фильтры, называемые CSS-фильтры, решили включить в стандарты. Очевидно, чтобы облегчить простейшую обработку графики. Перечислю коротко основные из них, и то, что они умеют делать.

    Filter Grayscale – служит для создания черно-белого изображения, задается в процентах (десятичных дробях).
    Filter Invert – осуществляет инвертирование цветов, также выражается в процентах (десятичных дробях).
    Filter Blur – Создает эффект размытости. Значение задается в пикселях (px).
    Filter Opacity – работает по принципу свойства opacity (определяет прозрачность элемента), но дает большую производительность за счет аппаратного ускорения . Значение указывается в процентах или в десятичных дробях.
    Filter Drop-shadow – служит для создания тени, также как аналогичное свойство box-shadow, но имеющее поддержку аппаратного ускорения. Значения задаются по тому же принципу как в box-shadow.
    Filter Sepia – делает эффект сепии. Значение задается в процентах (десятичных дробях).
    Filter Saturate – управляет насыщенностью цвета. Значение указывается в десятичных дробях или процентах.
    Filter Brightness – служит для изменения яркости изображения, задается в процентах и в десятичных дробях.
    Filter Contrast – позволяет изменить контрастность изображения, указывается в процентах (в десятичных дробях).

    CSS

    Код
    img.grayscale {
    -webkit-filter: grayscale(100 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
    -moz-filter: grayscale(100 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
    filter: grayscale(100 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
    filter: gray;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    cursor: pointer;
    }
    img.grayscale:hover {
    -webkit-filter: grayscale(0 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
    -moz-filter: grayscale(0 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
    filter: grayscale(0 <img src="/.s/sm/1/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ;
    filter:none;
    }
    .grayscale.grayscale-replaced > svg {
    transition: opacity 1s ease;
    opacity: 1;
    }
    .grayscale.grayscale-replaced.grayscale-fade:hover > svg {
    opacity: 0;
    }


    Хватит стоять на месте, надо искать следующие тупики.
    Помощь начинающему
    Форум с оплатой
     
    SALIKДата: Четверг, 2016-04-07, 4:01 PM | Сообщение # 2
    начинающий
    Группа: Пользователи
    Сообщений: 21
    Награды: 1
    Репутация: 3
    Статус: Offline
    О, кстати спасибо, как раз думал как на одном сайте картинки-кнопки оформить, пожалуй Ваш код и возьму, только подпилю, что бы наоборот из цветного в чернобелый переходило smile

    Паранормальные новости
     
    Форум » Людям с гордым именем - WEB мастера. » Скрипты, украшения, все для юзабилити сайта. » Обесцвечивание картинки средствами CSS (Filter Grayscale для обесцвечивания картинки средствами CSS)
    Страница 1 из 11
    Поиск:
    Новый ответ
    Имя:
    Текст сообщения:
    Код безопасности: