Saamaynta CSS3 Waxay Abuuraan Saamaynta Nadaafadda Fiican
Naqshadeeyayaasha Webka ayaa muddo dheer doonayay in la xakameeyo bogagga ay abuurayeen markii CSS3 ku dhuftey goobta. Noocyada cusub ee lagu soo bandhigay CSS3 ayaa waxay bixiyeen xirfadlayaasha webka awoodda ay kuugu dari karaan saamaynta Photoshop-sida la mid ah boggooda. Tani waxaa ku jira guryaha sida hooska hoos u dhaca iyo dhalooyinka , geesaha wareegsan, iyo in ka badan. CSS3 ayaa sidoo kale soo bandhigtay saameyn ku-ool ah oo loo adeegsan karo abuurista isku-xirnaan wanaagsan oo ku saabsan goobaha.
Mid ka mid ah saameyn aad u qurux badan oo aad ku dari karto waxyaabaha ku jira boggaaga iyada oo la adeegsanayo CSS3 waa in ay ka dhigaan iyaga oo soo saaraya iyo dibedda iyadoo la adeegsanayo isku-dhafka ka mid ah awoodaha iyo kala-guurka. Tani waa hab fudud oo si fiican loo taageeri karo si aad bogaggaaga u sii wanaajiso dhexdhexaadinta adoo abuuraya aalado fadeexad ah oo feejignaan u ah marka booqdaha goobta uu wax u qabto, sida jihadaas.
Aan eegno sida ay u fududahay in lagu daro saameynta muuqaalka ah ee isdhexgalka ee dhinacyada kala duwan ee bogagga shabakadaada ..
U ogolow & Isbeddel Opacity on Hover
Waxaan ku bilaabi doonnaa inaan eegno sida loo bedelo qaabka muuqaalka marka sawir uu macaamilku ka dhexjirayo walxahaas. Tusaalahan (HTML ayaa hoos lagu muujiyay) Waxaan u adeegsanayaa sawir leh dabeecadda fasalka ee Grayout.
Si aad u sameysid sheybaarka, waxaan ku darnaa xeerarka soo socda ee qaabka CSS-ga:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
Opacity: 0.25;
}
Meelahan doorashadu waxay tarjumayaan 25%. Tani waxay ka dhigan tahay in sawirka la muujin doono 1/4 oo ka mid ah hufnaanta caadiga ah. Dhamaan figradaha aan lahayn daahfureed waxay noqon doontaa 100% halka 0% ay noqon doonto mid gebi ahaanba daahfuran.
Marka xigta, si aad u sameyso sawirka caddayn (ama si ka badan si sax ah, si aad u noqoto mid si buuxda u furan) marka cirifka lagu hayo, waxaad ku dari kartaa: Hooska fasalka:
.greydout: Hover {
-webkit-opacity: 1;
-moz-opacity: 1;
Opacity: 1;
}
Waxaad ogaan doontaa in, tusaale ahaan, waxaan isticmaalayaa iibsadaha horey loo soo dhejiyey ee xeerka si loo hubiyo in dib loo eego dib-u-cusboonaanta qaababka da'da ah ee daalacashadaas. Inkastoo tani ay tahay ficil wanaagsan, xaqiiqadu waxay tahay in qawaaniinta garabku hadda si fiican u taageersan yihiin daalacayaasha, waana arrin aad u ammaan badan oo ay ku dhejiyaan khadadka horey loo sii dhejiyey. Weli, sidoo kale ma jirto sabab aan ku darin horgallada kuwaas haddii aad rabto inaad hubiso taageerada boggaga hore ee browserka. Kaliya hubso in aad raacdo habka ugu fiican ee la aqbalay oo ah in la soo dhameeyo cadeynta qaabka caadiga ah, ee aan horay loo arag ee qaabka.
Haddii aad meeshan ku darsatey goob, waxaad arki doontaa in isbedelka isbadalka uu yahay isbeddel aad u kac ah. Marka hore waa cawl iyo ka dibna ma aha, iyada oo aan jirin dawlad ku meel gaar ah oo u dhaxaysa labadaas. Waxay u eg tahay iftiinka iftiinka - banaanka ama banaanka. Tani waxay noqon kartaa waxa aad rabto, laakiin waxaad sidoo kale dooni kartaa inaad tijaabiso isbedel ah oo si tartiib tartiib ah u socdo.
Si aad ugu darto saameyn dhab ah oo wanaagsan oo ka dhigto tartiib tartiib tartiib tartiib ah, waxaad rabtaa inaad ku darto hantida kalaguurka fasalka .greydout:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
Opacity: 0.25;
-waxkasto-kala-guurka: dhamaan 3-aad oo sahlan;
-moz-kala-guurka: dhammaan 3s fudud;
-ms-transition - dhammaan 3s sahlan;
-oo-ku-gudbin: dhammaan 3s sahlan;
kala-guurka: dhammaan 3-aad way fududahay;
}
Iyadoo leh xeerkan, isbeddelku wuxuu u gudbi doonaa si tartiib tartiib ah halkii uu isbeddel ku samayn lahaa.
Mar labaad, waxaan isticmaaleynaa tiro ka mid ah shuruudaha horay loo soo iibiyay halkan. Kala-guurka looma baahna sida taageerada loo yaqaan 'opacity', sidaa darteed horgaleenta caanuhu waxay sameeyaan macno.
Waxyaabaha aad xasuusato marka aad qorsheyneyso isdhexgalkaas waa in qalabka wax lagu duubo aysan haysanin "gobolka hover", sidaa daraadeed waxyeelooyinkan ayaa badanaa lagu lumiyaa qof walba oo isticmaalaya qalabka shaashada sida taleefanka gacanta. Marxaladda ku-meel-gaadhka badanaa way dhacdaa, laakiin si dhakhso ah ayey u dhacdaa in aan la arki karin. Taasi waa fiicantahay haddii aad ku darto arintan taas oo saameyn ku yeelan karto gunno wanaagsan, laakiin iska ilaali wixii isbeddel ah ee loo baahan yahay in loo arko waxyaabaha la fahmi karo.
Fuuq baxa waa suurta gal
Uma baahnid inaad ku bilowdo muuqaal yar oo jajaban, waxaad isticmaali kartaa marxalado iyo xor u ah inaad ka soo baxdo sawir buuxda. Isticmaalka sawir la mid ah, oo kaliya leh fasal oo la socda:
fasalka = "kufsasho">
Sida hore oo kale, waxaad bedeshaa qalabka adeegsiga: isticmaalka hover:
.withfadeout {
-waxkasto-ku-meel-gaar ah: dhamaan 2-aad-sahanka;
-moz-kala-guurka: dhammaan 2-way-yar-yare;
-ms-transition-ka: dhammaan 2da sahlan-in-baxay;
-oo-ku-gudbin: dhamaan 2-aad-sahanka;
ku-meelgaarka: dhamaan 2-way-yaqaana;
}
.withfadeout: Hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
Opacity: 0.25;
}
Tusaalahan, sawirku wuxuu ka gudbi doonaa si buuxda oo cad oo udhacaya si qarsoodi ah - dib ugu noqoshada tusaalaheena koowaad.
Bixinta Sawirada Beyond
Waa wax aad u fiican in aad ku dabaqi karto marxaladan muuqaalkeed oo aad u muuqato sawirro, laakiin maaha inaad ku xaddidan tahay adigoo adeegsanaya sawirrada leh CSS-da waxyaabahan. Waxaad si sahlan u samayn kartaa badhanka CSS-qaabeysan oo foori marka la riixo oo la qabto. Waxaad kaliya dejin lahayd qalabka isticmaalka: isticmaalka naqshadda firfircoon iyo u gudubka fasalka kaas oo qeexaya badhanka. Guji oo riix batoonka sidaad u aragto waxa dhacaya.
Waxa suurtagal ah in la sameeyo wax muhiim ah oo muuqaal kasta oo muuqaal ah marka la fiiqo ama la riixo. Tusaale ahaan waxaan bedelayaa midabada div iyo midabka qoraalka marka jiirka uu dhamaado. Halkan waxaa ah CSS:
#myDiv {
width: 280px;
midabka asalka ah: # 557A47;
midabka: #dfdfdf;
caarada: 10px;
-waxkasto-kala-guurka: dhammaan 4s-yada fudfududka 0s;
-moz-kala-guurka: dhamaan 4s-yada fudaydka ah 0s;
-ms-transition: dhamaan 4s yare eh 0s;
-oo-ku-gudbin: dhammaan 4s yare eh 0s;
ku-meelgaarka: dhamaan 4s-yada fudfudud-0s;
}
#myDiv: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
Opacity: 0.25;
midabka: # 000;
}
Noocyada Qorshaha ayaa ka faa'iideysan kara midabtakoorka hore
Tilmaamahan sahlan ee sifududka ah ayaa midabkiisu uu si tartiib tartiib ah ugu dhacaa gudaha iyo dibedda marka aan rogrogo alaabta cuntada. Halkan waa HTML:
- Guriga
- CSS3 Tababarada
- Guryaha CSS3
Oo halkan waa CSS:
ul # sampleNav {style-style: none none; }
ul
Bandhigid;
float: bidix;
dhererka: 5px 15px;
margin: 0 5px;
-waxkasto-ku-meel-gaar ah: dhammaan 2-tiirsan;
-moz-kala-guurka: dhammaan 2-lin oo isku xigta;
-ms-transition-ka: dhammaan 2s line;
-oo-ku-gudbin: dhammaan 2-dii line-line;
kala-guurka: dhammaan 2-aad oo qumman;
}
ul # sifoWaxaad ka dhigantahay {qoraalka-qurxinta: midna; }
ul # sampleNav li: hover {
midabka asalka ah: # DAF197;
}
Taageerada Browser
Sidii aan dhowr jeer horay u taabtay, qaababkani waxay leeyihiin taageero aad u fiican, sidaas darteed waa inaad dareentaa inaad bilaash u isticmaasho iyaga oo aan khibrad lahayn. Waxa kaliya oo laga reebo tan waa noocyo badan oo Internet Explorer ah, laakin Microsoft go'aanka kama dambaysta ah ee dhammaystirta taageerada dhammaan noocyada IE ee ka hooseeya 11, daalacayaashan waayeelka ah waxay noqonayaan kuwo ka yar oo ka yar arinta - dhab ahaan, haddii browserka hore uusan Aragtidan kala-guurka ah, taas oo aan aheyn dhibaato weyn. Ilaa iyo inta aad kuxirantahay noocyada noocyada kala duwan ee isdhexgalka oo aanad ku tiirsaneyn inaad ku dhexjirto shaqeynta ama muujiso waxyaabaha muhiimka ah, ka dibna daalacayaasha duugoobay ee aan taageereynin waxtarka waxay heli doonaan waayo-aragnimo yar oo raaxo leh, laakiin dadka isticmaala dijitaaleyaashu ma xitaa xitaa ogaadaan kala duwanaanshaha, gaar ahaan haddii ay isticmaali karaan goobta sida caadiga ah oo u helaan macluumaadka ay u baahan yihiin.
Farshaxan dheeraad ah; Beddel labo sawir
Halkan waxaa ku qoran tusaale ahaan sida loo sawirayo hal sawir. Isticmaal HTML:
Iyo CSS oo ka dhigaysa mid si buuxda daahfuran halka kuwa kale ay si buuxda u taaganyihiin kadibna isbedelku wuxuu isbeddelayaa labadii:
.swapMe img {-webkit-kala-guurka: dhamaan 1-yare e yadafka; -moz-kala-guurka: dhammaan 1-yaraashaha fudud; -ms-transition: dhammaan 1s yare e-in-out; -oo-kala-guurka: dhamaan 1-yara-fudud-yada; ku-meel-gaadhsiis: dhammaan 1-yaraashaha fudud; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; Opacity: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; Opacity: 0; }