Интиқоли CSS3 Таъсири оқилонаи осеби эҷодӣ
Таҳиякунандагони вебсайтҳо дар тӯли он саҳифаҳое, Навъҳои нави дар CSS3 овардашуда ба вебсайтҳо имконият доданд, ки ба саҳифаҳои худ илова кардани Photoshop-и худ. Ин хосиятҳоро ба монанди сояҳои паст ва гиреҳҳо , чуқурҳои гирдашаванда, ва бештар аз он дохил менамуданд . CSS3 ҳамчунин таъсири эффект-оптикиро офарид, ки метавонанд барои таъсиси интерактивӣ дар сайтҳо истифода шаванд.
Яке аз таъсироти хеле зебо, ки шумо метавонед ба унсурҳои вебсайти худ илова кунед, бо CSS3 , онҳоро бо истифода аз якҷояи хусусиятҳо барои решаканкунӣ ва гузариш ба онҳо месупоред . Ин роҳи осон ва боэътимод аст, ки саҳифаҳои худро бештар аз интерактивӣ фароҳам созанд, бо ташкили минтақаҳое, ки ба он вокуниш нишон диҳанд, вақте ки як сайти сайти чизе, ки дар он элементҳо ҷойгир аст, пайдо мешавад.
Биёед дида бароем, ки чӣ қадар осон аст, ки ин муоширати виртуалӣ ба унсурҳои мухталиф дар вебсайтҳои худ илова кунед.
Бигзор & & # 39; s Opacity Change on Hover
Мо ба назар гирифта метавонем, ки чӣ тавр иваз кардани тасвири тасвир, вақте ки фармоиш аз болои ин унсурҳо шубҳа дорад. Барои ин намуна (HTML дар зер нишон дода шудааст) Ман бо тасвири класси grayout истифода мебарам.
Барои он, ки мо гайриоддем, мо ба услуби CSS сабт кардани қоидаҳои зеринро илова мекунем:
.greydout {
-вебкит-фосила: 0.25;
-муайянӣ: 0.25;
Opacity: 0.25;
}}
Ин нуқтаҳои овоздиҳӣ ба 25% тарҷума мекунанд. Ин маънои онро дорад, ки ин тасвир 1/4 шаффофияти оддии худро нишон медиҳад. Фурӯши пурра бо шаффофият 100% ва 0% комилан шаффоф хоҳад буд.
Баъдан, барои тасвир кардани равшан (ё бештари дақиқа, барои пурра ба таври ошкоро шудан), вақте ки муш дар болои он пӯшонида мешавад, шумо бояд илова кунед:
.greydout: hover {
-вебкит-фосила: 1;
-муайяншавӣ: 1;
Opacity: 1;
}}
Шумо инро мефаҳмед, ки барои ин мисолҳо, ман истифодабарандаи вергулҳои пешакии қоидаҳоро истифода мебарам, то ки мутобиқати такрорӣ барои нусхаҳои калони ин браузерҳо таъмин карда шаванд. Дар ҳоле, ки ин таҷрибаи хуб аст, воқеият ин аст, ки қудрати ҳаҷвӣ ҳоло аз тарафи браузерҳо дастгирӣ карда шудааст ва он хеле бехатар аст, ки ба фурӯшандагоне, ки фурӯшандаҳо пешкаш мешаванд, бехатар аст. Бо вуҷуди ин, ҳеҷ як сабабе вуҷуд надорад, ки ин пешгӯиҳоро дохил кунед, агар шумо мехоҳед нусхаҳои браузерҳои калонтарро таъмин кунед. Танҳо боварӣ ҳосил кунед, ки таҷрибаи беҳтарини қабули эъломия бо нусхаи оддии, ношаффофи пешакии сабки.
Агар шумо дар ин сайт ҷойгир шавед, шумо мефаҳмед, ки ин тасмими такрорӣ як тағйироти хеле ногувор аст. Пеш аз он, хокистарӣ ва он гоҳ он нест, ки ягон давлатҳои инқилобӣ байни онҳо нестанд. Ин монандест, ки фишори равшанӣ - даромадан ё истироҳат. Ин мумкин аст, ки шумо мехоҳед, аммо шумо низ метавонед бо тағйирёбии бештаре тадриҷан озмоиш кунед.
Барои илова кардани таъсири воқеан хуб ва ба таври мунтазам заиф гардондани шумо, шумо мехоҳед моликияти гузаришро ба синф .greydout илова кунед:
.greydout {
-вебкит-фосила: 0.25;
-муайянӣ: 0.25;
Opacity: 0.25;
-вебкит-гузариш: ҳамаи 3з осонӣ;
-моз-гузариш: ҳамаи 3з осонӣ;
-мақсадноккунӣ: ҳамаи 3з осонӣ;
-o-гузариш: ҳамаи 3з осонӣ;
гузариш: ҳамаи 3з осонӣ;
}}
Бо ин кодекс, тағироте, ки ба таври фаврӣ тағйир наёбад, тадриҷан мегузарад.
Бори дигар, мо дар ин ҷо қоидаҳои пешакии фурӯшандаҳоро истифода мебарем. Гузариш ба таври ройгон ҳамчун асбобҳо дастгирӣ карда намешавад, бинобар ин ин пешгӯиҳо маъно меандешанд.
Яке аз чизҳое, ки шумо ин амалиётро ба ёд меоред, ин аст, ки дастгоҳҳои экрани сенсорӣ дар ҳолати "оҳиста" набошанд, бинобар ин ин таъсирот ба касе, ки дастгоҳи экрани телефонро ба монанди телефони мобилӣ истифода мебарад, гум карда шудааст. Ин гузариш аксар вақт рӯй хоҳад дод, аммо он хеле зуд ба амал меояд, ки онҳо ҳақиқатан дида намешаванд. Ин хуб аст, агар шумо ин як таъсири бонусаи хубро илова кунед, вале аз ҳар гуна тағйироте, ки барои он бояд фаҳмид, фаҳмид.
Фоҷианӣ хеле душвор аст
Шумо наметавонед бо тасвири заиф оғоз кунед, шумо метавонед гузаришҳо ва фосилаеро, ки аз тасвири комилан намоён истифода баред, истифода баред. Истифодаи ҳамин тасвири, танҳо бо синфҳои боффективи:
class = "withfadeout">
Тавре, ки пеш аз он, шумо решаи худро бо истифода аз интихоб:
.withfadeout {
-вебкит-гузариш: ҳамаи 2с-дар-дари;
-моз-гузариш: ҳамаи 2сҳо дар осонӣ;
-маълумот-гузариш: ҳамаи 2с-дар-берун;
-о-гузариш: ҳамаи 2сҳо-дар-берун;
гузариш: ҳама 2с осони-дар-берун;
}}
.withfadeout: hover {
-вебкит-фосила: 0.25;
-муайянӣ: 0.25;
Opacity: 0.25;
}}
Дар ин намуна, тасвир аз фаъъолият ба каме шаффоф - баръакс намунаи аввалини гузариш хоҳад буд.
Гирифтани тасвирҳо
Ин хуб аст, ки шумо метавонед ин вариантҳои визаро истифода баред ва ба тасвирҳо афтед, аммо шумо танҳо бо истифодаи тасвирҳо бо ин CSS таъсири манфӣ надоред. Шумо метавонед ба осонӣ сабкҳои CSS-сабзавот, ки ҳангоми пахш кардан ва нигоҳ доштан дар вақти дилхоҳ эҷод кунед. Шумо фақат фишорро истифода бурдед: псевдо-функсияи фаъол ва гузариш ба синф, ки тугмаро муайян мекунад. Барои дидани он, ки ин рӯйдодро пахш кунед ва нигоҳ доред.
Ин имконпазир аст, ки ҳама гуна воҳиди визуалӣ ҳангоми пӯшидан ё баргаштан ба сӯхта шавад. Дар ин мисол ман фосилаи div ва ранги матнро, вақте ки муш дар болои он тағйир меёбад, тағйир диҳед. Ин аст CSS:
#myDiv {
width: 280px;
ранги аслии: # 557A47;
ранг: #dfdfdf;
padding: 10px;
-вебкит-гузариш: ҳамаи 4с осони-0s;
-моз-гузариш: ҳама 4с осонӣ-0s;
-мутлон-гузариш: ҳама 4с осони-фароғат 0s;
-o-гузариш: ҳама 4с осонӣ-0s;
гузариш: ҳамаи 4с осони-фароғат 0s;
}}
#myDiv: hover {
-вебкит-фосила: 0.25;
-муайянӣ: 0.25;
Opacity: 0.25;
ранг: # 000;
}}
Менюи Навигатсия метавонад аз рангҳои аслӣ дар ҷои аввал истифода барад
Дар ин менюи соддашудаи содда ранги аслӣ ба таври возеҳ ва дар вақте, ки ман аз болои чизҳои меню истифода мебарам. Дар ин ҷо HTML:
- Home
- CSS3 Tutorials
- CSS3 Хусусиятҳои
Ва ин ҷо CSS ин аст:
ul # sampleNav {тарки сабки: none; }}
ul # sampleNav li {
намоиш: дарли;
float: left;
padding: 5px 15px;
margin: 0 5px;
-вебкит-гузариш: ҳамаи 2-сатр;
-моз-гузариш: ҳамаи 2саққӣ;
фаромӯш накунед: ҳамаи 2 сатр;
-o-гузариш: ҳама 2с-сатр;
гузариш: ҳамаи 2саққӣ;
}}
ul # sampleNav a {text-decoration: none; }}
ul # sampleNav: hover {
ранги аслии: # DAF197;
}}
Дастгирии браузер
Тавре ки чанде пештар ман аллакай дучор омадам, ин сабкҳо дастгирии браузерҳои хеле хуб доранд, бинобар ин, шумо бояд бидуни истифодаи дилхоҳ худфиреб бошед. Танҳо истисно ба ин вариантҳои хеле калонтарини Internet Explorer, вале бо қарори охирини Microsoft барои хотима додани ҳамаи версияи IE дар синни 11, ин браузерҳои куҳанӣ аз масъалаҳои камтар ва аз ҳад зиёд табдил меёбанд - ва воқеан, агар браузер калонтар ба ин гузариши фоҷиаро бинед, ки он набояд мушкилоти асосӣ бошад. То он даме, ки шумо ин намуди таъсирро ба алоқамандӣ бо муваффақиятро маҳдуд кунед ва ба онҳо таваккал накунед, ки корбарӣ кардан ё муҳтавои мундариҷаро нишон диҳед, браузерҳои калонтаре, ки дастгирӣ намекунанд, таҷрибаи каме ба даст хоҳанд овард, аммо истифодабарандагон дар ин браузерҳо ҳатто фарқиятро медонед, хусусан, агар онҳо метавонанд сайтро чун маъмул истифода баранд ва маълумоте, ки онҳо лозиманд, гиранд.
Хизматҳои иловагӣ
Ин мисоли он аст, ки чӣ тавр ба як тасвири дигар табдил ёфт. HTML истифода баред:
Ва CSS, ки пурра шаффофро дар ҳоле, ки комилан тамоман дигар аст ва пас аз гузариш ду баробарро иваз мекунад:
.swapMe img {-webkit-гузариш: ҳамаи 1s осон-дар-берун; -моз-гузариш: ҳамаи 1-солаҳоро осон кардан; -маълумот-гузариш: ҳамаи 1s осонӣ-дар-берун; -о-гузариш: ҳамаи 1-солаҳоро осон кардан; гузариш: ҳама 1Сиҳо-дар-берун; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -муайяншавӣ: 1; Opacity: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -муайянӣ: 0; Opacity: 0; }}