Веб дизајнери су дуго желели више контроле над страницама које су креирали када је ЦСС3 погодио сцену. Нови стилови који су представљени у ЦСС3 дали су веб професионалцима могућност додавања ефеката попут Пхотосхопа на њихове странице. Ово укључује особине попут сенки и сјаја, заобљени углови и друго. ЦСС3 је такође увео анимације попут ефеката који се могу користити за стварање пријатне интерактивности на сајтовима.
Један врло лијеп визуелни ефекат који можете додати елементима на вашем веб сајту користећи ЦСС3 је да их уједначите и излазе користећи комбинацију особина за прозирност и транзицију. Ово је једноставан и добро подржан начин да странице учините интерактивнијим креирањем избледених подручја које долазе у фокус када посетилац сајта нешто учини, попут лебдећи над тим елементом.
Хајде да погледамо колико је лако додати овај интерактивни визуелни ефекат различитим елементима на вашим веб страницама.
Промените Непацити на Ховер
Почећемо гледајући како промијенити непрозирност слике када клијент лебди над тим елементом. За овај пример (ХТМЛ је приказан испод) користимо слику са атрибутом класе
греидоут.
Да бисмо га сивили, додамо следећа правила стила нашем ЦСС стилесхеету: .греидоут {-вебкит-опацити: 0,25;-моз-опацити: 0,25;опацити: 0.25;}
Ова подешавања непровидности преведу на 25%. То значи да ће слика бити приказана као 1/4 њене нормалне транспарентности. Потпуно непрозирна без транспарентности би била 100% док би 0% било потпуно транспарентно. Затим, како би слика постала јасна (или тачније, постати потпуно непрозирна) када се миш преко ње надмаши, додали бисте :лебдетипсеудо-класа: .греидоут: ховер {-вебкит-опацити: 1;-моз-опацити: 1;опацити: 1;}
Приметићете да за ове примере користимо префиксне верзије правила произвођача како бисмо осигурали компатибилност са старијим верзијама тих претраживача. Иако је ово добра пракса, стварност је да правило непрозирности сада добро подржавају прегледачи и прилично је сигурно да се испразни те линије произвођача. Ипак, такође нема разлога да не укључите ове префиксе ако желите да обезбедите подршку за старије верзије прегледача. Само обавезно пратите прихваћену најбољу праксу за окончање декларације са нормалном, непрефиксном верзијом стила. Ако сте ово распоредили на некој локацији, видећете да је ово прилагођавање нечистоћа веома изненада. Прво, сиво је, а онда није, без икаквих привремених стања између те две. То је као прекидач за светло - укључен или искључен. То може бити оно што желите, али можда и желите да експериментишете са променљивом која је постепена. Да бисте додали стварно леп ефект и учинили да се ово бледе постепено, желите додати прелаз
имање на .греидоуткласа: .греидоут {-вебкит-опацити: 0,25;-моз-опацити: 0,25;опацити: 0.25;-вебкит-транзиција: све 3с лакоће;-моз-транзиција: све 3с лакоће;-мс-транзиција: све 3с лакоће;-о-транзиција: све 3с лакоће;транзиција: све 3с лакоће;}
