The нови стилове, въведени в CSS3 даде на уеб професионалистите възможността да добавят ефекти, подобни на Photoshop, към своите страници. Един визуален ефект, който можете да добавите с помощта CSS3 е да се направят уеб страниците интерактивни чрез създаване на избледнели области, които се фокусират, когато посетителят на сайта направи нещо, като задържане на курсора на мишката над този елемент. Този ефект използва комбинация от непрозрачност и преход.
Променете непрозрачността при задържане
Един интерактивен елемент е да се промени непрозрачността на изображението, когато клиентът се задържи над този елемент. За този пример (HTML е показан по-долу) използваме изображение с атрибут class на сиво.
За да го направите сив, добавете следните правила за стил към вашия CSS лист със стилове:
.greydout {
-Webkit-непрозрачност: 0,25;
-moz-непрозрачност: 0,25;
непрозрачност: 0,25;
}
Тези настройки за непрозрачност се превеждат на 25 процента. Това означава, че изображението ще бъде показано като 1/4 от нормалната си прозрачност. Напълно непрозрачен без прозрачност ще бъде 100 процента, докато 0 процента ще бъде напълно прозрачен.
След това, за да направите изображението ясно (или по-точно, за да стане напълно непрозрачно), когато мишката се наведе върху него, ще добавите следното:
.greydout: hover {
-webkit-непрозрачност: 1;
-moz-непрозрачност: 1;
непрозрачност: 1;
}
Повече корекции на непрозрачността
Ще забележите, че за тези примери използваме версиите на правилото с префикс на доставчика, за да осигурим обратна съвместимост за по-старите версии на тези браузъри. Въпреки че това е добра практика, правилото за непрозрачност се поддържа добре от браузъритеи е безопасно да изпуснете тези линии с префикс на доставчика.
Все пак няма причина да не включвате тези префикси, ако искате да осигурите поддръжка за по-стари версии на браузъра. Просто не забравяйте да следвате приетата най-добра практика за приключване на декларацията с нормалната, непрефиксирана версия на стила.
Когато се разполага на сайт, тази корекция на непрозрачността е внезапна промяна. Първо, това е сиво, а след това не, без междинни състояния между тези две. Това е като превключвател на светлината - включен или изключен. Това може да е това, което искате, но може да искате да експериментирате и с по-постепенна промяна.
За да добавите приятен ефект и да направите това постепенно избледняване, добавете преход Имот:
.грейдаут
class: .greydout {
-Webkit-непрозрачност: 0,25;
-moz-непрозрачност: 0,25;
непрозрачност: 0,25;
-webkit-преход: всички 3-та лекота;
-moz-преход: всички 3s лекота;
-ms-преход: всички 3s лекота;
-o-преход: всички 3-та лекота;
преход: всички 3s лекота;
}