Koyawa 25 don inganta hotuna tare da CSS da jQuery

Css-3-akwatin-inuwa-hoto-hover-effects-hoto-salo-baya-bayan-bayyanar-wahayi-kara-inuwa-kan iyaka-sanya-hotuna-tsaya-fito

Lokacin inganta hotuna zamu iya zaɓar mu yi shi tare da Photoshop sannan mu hau shi akan shafin yanar gizo ko kuma za mu iya zaɓar zaɓi B: yi shi da HTML, CSS da dabarun Javascript waɗanda suke akwai.

Bayan tsalle, akwai fasahohi da yawa don inganta hotuna, kusan dukkaninsu anyi su ne da jQuery azaman babban tushe ko tare da CSS3 amfani da sababbin ƙa'idodin gidan yanar gizo, kodayake ina tunatar da ku cewa a wannan yanayin mun rasa dacewa da wasu masu bincike.

Suna cikin Turanci amma an kama su da tashi, sunyi alƙawari :)

Source | 1WD

CSS3 Haɗa hoto tare da jQuery

Koyi don nade alamar tazara a kusa da hoton don cimma hotunan zagaye wanda za'a nuna daidai a duk masu bincike na zamani.

Css-3-hoto-zagaye-tare-da-jquery-image-hover-effects-hoto-salo-bayanan-bango-fitowa-wahayi-kara-inuwa-kan iyaka-sanya-hotunan-tsayawa

2.

Backididdiga da Yanayi da yawa tare da CSS 2.1

Koyi yadda ake amfani da abubuwa na CSS 2.1 na karya don samar da tashoshin bayanan 3, hotunan tsayayyen girman 2, da iyakoki masu rikitarwa masu yawa don abu ɗaya na HTML.

Plearin-bayan-iyaka-kan-css-2-hoto-salo-bango-bayyana-wahayi-ƙara-inuwa-kan iyakokin-sa-hotuna-tsayawa-waje

3.

Tukwici Mai Sauri: Iyakoki da yawa tare da CSS mai sauƙi

Saurin watsa shirye-shiryen allo wanda ke nuna muku yadda zaku cimma iyakoki da yawa tare da CSS mai sauƙi ta wannan hanyar ƙara zurfafawa zuwa ƙirarku. Mafi sauƙin sigar koyarwar da ta gabata.

Saurin-talla-da-kan-iyaka-tare-da-sauƙin-css-hoto-salo-da-baya-bayan-bayyana-da-wahayi-ƙara-inuwa-kan iyakokin-sa-hotuna-tsayawa-fito

4.

Bananan Border on Dynamically Sized Elements tare da CSS2

Na uku version of Hoton Nicolas Gallagher Nuna maka abin da zaka yi idan baka girman girman element.

-Ananan-kan iyakokin-abubuwa-masu-ƙarfi-tare-da-css-2-salo-salo-bayanan-asali-na-wahayi-ƙara-inuwa-kan iyakokin-sa-hotuna-tsayawa-fito

5.

Yi Nishaɗi w / Border - Beledled, Pressed, & More!

Koyi yadda zaka sami nasarar matsawa tare da CSS da wasu dabarun salo na kan iyaka don samun sakamako daban-daban.

Yi-nishadi-tare-da-kango-dangi-dan-kara-hoto-salo-bayanan-bayyana-wahayi-kan-kara-inuwa-kan iyakokin-sa-hotunan-tsayawa

6.

Polaroids tare da CSS3

Koyi yadda ake amfani da CSS2 da CSS3 masu ban mamaki don juya jerin hotunan marasa kyau zuwa cikakken hoton Polaroid.

Polaroids-css-3-image-styling-backgrounds-bayyanar-wahayi-kara-inuwa-kan iyakokin-sa-hotuna-tsayawa-fito

7.

Cikakken Cikakken Shafin Fage

Koyi yadda ake ƙara hoto na bango tare da CSS wanda ke cika dukkan shafi tare da hoto, babu sarari fari, hoton ma'auni kamar yadda ake buƙata, ba ya haifar da sandunan zagayawa da ƙari.

Cikakken-cikakken-shafi-bango-hoto-hover-sakamakon-hoto-salo-bayanan-bango-bayyanar-wahayi-kara-inuwa-kan iyaka-yin-hotuna-tsayawa-fitowa

8.

CSS3 Akwatin Inuwa da Gurbin Hoto

Binciko wata sabuwar hanyar ƙara tasirin tasirin inuwa kawai ta hanyar gyara takardar salo.

