CSS3 транзиции создаваат убави ефекти за исчезнување
Веб-дизајнерите долго време посакуваа поголема контрола над страниците што ги создадоа кога CSS3 ја погоди сцената. Новите стилови воведени во CSS3 им овозможија на веб-професионалци да додадат ефекти слични на Photoshop на нивните страници. Ова вклучуваше својства како што се капка сенки и сјае , заоблени агли и многу повеќе. CSS3, исто така, воведе анимација-како ефекти кои можат да се користат за создавање на убава интерактивност на сајтови.
Еден многу убав визуелен ефект кој можете да го додадете на елементите на својата веб-страница користејќи ја CSS3 е да ги натерате да се појавуваат во и надвор со помош на комбинација на својства за непроѕирност и транзиција. Ова е лесен и добро поддржан начин за да ги направите вашите страници по-интерактивни со создавање на избледени области кои доаѓаат во фокусот кога некој сајт посетител прави нешто, како лебди над тој елемент.
Ајде да погледнеме колку е лесно да го додадете овој интерактивен визуелен ефект на различни елементи на вашите веб страни.
Дозволете да ја смениме Непроѕирноста на лебди
Ќе започнеме со тоа што гледаме како да ја смениме непроѕирноста на сликата кога клиентот лебди над тој елемент. За овој пример (HTML е прикажан подолу) јас користам слика со атрибутот класа на greydout.
За да го направиме поцрвенето, додаваме следниов стил правила на нашиот стил на CSS:
.greydout {
-webkit-непроѕирност: 0,25;
-моз-проѕирност: 0,25;
непроѕирност: 0,25;
}
Овие параметри на непроѕирност преведуваат на 25%. Ова значи дека сликата ќе биде прикажана како 1/4 од неговата нормална транспарентност. Целосно непроѕирен без транспарентност би бил 100%, додека 0% би било целосно транспарентно.
Следно, за да се направи сликата да стане јасна (или попрецизно, за да стане целосно непроѕирна) кога глушецот се помести над неа, ќе додадете: лебди псевдоклас:
.Грејд: лебдиш {
-webkit-непроѕирност: 1;
-moz-непроѕирност: 1;
непроѕирност: 1;
}
Ќе забележите дека, за овие примери, јас ги користам префиксните верзии на правилото на добавувачот за да осигурам компатибилност за постари верзии на тие прелистувачи. Додека ова е добра практика, реалноста е дека правилото за непроѕирност сега е добро поддржано од прелистувачите и прилично е безбедно да се откажат од претфиксираните линии на продавачот. Сепак, исто така не постои причина да не се вклучат овие префикси, ако сакате да обезбедите поддршка за постари верзии на прелистувачот. Едноставно не заборавајте да ја следите прифатената најдобра практика на завршување на декларацијата со нормална, не-префиксна верзија на стилот.
Ако го распоредите ова на некоја локација, ќе видите дека ова прилагодување на непроѕирноста е многу ненадејна промена. Најпрво е сива, а потоа не е, без привремени држави меѓу овие две. Тоа е како светло за вклучување или исклучување. Ова може да биде она што го сакате, но, исто така, можеби ќе сакате да експериментирате со промена која е постепена.
За да додадете навистина убав ефект и да го направите ова постепено, сакате да го додадете имотот за транзиција во класата .greydout:
.greydout {
-webkit-непроѕирност: 0,25;
-моз-проѕирност: 0,25;
непроѕирност: 0,25;
-webkit-транзиција: сите 3s леснотија;
-моз-транзиција: сите 3s леснотија;
-ms-транзиција: сите 3s леснотија;
-o-транзиција: сите 3s леснотија;
транзиција: сите 3s леснотија;
}
Со овој код, промената ќе премине постепено, наместо само да се префрли нагло.
Уште еднаш, ние користиме повеќе префикси правила на продавач овде. Транзицијата не е толку поддржана како непроѕирност, така што овие префикси имаат смисла.
Една работа што треба да се запамети кога планирате овие интеракции е тоа што уредите со екран на допир немаат состојба на "лебди", така што овие ефекти често се губат за секој кој користи уред за допир на допир како мобилен телефон. Транзицијата често ќе се случи, но тоа се случува толку брзо што навистина не може да се види. Тоа е добро ако го додавате ова како убав бонусен ефект, но избегнувајте какви било промени што треба да се разберат за содржината да се разберат.
Можно е да исчезне надвор
Не мора да почнувате со избледена слика, можете да користите транзиции и непроѕирност за да исчезнат од целосно матна слика. Користење на истата слика, само со класа со снимка со:
class = "withfadeout">
Исто како и порано, ја менувате непроѕирноста користејќи: селектирај го копчето:
.withfadeout {
-webkit-транзиција: сите 2s лесно-во-out;
-моз-транзиција: сите 2s лесно-во-out;
-ms-транзиција: сите 2s леснотија-во-out;
-o-транзиција: сите 2s лесно-во-out;
транзиција: сите 2s леснотија во;
}
.withfadeout: лебдиш {
-webkit-непроѕирност: 0,25;
-моз-проѕирност: 0,25;
непроѕирност: 0,25;
}
Во овој пример, сликата ќе премине од целосно нетранспарентно до нешто транспарентно - обратно на нашиот прв пример.
Одење зад сликите
Одлично е што можете да ги примените овие визуелни транзиции и да згаснете на сликите, но не сте ограничени само на користење слики со овие CSS ефекти. Можете лесно да ги направите копчињата со стил на CSS кои бледнеат кога ќе кликнете и држете. Вие само ќе го поставите непроѕирноста користејќи: активна псевдокласа и ставете ја транзицијата во класата која го дефинира копчето. Кликнете и држете го ова копче за да видите што се случува.
Можно е во суштина да се направи било кој визуелен елемент да исчезне кога ќе лебди или ќе се притисне. Во овој пример ја менувам непроѕирноста на div и бојата на текстот кога глушецот е над него. Тука е CSS:
# myDiv {
ширина: 280px;
позадина-боја: # 557A47;
боја: #dfdfdf;
Соочувајќи се: 10px;
-webkit-транзиција: сите 4s олеснување на 0s;
-моз-транзиција: сите 4s олеснување на 0s;
-ms-транзиција: сите 4s олеснување на 0s;
-o-транзиција: сите 4s олеснување на 0s;
транзиција: сите 4s олеснување на 0s;
}
# myDiv: лебдиш {
-webkit-непроѕирност: 0,25;
-моз-проѕирност: 0,25;
непроѕирност: 0,25;
боја: # 000;
}
Менијата за навигација можат да имаат корист од исчезнување на боите во позадина
Во ова едноставно мени за навигација, бојата на позадината полека излегува и излегува како што сум глушец над ставки од менито. Еве го HTML:
- Дома
- CSS3 туторијали
- CSS3 Properties
И тука е CSS:
ul # sampleNav {листа-стил: нема; }
ul # sampleNav li {
дисплеј: внатрешен;
плови: лево;
Соочувајќи се: 5px 15px;
маргина: 0 5px;
-webkit-транзиција: сите 2s линеарни;
-моз-транзиција: сите 2s линеарни;
-ms-транзиција: сите 2s линеарни;
-o-транзиција: сите 2s линеарни;
транзиција: сите 2s линеарни;
}
ul # sampleNav li {текст-декорација: нема; }
ul # sampleNav li: лебдиш {
боја на позадина: # DAF197;
}
Поддршка на прелистувачот
Како што веќе неколку пати допрев, овие стилови имаат многу добра поддршка за прелистувачот, па затоа треба да се чувствувате слободни да ги користите без никакво вознемирување. Единствен исклучок од ова е многу постарите верзии на Internet Explorer, но со неодамнешната одлука на Мајкрософт да ја прекине поддршката за сите верзии на ИЕ подолу 11, овие постари прелистувачи стануваат се помалку и помалку проблем - и реално, ако постар прелистувач не види ја оваа избледена транзиција, која не треба да биде голем проблем. Додека ограничувате вакви ефекти на пријатни интеракции и не се потпирате на нив за да ја активирате функционалноста или да ја откриете клучната содржина, тогаш постарите прелистувачи кои не ги поддржуваат ефектите ќе добијат помалку пријатно искуство, но корисниците на тие прелистувачи нема да знаат разликата, особено ако тие можат да го користат сајтот како нормални и да добијат информации кои им се потребни.
Екстра забава, размена на две слики
Еве пример за тоа како да исчезнат една слика во друга. Користете HTML:
И CSS што го прави еден целосно транспарентен, додека другиот е целосно матна, а потоа транзицијата ги заменува двете:
.swapMe img {-webkit-transition: сите 1s леснотија во; -моз-транзиција: сите 1s лесно-во-out; -ms-транзиција: сите 1s лесно-во-out; -o-транзиција: сите 1s леснотија-во-out; транзиција: сите 1s леснотија во; }. swap1,. swapMe: лебдирај. swap2 {-webkit-непроѕирност: 1; -moz-непроѕирност: 1; непроѕирност: 1; } .swapMe: лебди. swap1,. swap2 {-webkit-непроѕирност: 0; -moz-непроѕирност: 0; непроѕирност: 0; }