Блог Мудрого Кота
Советы и уроки для вебмастера, монетизация сайта и немного о SEO
Главная - Дизайн - Эффект прозрачности при наведении на ссылку и наоборот

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

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

Подпишись и получай новые записи первым!

Подписаться вы можете с помощью или , но самый удобный способ это:

Ещё по теме:
Добавляем в WordPress новые варианты Gravatar’ов, а затем выводим их в комментариях
Изменяем цвет выделения текста с помощью небольшого CSS кода
Навигация на блоге, часть вторая – пагинатор
Навигация на блоге, часть первая – список страниц
Как создать фон для своего блога? Не знаешь? Тогда читай!
Информация о статье:
Опубликовано: 1 декабря 2011, в рубрику Дизайн.
Теги: , , .

Поделись статьёй с друзьями:

Оставляя комментарий - вы автоматически принимаете участие в конкурсе комментаторов, и имеете возможность выиграть очень, классные призы!
I место - Сквозняк!
II место - Заметка!
III место - 200 Рублей!
Подробнее о конкурсе тут.

Оставь коммент, не будь бякой!

  • Ночной_Блоггер (Sergio)
    01.12.2011

    Кот, ты молодец! =) Я в этом слаб, там.. всякие коды и т.д., я больше по части Seo, так что твои статьи для меня интересны =) Пойду в твиттер о тебе чирикну =) Опять =)

    [Ответить]

  • Таня
    01.12.2011

    Классная статья! Давно хотела знать как делать такой эффект! Спасибо)))

    [Ответить]

  • 01.12.2011

    Спасибо за комментарии :roll:

    [Ответить]

  • эффект прозрачности в опасносте
    03.12.2011

    А кто будет писать, что 0 соответствует полной прозрачности, а 1 наоборот полной непрозрачности, и что дробные числа устанавливают эффект прозрачности?
    Тоесть — пишетсо раздельно.

    [Ответить]

  • 03.12.2011

    Уладим :arrow:

    [Ответить]

  • Юлия Риа
    08.12.2011

    Знала про такой эффект, вот, скоро понадобиться для одного проекта, спасибо!

    [Ответить]

  • Сергей
    09.12.2011

    от спасибоньки,теперича усе робит нормыльненько :lol: ,с цветами закалебался только,то этот не тот ,то тот не тот,ну вроде нашел по себе и для людей оптимальный вариантос,Всем Удачи! :-x

    [Ответить]

  • 09.12.2011

    и тебе не хворать :arrow:

    [Ответить]

  • ParadoxSax
    21.12.2011

    А то что IE не поддерживает prozrahnost всем наплевать? А люди будут три недели думать что руки не от туда уродились, пока не дойдёт что IE хлам…

    [Ответить]

  • alextm594
    05.01.2012

    Хм, статья полезная, но все-таки хочется примеров. Без примеров никуда. :wink:

    [Ответить]

  • 05.01.2012

    Все примеры в боковой колонке)

    [Ответить]

  • NMitra
    05.01.2012

    Для IE — filter:alpha(opacity=50); opacity:0.50;

    Посмотри ещё функцию RGBA.

    [Ответить]

  • 05.01.2012

    NMitra, спасибо… я как то про Ослика забыл. Надо будет статью подправить в скором времени

    [Ответить]

  • alextm594
    22.01.2012

    Спасибо, помогло!

    [Ответить]



:wink: :twisted: :roll: :oops: :lol: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)

*


Подпишись на обновления блога:

RSS    twitter    e-mail


122 подписчика

99 фолловеров


Подробно:

Как создать сайт с онлайн фильмами
Как создать сайт с онлайн фильмами
Создание

Раскрутка

Монетизация



Как создать шаблон и дизайн для сайта
Как создать шаблон и дизайн для сайта
Макет

Разметка

Вёрстка


  • Лучшее
  • Советую
  • Новое

Я читаю:

Записки ночного блогера
Blogger.omg-linux
telderi.ru, и еще много других