| Дата: Понедельник, 18.11.2013, 14:34 | Сообщение # 1 |
Группа: Администраторы
Сообщений: 1530
|
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/
|
|
| |