Было время, когда единственным способом заставить элемент или изображение выцвести ( fade) было использование только JavaScript/jQuery. Времена меняются и обновляются технологии, сейчас многие сайты бурно используют CSS3. С CCS3 вы легко сможете создать эффект выцветания ( fade), не прибегая ни к чему, кроме небольшого количества CSS.
Давайте начнём с текстового элемента, на котором будем испытывать эффект:
|
1 |
<p class="css-fade">Пример текста, на котором будем испытывать fade эффект</p> |
Теперь настала очередь CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.css-fade { background: orange; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); filter:alpha(opacity=100); transition: opacity .30s ease-in-out; -moz-transition: opacity .30s ease-in-out; -webkit-transition: opacity .30s ease-in-out; } .css-fade:hover { -moz-opacity: 0.45; -khtml-opacity: 0.45; opacity: 0.45; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=45); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=45); filter:alpha(opacity=45); } |
Наведите курсор на тестовый элемент внизу, чтобы увидеть живую демонстрацию:
Пример текста, на котором будем испытывать fade эффект(наведите на меня).
Теперь давайте проделаем то же самое с изображением:
|
1 |
<img class="aligncenter size-full wp-image-4544 <strong>css-fade</strong>" title="Эффект fade при наведение" src="http://wpandyou.ru/wp-content/uploads/2013/01/fade-effects.jpg" alt="" width="400" height="300" /> |
Наведите курсор на изображение, чтобы увидеть эффект в действии:
Мы также можем настроить цвета, которые будет принимать фон, очень удобно если Вы хотите быстро сделать меню с эффектом. Давайте создадим простое меню с использованием тега списка <ul><li>:
|
1 2 3 4 5 |
<ul class="nav-css-fade"> <li>Уроки</li> <li>Шаблоны</li> <li>Плагины</li> </ul> |
Теперь добавим немного CSS3:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.nav-css-fade li { background: orange; padding: 5px 10px; display: inline-block; transition: background .30s ease-in-out; -moz-transition: background .30s ease-in-out; -webkit-transition: background .30s ease-in-out; } .nav-css-fade li:hover { background: #fff; } |
Вот как это работает:
Как видите, в CSS3 довольно много возможностей для создания простого эффекта выцветания. Помните, как обычно, что CSS3 работает только в современных браузерах. Это конечно же относиться к Internet Explorer 6-9, который не является современным браузером, попросту г*вно. Лично я не считаю эти версии браузером и многие не пользуются им, но если клиент использует данные версии IE придется делать эффекты с помощью jQuery, в следующих статьях я напишу как это делать.
Если Вы изучаете вёрстку, смотрите другие полезные материалы:
Автор спасибо, помогло и очень понравилось.
Только добавьте в кусок с картинкой
а то сам не сразу въехал)
Спасибо еще раз