Как сделать эффект выцветания при помощи CSS3


Было время, когда эффект выцветания или медленного проявления возможно было сделать только при помощи JavaScript/jQuery. Но с приходом CSS3 эффект выцветания стало возможно реализовать совсем прости, добавив всего несколько правил CSS.

Как сделать простой эффект выцветания (fade effect)

1. Эффект выцветания для текста

Для реализации эффекта назначим новый класс для текстового элемента:

<p class="fade">Это текст, который будет исчезать при наведении курсора мыши </p>

Теперь зададим правила CSS3:

.fade {
opacity: 1;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}

.fade:hover {
opacity: 0.5;
}

Смотрим результат:

Это текст, который будет исчезать при наведении курсора мыши

2. Эффект выцветания для изображения

Назначаем тот же класс, который мы определили выше для текста, для тега с изображением:

<img src="photo.jpg" width="578" height="400" class="fade" />

Смотрим работу эффекта в действии:

3. Эффект выцветания для фона

Создадим структуру простого меню:

<ul class="nav-fade">
<li>Гланая</li>
<li>Статьи</li>
<li>Контакты</li>
</ul>

Зададим для нашего меню правила CSS3:

.nav-fade li {
background: #fff;
padding: 3px 8px;
display: inline-block;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}

.nav-fade li:hover {
background: #ddd;
} 

Смотрим на результат:

 

Как видите все предельно просто для создания эффекта выцветания и появления при помощи CSS3. Новые возможности позволяют реализовать многие вещи проще и удобнее. Однако следует помнить, что спецификация CSS3 работает только на последних версиях современных браузеров. Если же вы хотите, чтобы этот эффект работал везде, то у вас пока один путь – использовать JavaScript.

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

Один отзыв

  1. SleepWalker22/10/2011

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

десять + одиннадцать =