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