Прелазак ЦСС3 креира Нице Фаде ефекте
Веб дизајнери су дуго желели више контроле над страницама које су креирали када је ЦСС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с лакоће;
}
Са овим кодом, промјена би се постепено прелазила, а не само нагло прелазак.
Још једном, овде користимо одређени број предефикованих правила произвођача. Транзиција није толико подржана као непрозирност, тако да ови префикси имају смисла.
Једна ствар коју треба запамтити када планирате ове интеракције је да уређаји са додирним екраном немају стање "ховер", па се ови ефекти често губи код било кога који користи уређај са додирним екраном као што је мобилни телефон. Често се дешава транзиција, али се то дешава тако брзо да их стварно не може видети. То је добро ако додате ово као добар бонус ефекат, али избегавајте све промене које НЕ треба да буду видљиве за садржај.
Фадинг Оут је могуће превише
Не морате да започнете са избледном имиџом, можете користити транзиције и прозирност да бисте избледели из потпуно непрозирне слике. Користећи исту слику, само са класи са фадеоут-ом:
цласс = "витхфадеоут">
Као и прије, промените непрозирност користећи: селектор ховерења:
.витхфадеоут {
-вебкит-транзиција: све 2с једноставно-ин-оут;
-моз-транзиција: све 2с једноставно-ин-оут;
-мс-транзиција: све 2с једноставно-ин-оут;
-о-транзиција: све 2с једноставно-ин-оут;
транзиција: све 2с једноставно-у-излаз;
}
.витхфадеоут: ховер {
-вебкит-опацити: 0,25;
-моз-опацити: 0,25;
опацити: 0.25;
}
У овом примјеру, слика би се прешла са потпуно непрозирног до донекле провидног - на супротан нацин нашег првог примера.
Гоинг Беионд Имагес
Одлично је што можете да примените ове визуелне транзиције и збледе на слике, али нисте ограничени само на коришћење слика са овим ЦСС ефектима. Можете једноставно да направите дугмад са ЦСС стиловима који избледе када се кликне и држе. Ви бисте једноставно поставили опацити помоћу: активне псеудо-класе и ставили транзицију на класу која дефинише тастер. Кликните и задржите ово дугме да бисте видели шта се дешава.
Могуће је у суштини направити било који визуелни елемент који се збледи када се надмаши или кликне. У овом примеру мењам прозирност див и боју текста када је миш преко њега. Ево ЦСС:
#миДив {
ширина: 280пк;
позадина: # 557А47;
боја: #дфдфдф;
паддинг: 10пк;
-вебкит-транзиција: све 4с еасе-оут 0с;
-моз-транзиција: све 4с лакоће 0с;
-мс-транзиција: све 4с еасе-оут 0с;
-о-транзиција: све 4с лакоће 0с;
транзиција: све 4с еасе-оут 0с;
}
#миДив: ховер {
-вебкит-опацити: 0,25;
-моз-опацити: 0,25;
опацити: 0.25;
боја: # 000;
}
Менији за навигацију могу да искористе бледе позадинске боје
У овом једноставном менију за навигацију, боја позадине благо се убрзава и умањује док сам мијењам ставке менија. Овде је ХТМЛ:
- Кућа
- ЦСС3 Туториали
- ЦСС3 својства
А ево ЦСС-а:
ул # самплеНав {лист-стиле: ноне; }
ул # самплеНав ли {
дисплаи: инлине;
флоат: лефт;
паддинг: 5пк;
маргин: 0 5пк;
-вебкит-транзиција: сви 2с линеарни;
-моз-транзиција: сви 2с линеарни;
-мс-транзиција: сви 2с линеарни;
-о-транзиција: сви 2с линеарни;
транзиција: сви 2с линеарни;
}
ул # самплеНав ли {тект-децоратион: ноне; }
ул # самплеНав ли: ховер {
позадина: # ДАФ197;
}
Бровсер Суппорт
Као што сам већ неколико пута дотакао, ови стилови имају веома добру подршку за претраживаче, па би требало да се осетите слободним да их користите без икаквих узнемиравања. Једини изузетак овоме је много старија верзија Интернет Екплорер-а, али са недавном одлуком Мицрософта да оконча подршку за све верзије ИЕ испод 11, ови старији претраживачи постају све мање проблем - и реално, ако старији претраживач не види ову фадну транзицију, која не би требала бити велики проблем. Све док ограничите овакве ефекте на пријатне интеракције и не ослањате се на њих да бисте покренули функционалност или открили кључни садржај, старији претраживачи који не подржавају ефекте ће имати мање пријатан доживљај, али корисници у тим претраживачима неће чак ни знају разлику, поготово ако могу користити локацију као и нормално и добити информације које им требају.
Екстра забава, размена две слике
Ево примера како бацити једну слику у другу. Користите ХТМЛ:
И ЦСС који чини један потпуно транспарентним, док је други потпуно непрозиран, а онда се транзиција замењује две:
.свапМе имг {-вебкит-транситион: све 1с једноставно-у-оут; -моз-транзиција: све 1с једноставно-ин-оут; -мс-транзиција: све 1с једноставно-ин-оут; -о-транзиција: све 1с једноставно-ин-оут; транзиција: све 1с једноставно-у-ван; } .свап1, .свапМе: ховер .свап2 {-вебкит-опацити: 1; -моз-опацити: 1; опацити: 1; } .свапМе: ховер .свап1, .свап2 {-вебкит-опацити: 0; -моз-опацити: 0; опацити: 0; }