Css-3-akwatin-inuwa-hoto-hover-effects-hoto-salo-baya-bayan-bayyanar-wahayi-kara-inuwa-kan iyaka-sanya-hotuna-tsaya-fito

9.

Fancy Thumbnail Tsayar Tasirin w / jQuery

Cimma sakamako mai kyau na walƙiya tare da CSS da jQuery.

Fancy-thumbnail-hover-effect-with-jquery-image-styling-backgrounds-bayyanar-wahayi-kara-inuwa-kan iyakokin-sa-hotunan-tsayawa-fito

10.

Yadda Ake Simpleirƙiri Saƙon Tasirin CSS mai Sauƙi

A cikin wannan darasin zaku koya yadda ake ƙirƙirar sauƙin sauya hoto na CSS tare da asali na HTML da salo na CSS.

Yadda-ake-kirkira-mai-sauki-css-hoto-mirgine-tasiri-hoto-hover-effects-hoto-salo-baya-bayan-bayyanar-wahayi-add-inuwa-kan iyakokin-sa-hotuna-tsaya-fito

11.

Tsarin ruwa

Tsarin jirgin ruwa yana ɗaukar ku ta hanyar abubuwan yau da kullun na abubuwa masu iyo kamar hotuna, saukar da iyakoki, maɓallan gaba da na baya, hotunan hotunan hoto, jerin layi da kuma shimfidar shafi da yawa. Duba karatuttukan 4 waɗanda aka keɓe don hoto mai iyo.

Hoton-hoto-salo-salo-bayanan-asali-bayyanar-wahayi-ƙara-inuwa-kan iyaka-yin-hotuna-tsayawa-fito

12.

Snazzy Tsawo Tasirin Amfani da CSS

A cikin wannan darasin, zaku sami damar kirkirar sabbin dabaru masu dauke da kere-kere ta hanyar amfani da kaddarorin CSS2.1.

Snazzy-hover-effect-ta-amfani-da-css-hoto-salo-bayanan-asali-da-wahayi-kara-inuwa-kan iyakokin-sa-hotunan-tsayawa-fito

13.

Saurin Gyarawa Ba Tare da

Bugawa

Lokacin amfani da jujjuyawar hoto ta CSS, dole ne a loda hotuna biyu, uku, ko fiye (kuma galibi ana ɗora su don kyakkyawan sakamako). Koyi yadda ake sanya dukkan jihohi cikin hoto ɗaya yana yin canje-canje masu saurin gaske kuma baya buƙatar preload.

Saurin-juyawa-ba tare da preload-hoto-salo-bayanan-bango-ba-na-wahayi-sa-inuwa-kan iyaka-yin-hotuna-tsayawa-fito

14.

jQuery zagaye Kusurwa

Yawancin tasirin jQuery don kusurwa masu zagaye da alamu da yawa.

Soyayyar-yan-fati-da-mata

15.

Kayan Aiki Mafi Sauƙi da Samfurin Hoto ta Amfani da jQuery

Duba misalai 3 na amfani da rubutun samfoti na jQuery. Ana iya amfani da wannan rubutun mai sauƙi don dalilai daban-daban.

Sauƙaƙe-kayan aikin-samfoti-ta amfani-da-jquery-hoto-salo-bayanan-asali-da-wahayi-ƙara-inuwa-kan iyaka-yin-hotuna-tsayawa-fito

16.

Ersarfafawa - Cikakken Bayanin allo /

slideshow

jQuery Toshe

Superzided abu ne na jQuery wanda ke daidaita hotuna don cika mai bincike yayin ci gaba da girman girman hoto da zagaye Hotuna / bayanan ta hanyar slideshow tare da sauyawa da shigar da kaya.

Supersized-full-screen-background-slideshow-jwuery-plugin-image-styling-backgrounds-bayyanar-wahayi-kara-inuwa-kan iyaka-yin-hotuna-tsayawa-fito

17.

PNG Rufi

Shin kun taɓa shiga cikin matsalar ƙirƙirar rukunin yanar gizo tare da hotunan da abokin harka ya ba ku, sai kawai ku sami daga baya bayan sun sabunta hotunan su ainihin yanayin jin da ba a riƙe shi ba? Wannan maganin ya haɗa da ƙirƙirar rufin PNG mai haske wanda za'a iya amfani dashi azaman abin rufe fuska / firam a kusa da JPEG ko GIF na yau da kullun. Wannan hanyar, ana iya saita shigarwar CMS na yau da kullun don haka masu amfani zasu iya loda hotuna ba tare da damuwa da amfani da kowane shirin zane don amfani da matattara ba.

Png-overlay-image-styling-backgrounds-bayyanar-wahayi-kara-inuwa-kan iyakokin-sa-hotunan-tsayawa-fito

18.

BeZoom

Nauyin mara nauyi

jQuery

Omara Buɗa Ido

BeZoom hanya ce mai sauƙi da sauƙi don JQZoom. Ya fi sauƙi kuma yana da sauƙin amfani.

Bezoom-lightweight-jquery-zoom-plugin-plugin-image-salo-bayanan-bayyanuwa-bayyanar-wahayi-add-inuwa-kan iyakokin-sa-hotuna-tsaya-fito

19.

Amfani da jQuery don Hotunan Hoton Fage

Yi wasa da jQuery kuma canza matsayin hoton baya don ƙirƙirar nau'in tasirin da kuke nema. Akwai sabon labarin da ke amsa "Yaya zan yi aiki da jihohi masu aiki?" - Karɓar Yanki mai Amfani don Bayanan Rayayyun Halitta na jQuery.

Amfani da-jquery-for-background-image-animations-image-styling-backgrounds-bayyanar-wahayi-kara-inuwa-kan iyakokin-sa-hotuna-tsayawa-waje

20.

Hanyoyi 5 don Yaɗa Hotunanku tare da CSS

Anan ga wasu dabaru masu sauƙi don ƙara ɗanɗano ga hotunanka masu ban mamaki. Amfani da Photoshop don yin salo kowane hoto na iya zama mai wahala da wahalar kiyayewa cikin dogon lokaci. Wadannan dabarun CSS masu zuwa zasu taimaka maka saukaka wannan ciwo.

Hanyoyi-don-yaji-hotunan -ku-da-css-hoto-salo-bayanan-asali-da-wahayi-kara-inuwa-kan iyaka-yin-hotunan-tsayawa-fito

21.

Ta yaya To:

Za a iya sake gyarawa

Bayanin Bayanin

Koyi yadda ake saita girman hoto na ban mamaki tare da CSS. Kuna da zaɓi 3 don zaɓar daga.

Kalli-yadda-ake-yiwa-girman-hoto

22.

Sanya Hannun Hotonku

Sanar da masu amfani da cewa sashin wannan rukunin gidan yanar gizonmu yana nufin dannawa shine mafi kyawun samun ta hanyar linzamin kwamfuta akan sakamako. Waɗannan sassan "masu danna" tabbas sun haɗa da hotunan abun ciki. Hanya Hoton hoto ne wanda zai ba ku damar amfani da ƙarin salo zuwa hanyoyin haɗin hotonku.

Style-your-image-links-image-styling-backgrounds-bayyanar-wahayi-kara-inuwa-kan iyaka-yin-hotuna-tsayawa-fito

23.

Mahara Bayan Fage tare da CSS

Wasu lokuta, yana da ma'ana don amfani da hotunan bango fiye da saka su kai tsaye cikin shafin. Kuma yayin da kowane abu - kamar alamar jikinka - na iya ɗaukar hoto na bango ɗaya kawai, ana iya amfani da su akan abubuwa da yawa.

Hotunan-hotuna-da-hotuna-masu-hoto-na-css-da-hoto

24.

Iyakokin Hoto tare da CSS

Haƙiƙa sauƙin koyawa wanda ke nuna muku yadda ake ƙara iyaka mai ƙarfi zuwa hotuna ta amfani da CSS.

Hotuna-kan iyakoki-da-css-hoto-salo-bayanan-bango-rayuwa-sun-kara-inuwa-kan iyakokin-sa-hotunan-tsayawa-fito

25.

CSS Sprites ba tare da Amfani da Hotunan Fage ba

Koyi yadda ake amfani da tasirin sha ba tare da cikakken ilimi game da sprites CSS ba.

Css-sprites-without-using-background-images-image-styling-backgrounds-bayyanar-wahayi-kara-inuwa-kan iyakokin-sa-hotuna-tsayawa-waje


Bar tsokaci

Your email address ba za a buga. Bukata filayen suna alama da *

*

*

  1. Wanda ke da alhakin bayanan: Miguel Ángel Gatón
  2. Manufar bayanan: Sarrafa SPAM, sarrafa sharhi.
  3. Halacci: Yarda da yarda
  4. Sadarwar bayanan: Ba za a sanar da wasu bayanan ga wasu kamfanoni ba sai ta hanyar wajibcin doka.
  5. Ajiye bayanai: Bayanin yanar gizo wanda Occentus Networks (EU) suka dauki nauyi
  6. Hakkoki: A kowane lokaci zaka iyakance, dawo da share bayanan ka.