Эффект прозрачности при наведении на ссылку и наоборот

Всем привет.
Сегодня мы немного поработаем над дизайнами своих проектов.
При помощи небольшого css кода мы будем создавать эффект прозрачности.

Этот эффект можно использовать двумя способами:
- при наведении на ссылку/картинку она становится прозрачной
- ссылка/картинка прозрачная пока на неё не наведён курсор

Давайте-ка рассмотрим каждый способ поподробнее, а заодно поговорим, как и где его лучше использовать.
Кстати: примеры работы данных эффектов можно увидеть на моём блоге в боковой колонке и в подвале.

Ну а теперь продолжаем.
Способ первый «прозрачность при наведении».

Данный способ подойдёт для придания эффекта любым ссылка. Под «любыми» я подразумеваю, то, что ссылка может находиться как в боковой колонке, так и в подвале, в статье, в заголовке и т.д.
Итак, для придания каким-либо ссылкам данного эффекта нужно проделать несколько шагов.
Шаг 1.
В конец CSS файла вашей темы вставьте вот этот код:

.prozrahnost{
}
.prozrahnost a{
opacity: 1;
color: #000000;
text-decoration: none;
}
 
.prozrahnost a:hover{
opacity: 0.5;
color: #000000;
text-decoration: underline;
}

Немного о коде:
.prozrahnost {…} – заводим новый класс;
.prozrahnost a{…} — ссылки без наведения;
.prozrahnost a:hover{…} – ссылки при наведении;

Уделим внимание вот этому:

opacity: 0.5; — чем меньше значение, тем прозрачнее ссылки
color: #000000; — цвет ссылок

Обратите внимание, следующий код необязателен:

text-decoration: underline; — добавляет ссылкам подчёркивание;
text-decoration: none; — убирает подчёркивание у ссылок;

Шаг 2.
В том месте где вы хотите наблюдать данный эффект нужно вставить вот это:

<div class="prozrahnost">

Этим отрезком мы вызываем класс, который только, что создали.
После этой строчки можно писать ссылки, при этом ссылки могут быть не только текстом, но и картинками (ссылки-картинки). Кстати данный эффект изменяет только ссылки, а простой текст не меняется никоим образом.
После того как вы написали всю нужную информацию нам нужно закрыть данный класс при помощи вот этого:

</div>

Ну, вот всё и готово.

Способ второй «прозрачность без наведения».

Данный способ полезен для придания эффекта счётчикам, которые находятся в подвале или в боковой колонке. Использую этот метод, вы можете сделать их менее заметными, и абсолютно не бросающимися в глаза. Ну это я так, для примера вам сказал, можете использовать данный эффект где угодно.

Итак, полная реализация этого метода описана в предыдущем способе, вам нужно изменить только одно – прозрачность.
Тоесть прозрачность при наведении должна быть равна 1, а прозрачность без наведения должна быть равна 0.5.

Ну, вот и всё, с кодами мы на сегодня закончили.

На последок хочу поделиться новостью:

Завтра выходит фильм «Высоцкий. Спасибо, что живой». Я обязательно пойду на этот фильм и настоятельно рекомендую вам — сходить на него.
Кстати если вдруг, вы в кинотеатре столкнётесь с котом, покупающим билет, то знайте:
Это не я, а вам пора в больничку .

Желаю всего самого наилучшего вам и вашим проектам.
Искренне ваш Мудрый Кот.

P.S. Как вам статья?
Рекомендую подписаться на RSS, чтобы ничего не пропустить, для этого вы можете использовать форму ниже: