Веб-дизайнеры давно желали большего контроля над страницами, которые они создавали, когда CSS3 попал на сцену. Новые стили, внедренные в CSS3, предоставили веб-специалистам возможность добавлять Photoshop-подобные эффекты на свои страницы. Это включало в себя такие свойства, как тени теней и свечения, закругленные углы и многое другое. CSS3 также представил анимационные эффекты, которые можно использовать для создания привлекательной интерактивности на сайтах.
Одним очень приятным визуальным эффектом, который вы можете добавить к элементам на вашем веб-сайте с помощью CSS3, является их постепенное уменьшение и использование с использованием комбинации свойств для непрозрачности и перехода. Это простой и хорошо поддерживаемый способ сделать ваши страницы более интерактивными, создав затуманенные области, которые попадают в фокус, когда посетитель сайта что-то делает, например, зависает над этим элементом.
Давайте посмотрим, как легко добавить этот взаимодействующий визуальный эффект к различным элементам ваших веб-страниц.
Изменить непрозрачность при наведении
Мы начнем с рассмотрения того, как изменить непрозрачность изображения, когда клиент зависает над этим элементом. В этом примере (HTML показан ниже) мы используем изображение с атрибутом class
greydout.
Чтобы сделать его серым, добавьте следующие правила стиля в нашу таблицу стилей CSS: .greydout {-webkit-opacity: 0,25;-мозопрозрачность: 0,25;непрозрачность: 0,25;}
Эти настройки непрозрачности переводятся на 25%. Это означает, что изображение будет отображаться как 1/4 его нормальной прозрачности. Полностью непрозрачный без прозрачности будет 100%, а 0% - полностью прозрачным. Затем, чтобы изображение стало прозрачным (точнее, чтобы стать полностью непрозрачным), когда мышка нависла над ним, вы добавили бы : паритьpseudo-class: .greydout: hover {-webkit-opacity: 1;-moz-opacity: 1;непрозрачность: 1;}
Вы заметите, что для этих примеров мы используем префиксные версии правила поставщика, чтобы обеспечить обратную совместимость для более старых версий этих браузеров. Хотя это хорошая практика, реальность заключается в том, что правило непрозрачности теперь хорошо поддерживается браузерами, и довольно безопасно отказаться от этих префиксных линий поставщика. Тем не менее, нет причин не включать эти префиксы, если вы хотите обеспечить поддержку более старых версий браузера. Просто не забудьте следовать принятой наилучшей практике оканчивать объявление обычной, не префиксной версией стиля. Если вы развернете это на сайте, вы увидите, что эта корректировка непрозрачности является очень резким изменением. Во-первых, он серый, а затем нет, без промежуточных состояний между этими двумя. Это похоже на включение или выключение подсветки. Это может быть то, что вы хотите, но вы также можете поэкспериментировать с более постепенным изменением. Чтобы добавить действительно хороший эффект и сделать это постепенным постепенным, вы хотите добавить переход
собственности .greydoutclass: .greydout {-webkit-opacity: 0,25;-мозопрозрачность: 0,25;непрозрачность: 0,25;-webkit-переход: все 3s легкость;-moz-переход: все 3s легкость;-ms-переход: все 3s легкость;-o-переход: все 3s легкость;переход: все 3s легкость;}
