CSS: Эффект выцветания (fade) картинок, текста или меню с помощью CSS3 опубликовал Радик Алиев категория  
просмотры 14 942

CSS: Эффект выцветания (fade) картинок, текста или меню с помощью CSS3

Было время, когда единственным способом заставить элемент или изображение выцвести ( fade) было использование только JavaScript/jQuery. Времена меняются и обновляются технологии, сейчас многие сайты бурно используют CSS3. С CCS3 вы легко сможете создать эффект выцветания ( fade), не прибегая ни к чему, кроме небольшого количества CSS.

Давайте начнём с текстового элемента, на котором будем испытывать эффект:

Теперь настала очередь CSS:

Наведите курсор на тестовый элемент внизу, чтобы увидеть живую демонстрацию:

Пример текста, на котором будем испытывать fade эффект(наведите на меня).

Теперь давайте проделаем то же самое с изображением:

Наведите курсор на изображение, чтобы увидеть эффект в действии:


Мы также можем настроить цвета, которые будет принимать фон, очень удобно если Вы хотите быстро сделать  меню с эффектом. Давайте создадим простое меню с использованием тега списка <ul><li>:

Теперь добавим немного CSS3:

Вот как это работает:

Как видите, в CSS3 довольно много возможностей для создания простого эффекта выцветания. Помните, как обычно, что CSS3 работает только в современных браузерах. Это конечно же относиться к Internet Explorer 6-9, который не является современным браузером, попросту г*вно. Лично я не считаю эти версии браузером и многие не пользуются им, но если клиент использует данные версии IE придется делать эффекты с помощью jQuery, в следующих статьях я напишу как это делать.

Если Вы изучаете вёрстку, смотрите другие полезные материалы:

Теги:

1 комментарий

Оставить комментарий
  1. Анатолий Август 3, 2014 at 7:54 пп #

    Автор спасибо, помогло и очень понравилось.

    Только добавьте в кусок с картинкой

    а то сам не сразу въехал)

    Спасибо еще раз

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

vk_like_site