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

Комментарии (22)

Всем привет.
Сегодня мы немного поработаем над дизайнами своих проектов.
При помощи небольшого 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.
В том месте где вы хотите наблюдать данный эффект нужно вставить вот это:

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




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


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


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


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

Тоесть прозрачность при наведении должна быть равна 1, а прозрачность без наведения должна быть равна 0.5.


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


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

Высоцкий


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

Кстати если вдруг, вы в кинотеатре столкнётесь с котом, покупающим билет, то знайте:

Это не я, а вам пора в больничку  :)  .


Желаю всего самого наилучшего вам и вашим проектам.

Искренне ваш Мудрый Кот.




P.S. Как вам статья?

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