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