CSS фильтр, делащий картинку серой(grey_scale) CSS фильтр, делащий картинку серой(grey_scale) - Архив
CSS фильтр, делащий картинку серой(grey_scale)
DownLoad_Free

CSS фильтр, делащий картинку серой(grey_scale) - Архив

Нашли ошибку или
хотите что-то сообщить -
жмите Ctr+Enter Система Orphus



    [Ленточный вид форума] [Поиск] [RSS]



Страница 1 из 11
Архив » История мировых и локальных событий » История развития сайта » CSS фильтр, делащий картинку серой(grey_scale) (Превращение цветной картинки в оттенки серого)
CSS фильтр, делащий картинку серой(grey_scale)
Дата: Понедельник, 18.11.2013, 14:34 | Сообщение # 1
Группа: Администраторы
Сообщений: 1527


1. Надо создать файл grey_filter.svg следующего содержимого
---------------------------------------------------
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>

---------------------------------------------------

2. Поместить его в папку с файлом CSS, который будет на него ссылаться

3. В файле CSS прописать:
---------------------------------------------------
img{
filter: url(grey_filter.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

img:hover {
filter: none;
-webkit-filter: grayscale(0);
position:relative;
z-index:101;
}

---------------------------------------------------

Теперь любое изображение станет серым, а при наведении на него мыши цветным

Источник: http://stackoverflow.com/questio....tml-css
Рабочий пример: http://modernsib.ru/online/
 
Архив » История мировых и локальных событий » История развития сайта » CSS фильтр, делащий картинку серой(grey_scale) (Превращение цветной картинки в оттенки серого)
Страница 1 из 11
Поиск:


Copyright kachay.ucoz.org © 2008-2017Хостинг от uCoz
^ Наверх ^
Пригодилось!