Простой Fade с помощью CSS3

Fade CSS3

Fade CSS3

Подсмотрел простой способ затемнения картинок и текста, решил записать для себя на память. Может кому-то еще пригодится. Принцип работы достаточно прост, спасибо css3 который позволяет не загружать дополнительные библиотеки для использования простых эффектов. Удобно таким способом затенять какие-то объекты дизайна, которые либо добавлены после верстки макета и не планировались в этом месте, либо используются в тексте и чтобы не отвлекать от текста так же притеняются. В прочем, это только то, что я мог придумать, вполне возможно Вам будет необходимо использовать этот код в других целях, напишите об этом в комментариях.   [mantra-pullquote align="left|center|right" textalign="left|center|right" width="95%"] Данный код при наведении курсора на картинку затемняет изображение. Вставляем в файл стиля (style.css) страницы этот код: .fade { opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } .fade:hover { opacity: 0.5; } Либо вставляем его непосредственно перед блоком использования, это конечно некорректный способ, но тем не менее иногда пригождается. Вставляем код картинки: Fade Аналогично вставляем код текста:

This is my text element that will fade when you hover over it.

[/mantra-pullquote] Если в CSS коде изменить данные, то можно наоборот при наведении текст/картинку делать яркой. Для этого нужно изменить opacity: 1; в блоке Hover и в блоке Fade сделать opacity: 0.5.

Полезная информация:

Прощание с Joomla
Полезные плагины WordPress
Форма контактов для WordPress
Убрать category из ссылки WP (продолжение)
Добавить html в категорию и страницу
Полная русификация Woocommerce
Joomla/Mambo To WordPress Migrator Fatal error (решение)
Joomla/Mambo To WordPress Migrator (5 советов)
Jazzy Forms плагин, который радует!
Красивые письма с WP Better Emails
При обновлении произошла ошибка: Не удалось определить директорию содержимого
Cherry FrameWork logo + description
Удаляем строки Saphali Lite, Woocommerce, All in one seo pack
Обновление url и адрес картинок после изменения адреса блога
Woocommerce WaitingList
Простой плагин email рассылки (Newsletter) для WordPress
Как встроенное видео с youtube и запустить с нужного времени?
Отображение количества просмотров статьи в подходящем месте
Количество сопутствующих товаров в Woocommerce
Backup сайта в DropBox
Плагин карты сайта XML
Локализация woocommerce Print Invoice & Delivery Note
Как изменить длину анонса (excerpt) плагин
Как удалить ссылки на картинки в новостях WordPress
Управления ссылками WordPress плагин WPNoExternalLinks
MainWP Child не добавляется при успешном подключении [Решено]
Ошибка платежа Яндекс.Касса и Woocommerce
Метки: . Закладка Постоянная ссылка.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *