Abubuwan Hotuna da Aikata Hotuna a Styles
Mutane da yawa suna amfani da CSS don daidaita rubutu, canza launin, launi, girman da sauransu. Amma abu daya da mutane da yawa sukan manta shine cewa zaka iya amfani da CSS tare da hotunan.
Canza Hoton Hoto
CSS ba ka damar daidaita yadda hoton ya nuna a shafin. Wannan zai iya zama da amfani sosai don adana shafukanku. Ta hanyar kafa tsarin a kan dukkan hotunan, ka kirkiro hotunan neman hotonka. Wasu daga cikin abubuwan da zaka iya yi:
- Ƙara iyaka ko zane a kusa da hotuna
- Cire iyakar launi a kusa da hotunan da aka haɗu
- Daidaita nisa da / ko tsawo na hotuna
- Ƙara saurin inuwa
- Gyara hoto
- Canja styles lokacin da hoton ya rufe
Gina hotonka kan iyaka yana da kyakkyawan wuri don farawa. Amma ya kamata ka dauki fiye da iyakar iyaka - yi tunani a kan dukkan gefen hoton ka kuma daidaita daidaitattun hanyoyi da kuma padding . Hoton da ke bakin bakin ƙananan bakin iyakoki yana da kyau, amma ƙara wasu ƙuƙwalwa tsakanin iyakar da hoton zai iya duba ko da kyau.
img {
iyaka: 1px m baki;
Kusawa: 5px;
}
Kyakkyawan ra'ayin yin amfani da hotuna marasa ado a kowane lokaci , idan ya yiwu. Amma idan ka yi, ka tuna cewa yawancin masu bincike suna ƙara iyakar launin launi a kusa da hoton. Ko da kayi amfani da lambar da ke sama don canja iyakokin, hanyar haɗi zai kare cewa sai dai idan ka cire ko canza iyakar a kan mahaɗin. Don yin wannan ya kamata ka yi amfani da tsarin CSS don cire ko canza iyakar a kusa da hotunan da aka haɗu:
img> a {
iyaka: babu;
}
Hakanan zaka iya amfani da CSS don canza ko saita tsawo da nisa daga hotunanku. Duk da yake ba mai kyau ba ne don amfani da browser don daidaita siffofin hotunan saboda sauke saukewa, suna samun mafi kyau a sake hotunan hotuna don haka har yanzu suna da kyau. Kuma tare da CSS za ka iya saita hotunanka zuwa ga kowa a matsayin tsaka-tsalle ko tsawo ko ma ya saita girman don zama dangi ga akwati.
Ka tuna, idan ka sake mayar da hotuna, don sakamako mafi kyau, ya kamata ka sake mayar da girman ɗaya girman - tsawo ko nisa. Wannan zai tabbatar cewa hoton yana riƙe da yanayinsa, don haka ba ya damu ba. Saita sauran darajar ta atomatik ko barin shi don gaya wa mai bincike don kiyaye tsarin rabo daidai.
img {
nisa: 50%;
tsawo: auto;
}
CSS3 tana ba da bayani ga wannan matsala tare da sababbin kaddarorin-kayan aiki da matsayi. Tare da waɗannan kaddarorin za ku iya ƙayyade ainihin siffar girman da nisa da kuma yadda za a iya kula da yanayin rabo. Wannan zai haifar da tasirin wasiƙa a kan hotunanku ko cropping don samun hoton don dacewa da girman da ake bukata.
Duk da yake kullun CSS3 da kayan aiki-wuri ba a tallafawa su ba tukuna, akwai wasu kaddarorin CSS3 da suke da goyan baya a yawancin bincike na zamani wanda zaka iya amfani da su don canza hotuna. Abubuwa kamar saurin inuwa, sasanninta, da canje-canje don juyawa, skew, ko kuma motsa hotunanku duka aiki a yanzu a mafi yawan bincike na zamani. Hakanan zaka iya amfani da ƙwayoyin CSS don canza hotuna lokacin da aka rufe, ko danna, ko bayan bayan lokaci.
Amfani da Hotuna a matsayin Bayani
CSS ya sa ya sauƙi don ƙirƙirar zato gado tare da hotunanku.
Zaka iya ƙara bayanan zuwa duk shafi ko zuwa wani takamaiman sashi. Yana da sauƙi don ƙirƙirar bayanan hoto akan shafi tare da dukiya mai ban mamaki:
jiki {
Hotuna: url (baya.jpg);
}
Canja mai zaɓin jiki zuwa wani takamaiman maɓallin shafi don sanya bango a kan wani nau'i ɗaya.
Wani abun jin daɗin da kake iya yi tare da hotunan yana ƙirƙirar hoton bayanan da ba ya gungura tare da sauran shafin - kamar alamar ruwa. Kuna amfani da salon da aka haɗe kawai: gyarawa; tare da hotonku na baya. Sauran zaɓuɓɓuka don ƙanananku sun hada da yin su tayarwa kawai a tsaye ko a tsaye ta hanyar yin amfani da dukiya mai maimaita baya.
Rubuta bayanan maimaitawa: sake-x; don tayar da hoton a tsaye da baya-maimaita: sake-y; to tile tsaye. Kuma zaka iya sanya hotunanka na baya tare da dukiya na matsayi.
Kuma CSS3 yana ƙara ƙarin sifofi don al'amuranku. Zaka iya shimfiɗa hotunanka don dacewa da kowane girman baya ko saita siffar bayanan zuwa sikelin da girman girman taga . Zaka iya canza matsayi sannan sannan ka shirya hoto na baya. Amma ɗaya daga cikin abubuwan mafi kyau game da CSS3 shine cewa yanzu zaku iya tsara hotunan bayanan baya don ƙirƙirar mawuyacin tasiri.
HTML5 Yana taimakawa Style Images
Sakamakon FIGURE a HTML5 ya kamata a sanya shi a kusa da kowane hoton da zai iya tsayawa kadai a cikin takardun. Wata hanya ta tunani game da ita shine idan hotunan zai iya bayyana a cikin shafi, sa'an nan kuma ya kasance a cikin nau'in FIGURE. Hakanan zaka iya amfani da wannan nau'ikan da sashin FIGCAPTION don ƙara tsarin zuwa hotunanku.