CSS3 преходи Създаване на приятни ефекти на избледняване
Уеб дизайнерите отдавна пожелаха повече контрол върху страниците, които създават, когато CSS3 се появи на сцената. Новите стилове, въведени в CSS3, дадоха възможност на уеб специалистите да добавят към своите страници ефекти, подобни на Photoshop. Това включва свойства като сянка на падане и светещи , заоблени ъгли и др. CSS3 също така въведе анимационни ефекти, които могат да бъдат използвани за създаване на добра интерактивност на сайтове.
Един много хубав визуален ефект, който можете да добавите към елементите в уебсайта си, използвайки CSS3, е да ги накарате да избледняват и да излязат с помощта на комбинация от свойства за непрозрачност и преход. Това е лесен и добре поддържан начин да направите страниците си по-интерактивни, като създавате избледнели зони, които се фокусират, когато посетител на сайта направи нещо, например да се движите над този елемент.
Нека да разгледаме колко лесно е да добавите този взаимодействащ визуален ефект към различни елементи на уеб страниците си.
Нека сменим непрозрачността на курсора на мишката
Ще започнем, като разгледаме как да променим непрозрачността на изображението, когато даден клиент надвишава този елемент. За този пример (HTML е показан по-долу) използвам изображение с атрибута class на greydout.
За да станем сиви, добавяме следните стилови правила към стила ни на CSS:
.greydout {
-webkit-opacity: 0.25;
-мочувствителност: 0.25;
непрозрачност: 0.25;
}
Тези настройки за непрозрачност се превръщат до 25%. Това означава, че изображението ще бъде показано като 1/4 от нормалната му прозрачност. Напълно непрозрачен, без прозрачност, ще бъде 100%, а 0% ще бъде напълно прозрачен.
След това, за да направите изображението изяснено (или по-точно, за да стане напълно непрозрачно), когато мишката се движи над него, бихте добавили: псевдокласа на hover:
.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 лекота;
}
С този код промяната щеше да премине постепенно, вместо да се превключва рязко.
Още веднъж използваме тук няколко правила за предварително продавача. Преходът не е толкова добре поддържан като непрозрачността, така че тези префикси имат смисъл.
Едно нещо, което трябва да запомните, когато планирате тези взаимодействия, е, че устройствата с докосване на екрана нямат "състояние", така че тези ефекти често се губят при всеки, който използва устройство със сензорен екран като мобилен телефон. Преходът често ще се случи, но се случва толкова бързо, че наистина не може да се види. Това е добре, ако добавяте това като хубав бонус ефект, но избягвайте всички промени, които НЕ трябва да се видят, за да бъде разбрана съдържанието.
Изчезването е възможно
Не е нужно да започвате с избледнели изображения, можете да използвате преходите и непрозрачността, за да избледнеете от напълно непрозрачно изображение. Използвайки едно и също изображение, само с класа на freefadeout:
клас = "withfadeout">
Точно както преди, променяте непрозрачността, като използвате селектора: hover:
.withfadeout {
-webkit-transition: всичко 2s easy-in-out;
-moz-transition: всичко 2s easy-in-out;
-ms-transition: всичко 2s easy-in-out;
-о-преход: всичко 2s ease-in-out;
преход: всичко 2s easy-in-out;
}
.withfadeout: hover {
-webkit-opacity: 0.25;
-мочувствителност: 0.25;
непрозрачност: 0.25;
}
В този пример изображението ще премине от напълно непрозрачно към малко прозрачно - обратното на нашия първи пример.
Отвъд образите
Изключително е, че можете да прилагате тези визуални преходи и да избледнявате на изображения, но не се ограничавате само до използването на изображения с тези CSS ефекти. Можете лесно да направите CSS-оформени бутони, които избледняват, когато са натиснати и задържани. Бихте задали просто непрозрачността с помощта на: активен псевдоклас и поставете прехода в класа, който дефинира бутона. Кликнете и задръжте този бутон, за да видите какво се случва.
Възможно е по същество всеки визуален елемент да избледнее, когато се преобърне или кликне върху него. В този пример променям непрозрачността на div и цвета на текста, когато мишката е над него. Ето CSS:
#myDiv {
ширина: 280px;
цвят на фона: # 557A47;
цвят: #dfdfdf;
подложка: 10px;
-webkit-transition: всички 4s ease-out 0s;
-moz-transition: всички 4s ease-out 0s;
-ms-transition: всички 4s ease-out 0s;
-о-преход: всички 4s ease-out 0s;
преход: всички 4s ease-out 0s;
}
#myDiv: задържи {
-webkit-opacity: 0.25;
-мочувствителност: 0.25;
непрозрачност: 0.25;
цвят: # 000;
}
Навигационните менюта могат да се възползват от затихването на цветовете на фона
В това просто меню за навигация, цветът на фона намалява бавно и навътре, докато мишката върху елементите на менюто. Ето HTML:
- У дома
- CSS3 уроци
- CSS3 свойства
И тук е CSS:
ul # sampleNav {списък-стил: няма; }
ul # sampleNav li {
дисплей: вграден;
плувка: ляво;
подложка: 5px 15px;
марж: 0 5px;
-webkit-transition: всички 2s линейни;
-moz-transition: всички 2s линейни;
-ms-transition: всички 2s линейни;
-о-преход: всички 2s линейни;
преход: всички 2s линейни;
}
ul # sampleNav li a {текст-украса: няма; }
ul # sampleNav li: hover {
цвят на фона: # DAF197;
}
Поддръжка на браузъра
Както вече съм докоснал няколко пъти, тези стилове имат много добра поддръжка на браузъра, така че трябва да се чувствате свободни да ги използвате без никакви тревоги. Единственото изключение от това са много по-старите версии на Internet Explorer, но с неотдавнашното решение на Microsoft да прекрати поддръжката на всички версии на IE под 11, тези стари браузъри стават все по-малко проблеми - и реалистично, ако по-старият браузър не вижте този преход, който не трябва да бъде основен проблем. Докато ограничавате тези ефекти до приятни взаимодействия и не разчитате на тях да управляват функционалността или да разкриват ключово съдържание, тогава по-старите браузъри, които не поддържат ефектите, ще получат по-малко приятно изживяване, но потребителите в тези браузъри няма да знаете разликата, особено ако те могат да използват сайта като нормално и да получат информацията, от която се нуждаят.
Допълнително забавление; Замяна на две изображения
Ето един пример за това как да избледнеете едно изображение в друго. Използвайте HTML:
И CSS, който прави един напълно прозрачен, докато другият е напълно непрозрачен и тогава преходът заменя двата:
.swapMe img {-webkit-transition: всички 1s easy-in-out; -moz-transition: всички 1s easy-in-out; -ms-transition: всички 1s easy-in-out; -о-преход: всички 1s лекота навътре; преход: всички 1s easy-in-out; } .swap1, .swapMe: задръжте .swap2 {-webkit-opacity: 1; -мочувствителност: 1; непрозрачност: 1; } .swapMe: задръжте .swap1, .swap2 {-webkit-opacity: 0; - мощност -пропускливост: 0; непрозрачност: 0; }