вход

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

Как сделать эффект выцветания при помощи 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 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Один комментарий :

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

  1. Интересная новость. Жаль только, что работает только в ff и chrome…
    Но это естественно заметно проще, чем на JS, так как это готовое свойство, которое не нужно специально кодить (в jQuery ж там тоже код, хоть он и спрятан в библиотеке и обычному юзеру не нужно на эту тему заботится…).

Оставить комментарий

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

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.