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