CSS3 трансформациясы Nice Fade Effects жасайды
Веб-дизайнерлер ұзақ уақыт CSS3 сахнаға шыққанда пайда болған беттерге көбірек бақылауды қалады. CSS3-де енгізілген жаңа стильдер веб-кәсіпқойларға өз беттеріне Photoshop-тектес әсерлерді қосу мүмкіндігін берді. Бұл көлеңкелер мен жарқылдардың , бұрыштардың бұрыштары және т.б. сияқты сипаттарды қамтиды. CSS3-де анимацияларға ұқсас әсерлер енгізілді, олар сайттарда жақсы интерактивтілікті жасау үшін қолданыла алады.
CSS3- ні қолдана отырып, сіздің веб-сайтыңызға элементтерді қосуға болатын керемет көрнекі әсері - оларды ашықтық пен өтпелі қасиеттердің комбинациясын пайдалану арқылы жоғарылату және шығару. Бұл сайттың кірушісі бір нәрсе жасағанда, сол элементтің үстіне айналдыру сияқты назар аударатын әлсіз аймақтарды жасау арқылы беттеріңізді интерактивті етудің қарапайым және жақсы әдісі.
Веб-беттеріңіздегі әртүрлі элементтерге осы өзара әрекеттесетін көрнекі әсерді қосу қаншалықты оңай екенін қарастырайық.
Жылжытудың ашықтығын өзгертуге рұқсат етіңіз
Клиент осы элементтің үстінен жүріп жатқанда кескіннің ашықтығын өзгерту жолын қарастырамыз. Осы мысал үшін (HTML төменде көрсетілген) мен greydout сынып атрибуты бар кескінді пайдаланамын.
Оны жасыл ету үшін CSS стиль кестесіне келесі стиль ережелерін қосамыз:
.greydout {
-желектің жарамсыздығы: 0,25;
-мез-ашықтық: 0,25;
ашықтық: 0,25;
}
Бұл ашықтық параметрлері 25% -ға дейін аударылады. Бұл кескін қалыпты ашықтықтың 1/4 бөлігі ретінде көрсетіледі дегенді білдіреді. Ашықтықпен толығымен мөлдір емес 100%, ал 0% толық мөлдір болады.
Одан кейін, суретті түсіру үшін (немесе дәлірек айтқанда, толығымен мөлдір болмау үшін) тышқан тігілгенде, сіз мыналарды қосасыз: псевдо-классқа апарыңыз:
.greydout: hover {
-құрылыс-ашықтық: 1;
-мез-ашықтық: 1;
мөлдірлігі: 1;
}
Бұл мысалдар үшін, осы браузерлердің ескі нұсқалары үшін кері үйлесімділікті қамтамасыз ету үшін, ереженің префикстік нұсқаларын пайдаланамын. Бұл жақсы тәжірибе болғанымен, шындық - бұл қараңғылық ережесі енді браузерлермен жақсы қамтамасыз етілген және осы сатушының префикстік желілерін тастау өте қауіпсіз. Дегенмен, ескі браузерлердің нұсқаларын қолдауды қаласаңыз, осы префикстерді қосудың қажеті жоқ. Тек декларацияны қалыпты, алдын ала айтылмаған нұсқамен аяқтау туралы жақсы қабылданған ең жақсы тәжірибені ұстаныңыз.
Егер сіз оны сайтқа орналастырған болсаңыз, бұл ашықтықты түзету өте күрделі өзгерістер болғанын көресіз. Алдымен ол сұр болып, содан кейін ол екеуінің арасындағы аралық жағдайларды қоспағанда. Бұл жарық қосқышты қосу немесе өшіру сияқты. Бұл сіз қалаған нәрсе болуы мүмкін, бірақ сіз біртіндеп өзгеретін өзгерістермен тәжірибе алғыңыз келуі мүмкін.
Шынында жақсы әсерді қосу және бұл біртіндеп төмендету үшін, өтпелі сипатты .greydout класына қосқыңыз келеді:
.greydout {
-желектің жарамсыздығы: 0,25;
-мез-ашықтық: 0,25;
ашықтық: 0,25;
-webkit-transition: барлық 3s жеңілдету;
-moz-transition: барлық 3s жеңілдету;
-ms-transition: барлық 3s оңай;
-o-transition: барлық 3s жеңілдік;
өту: барлық 3s жеңілдік;
}
Осы кодпен өзгеріс бірден ауысып өтпестен, бірте-бірте өтпелі еді.
Тағы да біз осы жерде бірнеше префиксі бар провизорларды қолданамыз. Өтпелеу ақшылдыққа қолдау көрсетпейді, сондықтан бұл префикстер мағынасы бар.
Бұл өзара әрекеттерді жоспарлаған кезде есіңізде бір нәрсе сенсорлық экран құрылғыларында «жылжыту» күйі жоқ, сондықтан бұл әсерлер ұялы телефон сияқты сенсорлы экран құрылғысын пайдаланатын адамдарға жиі жоғалады. Өтпелі кезең жиі кездеседі, бірақ ол соншалықты жылдам болады, олар шынымен көрінбейді. Жақсы бонустық әсер ретінде қосып жатсаңыз, бұл жақсы, бірақ мазмұнды түсіну үшін Қажет болған өзгерістерді болдырмаңыз.
Fading Out мүмкін
Түссіз суретпен басталудың қажеті жоқ, толығымен мөлдір емес кескіннен өшіп кету үшін өтулер мен ашықтықты пайдалануға болады. Бірдей кескінді қолдану тек қана төменгі сыныпта қолданылады:
class = «withfadeout»> параметрін таңдаңыз
Бұрынғы сияқты, сіз ашықтықты өзгерте аласыз: hover селекторы:
.withfadeout {
-webkit-transition: барлық 2s жеңілдету;
-moz-transition: барлық 2s жеңілдету;
-ms-transition: барлық 2s жеңілдету;
-o-transition: барлық 2s жеңілдету;
ауысу: барлық 2s жеңілдету;
}
.withfadeout: hover {
-желектің жарамсыздығы: 0,25;
-мез-ашықтық: 0,25;
ашықтық: 0,25;
}
Бұл мысалда кескін толығымен мөлдірден бірнеше мөлдір өтпекші еді - біздің бірінші мысалымыздың кері жағы.
Суреттерден тыс кету
Бұл визуалды өтулерді суреттерге қолдануға болады, бірақ сіз осы CSS әсерлерімен суреттерді пайдалануды ғана шектемесіз. Түймешік пен ұсталғанда, CSS-стиліндегі батырмаларды оңай жасауға болады. Сіз тек белсенді псевдос-класс көмегімен ашықтықты орнатып, түймені анықтайтын сыныпқа өтуді орнатасыз. Не болып жатқанын көру үшін осы түймешікті басып тұрыңыз.
Айналдырған немесе басылған кезде кез-келген визуалды элементтің жоғарылауы мүмкін. Бұл мысалда мен тышқанның ашықтығы мен мәтіннің түсі өзгеріп отырады. Мұнда CSS:
#myDiv {
ені: 280px;
background-color: # 557A47;
Түсі: #dfdfdf;
толтыру: 10px;
-webkit-transition: барлық 4s жеңілдету 0s;
-moz-transition: барлық 4s жеңілдету 0s;
-ms-transition: барлық 4s жеңілдету 0s;
-o-өту: барлық 4s жеңілдету 0s;
ауысу: барлық 4s жеңілдету 0с;
}
#myDiv: hover {
-желектің жарамсыздығы: 0,25;
-мез-ашықтық: 0,25;
ашықтық: 0,25;
түсі: # 000;
}
Навигация мәзірі өң түсінің түстерінен пайда көре алады
Бұл қарапайым навигация мәзірінде мәзір түстерінің үстінен тінтуір ретінде баяу түседі. Мұнда HTML:
- Үй
- CSS3 жаттығулары
- CSS3 сипаттары
Міне CSS:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
көрсету: inline;
float: сол;
толтыру: 5px 15px;
маржа: 0 5px;
-webkit-transition: барлық 2s сызықтық;
-moz-transition: барлық 2s сызықтық;
-ms-transition: барлық 2s сызықтық;
-o-көшу: барлық 2с сызықты;
ауысу: барлық 2s сызықтық;
}
ul # sampleNav li a {мәтінді безендіру: жоқ; }
ul # sampleNav li: hover {
background-color: # DAF197;
}
Браузерлерді қолдау
Бірнеше рет айтқанымдай, бұл стильдер браузерлердің өте жақсы қолдауына ие, сондықтан оларды ешқандай қорқынышсыз пайдалануға болады. Бұған тек Internet Explorer-дің едәуір ескі нұсқалары ғана кіреді, бірақ Майкрософт корпорациясының 11-ден төмен IE-нің барлық нұсқаларына қолдау көрсетуді тоқтату туралы соңғы шешімімен бұл ескі браузерлер мәселенің аз және азайып бара жатқанын білдіреді және ескірген браузер бұл күрделі проблема болмауы керек, бұл өтпелі кезеңді қараңыз. Сізге бұл әсерлерін шектеудің қаншалықты ыңғайлы болғанына қарамастан және олардың функционалдық мүмкіндіктері мен негізгі мазмұнын ашуға сенбейтін болсаңыз, онда әсерлерді қолдамайтын ескі браузерлер әлдеқайда жағымды тәжірибе алады, бірақ бұл браузерлердегі пайдаланушылар тіпті айырмашылықты біліңіз, әсіресе егер олар сайтты қалыпты түрде пайдаланса және қажет болса, ақпарат ала алады.
Қосымша ойын-сауық: екі суретті ауыстырыңыз
Міне, бір суретті екіншісіне қалай батыруға болады. HTML пайдалану:
Ал, біреуі толық мөлдір, ал екіншісі толық емес, содан кейін өтпелі екі ауыстырады:
.swapMe img {-webkit-transition: барлық 1s жеңілдету; -moz-transition: барлық 1s жеңілдету; -ms-transition: барлық 1s жеңілдету; -o-өту: барлық 1s жеңілдету; ауысу: барлық 1s жеңілдету; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -мез-ашықтық: 1; мөлдірлігі: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; ашықтық: 0; }