- Информация о материале
- Категория: Подсказки
- Просмотров: 2017
Чтобы обесцветить картинки и изображения на сайте используя CSS - достаточно прописать следующие свойства для класса картинок, в данном случае для класса IMG:
.img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
}
- Информация о материале
- Категория: Подсказки
- Просмотров: 2172
Подсветка изображений при наведении мыши - это очень красивый эффект, который можно очень легко реализовать с помощью CSS.
Да, можно найти плагин joomla, но не проще ли дописать пару строчек в CSS-код и обойтись без плагина?
Здесь все зависит от ваших целей и задач. Вот у меня была задача логотип этого сайта "подсветить" при наведении, все что я сделал это добавил этот код в CSS и задал соответствующий стиль для изображения логотипа. Всё.
Вот CSS код для эффекта подсветки изображения:
.podsvetka {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border:1px solid #555;
border-radius:5px;
}
.podsvetka:hover {
box-shadow: 0 0 15px #00aaff;
border: 1px solid #00aaff;
}
Добавляйте этот когда в ваш CSS-файл шаблона и затем добавляйте class="podsvetka" к изображению и оно будет подсвечиваться. Пример работы можно посмотреть в шапке сайта - на логотип мышку наведите.