25 Udhëzime për të përmirësuar imazhet me CSS dhe jQuery

Css-3-kuti-hije-imazh-rri pezull-efektet-imazhi-stilimi-sfondet-pamja-frymëzim-shtoni-hije-kufijtë-bëjnë-imazhe-dal-jashtë

Kur përmirësojmë imazhet, ne mund të zgjedhim ta bëjmë atë me Photoshop dhe pastaj ta montojmë atë në faqen e internetit ose mund të zgjedhim gjithashtu opsionin B: bëjeni atë me HTML, CSS dhe teknikat Javascript që janë në dispozicion.

Pas kërcimit, ka shumë teknika për të përmirësuar imazhet, pothuajse të gjitha ato të bëra me jQuery si bazë kryesore ose me CSS3 duke përfituar nga standardet më të fundit të internetit, megjithëse ju kujtoj se në atë rast humbasim pajtueshmërinë me disa shfletues.

Ata janë në anglisht, por ata janë kapur në fluturim, premtuar :)

Burimi | 1WD

Imazhi i rrumbullakosur CSS3 me jQuery

Mësoni të mbështillni një etiketë span rreth elementit të figurës për të arritur imazhe të rrumbullakosura të cilat do të shfaqen drejtë në të gjithë shfletuesit modernë.

Imazhi-css-3-i-rrumbullakosura-me-jquery-imazhi-hover-efekt-imazhi-modelimi-sfondi-pamja-frymëzimi-shtoni-hijen-kufijtë-bëjnë-imazhet-dallohen

2.

Sfondet dhe kufijtë e shumtë me CSS 2.1

Mësoni si të përdorni pseudo-elemente CSS 2.1 për të siguruar deri në 3 kanavacë sfondi, 2 imazhe prezantuese me madhësi fikse dhe kufij të shumtë kompleksë për një element të vetëm HTML.

Sfondet e shumta-kufijve-css-2-imazhi-stilimi-sfondet-pamja-frymëzimi-shtoni-hijen-kufijtë-krijoni-imazhe-dallohen

3.

Këshillë e shpejtë: Kufij të shumëfishtë me CSS të thjeshtë

Transmetim i shpejtë i ekranit që ju tregon se si të arrini kufij të shumtë me CSS të thjeshtë në atë mënyrë duke shtuar më shumë thellësi në planet tuaja. Version shumë më i thjeshtë i tutorialit të mëparshëm.

Këshilla të shpejta-për-kufij të shumtë-me-thjeshtë-css-për-modelimin-e-imazhit-pamja-frymëzimi-shtoni-hijen-kufijtë-bëni-imazhe-dal-në-sy

4.

Kufij të shumëfishtë në elemente me madhësi dinamike me CSS2

Versioni i tretë i Nicholas Gallagher duke ju treguar se çfarë të bëni nëse nuk keni madhësinë e elementit.

Elementë-me-kufij të shumtë-me-madhësi-dinamike-me-css-2-stilimi-i-imazhit-pamja-frymëzim-shtoni-hijen-kufijtë-bëjnë-imazhe-të-veçohen

5.

Argëtohuni me kufij - me teli, të shtypur, e më shumë!

Mësoni si të arrini një efekt të shtypur me CSS dhe disa truke të thjeshta të stilit të kufirit për të marrë efekte të ndryshme.

Argëtohuni-me-kufijtë-me prerje-presë-më-imazhi-stilimi-sfondi-pamja-frymëzim-shtoni-hije-kufijtë-bëni-imazhe-dal-në-sy

6.

Polaroide me CSS3

Mësoni se si të përdorni disa CSS2 dhe CSS3 të mrekullueshëm për të kthyer një listë ndryshe modest të imazheve në një grup të plotë të fotografive Polaroid.

Polaroids-css-3-imazhet-stiluese-sfondet-paraqitja-frymëzimi-shtojnë-hijen-kufijtë-bëjnë-imazhet-dallohen

7.

Imazh Sfondi i Plotë i Përsosur

Mësoni si të shtoni imazhin e sfondit me CSS që mbush tërë faqen me imazh, pa hapësirë ​​të bardhë, shkallëzon imazhin sipas nevojës, nuk shkakton shirita lëvizës dhe shumë më tepër.

Efekt-perfekt-ne-sfond-ne-sfond-hover-efekt-imazhi-stilimi-pamja-frymëzimi-shtoni-hijen-kufijtë-bëni-imazhe-dal-në-sy

8.

Efektet e hijes dhe imazhit të kutisë CSS3

Eksploroni një mënyrë të re për të shtuar efektet e hijeve të rënies vetëm duke redaktuar një fletë stili.

Css-3-kuti-hije-imazh-rri pezull-efektet-imazhi-stilimi-sfondet-pamja-frymëzim-shtoni-hije-kufijtë-bëjnë-imazhe-dal-jashtë

9.

Efekt zbukurues i miniaturave të zbukuruara w / jQuery

Arritja e efektit të stilit të shkëlqyeshëm të flash-it me CSS dhe jQuery.

Efekti-zbukurimi-i-hover-me-jquery-imazhi-modelimi-sfondi-pamja-frymëzim-shtoni-hije-kufijtë-bëni-imazhe-dallohen

10.

Si të krijoni një efekt të thjeshtë të zhvendosjes së imazheve në CSS

Në këtë udhëzues do të mësoni se si të krijoni efekt të thjeshtë të rikthimit të imazhit CSS me stilin bazë HTML dhe CSS.

Si-për-krijuar-thjeshtë-css-imazhi-rollover-efekt-imazhi-rri pezull-efektet-image-styling-sfondet-pamja-frymëzim-shtoni-hije-kufijtë-make-imazhe-spikatur

11.

lundrues

Floatutorial ju përcjell bazat e elementeve lundrues të tilla si imazhet, kapakët e rënies, butonat pas dhe mbrapa, galeritë e imazheve, listat inline dhe paraqitjet me shumë kolona. Shikoni 4 udhëzime mësimore kushtuar imazhit që lundron.

Faleminderit qe na ndiqini. Nese keni pyetje apo sugjerime ju lutem na kontaktoni duke klikuar tek linku kontakt.

12.

Efektet Snazzy Hover Duke përdorur CSS

Në këtë manual, do të kaloni krijimin e teknikave fleksibile të avancuara të rri pezull duke përdorur vetitë CSS2.1.

Efekti snazzy-hover-using-css-image-styling-backgrounds-paraqitja-frymëzim-shtoni-hije-kufij-make-make-images-dal-jashtë

13.

Rrotullime të shpejta pa

Ngarko paraprakisht

Kur përdorni përmbysjet e imazheve CSS, duhet të ngarkohen dy, tre ose më shumë imazhe (dhe shpesh të ngarkohen paraprakisht për rezultatet më të mira). Mësoni se si t'i vendosni të gjitha gjendjet në një imazh bën ndryshime dinamike më të shpejta dhe nuk kërkon parangarkim.

Rrotullimet e shpejta-pa-para-ngarkimin-e-stilimit-të-sfondeve-pamja-frymëzimi-shtoni-hijen-kufijtë-bëjnë-imazhet-dallohen

14.

Këndet e rrumbullakosura të jQuery

Shumë efekte të jQuery për qoshe të rrumbullakosura dhe shumë më tepër modele.

Qoshet e rrumbullakosura-jquery-imazhi-modelimi-sfondet-pamja-frymëzimi-shtoni-hije-kufijtë-bëjnë-imazhe-dal-jashtë

15.

Këshilla më e lehtë për veglat dhe pamjen paraprake të imazhit duke përdorur jQuery

Shihni 3 shembuj të përdorimit të skenarit të rishikimit të rishikimit të jQuery. Ky skenar i thjeshtë mund të zbatohet për një larmi qëllimesh.

Këshillimi-më-i lehtë-para-vëzhgimi-duke përdorur-jquery-image-styling-backgrounds-paraqitja-frymëzim-shtoni-hije-kufij-make-imazhe-spikatur

16.

Supersized - Sfond i plotë në ekran /

Slideshow

Shtojca jQuery

Superzided është një shtojcë jQuery që ndryshon përmasat e imazheve për të mbushur shfletuesin duke ruajtur raportin e dimensionit të imazhit dhe ciklet e Imazheve / sfondeve përmes shfaqjes së diapozitivave me kalimet dhe para-ngarkimet.

Super-madhësi-ekran të plotë-sfond-prezantim-jwuery-plugin-imazh-styling-sfond-pamja-frymëzim-shtoni-hije-kufij-bërë-imazhe-spikatur

17.

Mbivendosja PNG

A keni hasur ndonjëherë në problemin e krijimit të një faqe me fotografi të dhëna nga klienti, për të gjetur më vonë pasi të azhurnojnë fotografinë e tyre pamja dhe ndjesia origjinale nuk ruhet? Kjo zgjidhje përfshin krijimin e një mbivendosje transparente PNG e cila mund të përdoret si maskë / kornizë rreth JPEG ose GIF të rregullt. Në këtë mënyrë, një instalim tipik CMS mund të konfigurohet në mënyrë që përdoruesit të mund të ngarkojnë foto pa u shqetësuar për përdorimin e ndonjë programi grafik për të aplikuar filtra.

Faleminderit qe na ndiqini. Nese keni pyetje apo sugjerime ju lutem na kontaktoni duke klikuar tek linku kontakt.

18.

BeZoom

Pesha e peshës

jQuery

Shtojca e zmadhimit

BeZoom është një alternativë e thjeshtë dhe e lehtë për JQZoom. Ershtë më e lehtë dhe është më e lehtë për t’u përdorur.

Bezoom-lehta-jquery-zoom-plugin-imazhi-stilimi-sfondet-pamja-frymëzim-shtoni-hije-kufijtë-bëjnë-imazhe-dal-në-sy

19.

Përdorimi i jQuery për Animacionet e Imazheve në Sfond

Luaj me jQuery dhe ndrysho pozicionin e imazhit të sfondit për të krijuar llojin e efektit që kërkon. Ekziston një artikull i ri që përgjigjet "Si mund t'i trajtoj gjendjet aktive?" - Trajtimi i gjendjes aktive për sfondet e animuara të jQuery.

Përdorimi i jquery-për-animacion-imazhi-në-sfond-stilimi-imazhi-sfondet-pamja-frymëzimi-shtoni-hijen-kufijtë-bëni-imazhe-dallohen

20.

5 mënyra për të zbukuruar imazhet tuaja me CSS

Këtu janë disa truke të thjeshta për të shtuar aromë në imazhet tuaja tipike të buta. Përdorimi i Photoshop për stilimin e çdo imazhi mund të jetë i lodhshëm dhe i vështirë për tu ruajtur në planin afatgjatë. Këto teknika të mëposhtme të CSS do t'ju ndihmojnë të lehtësoni atë dhimbje.

Mënyrat-për-erëzimin-e-imazheve tuaja-me-css-modelimin e imazheve-pamja-frymëzimi-shtoni-hijen-kufijtë-bëjnë-imazhe-dal-në-sy

21.

Si të:

ridimenzionohet

Historiku i sfondit

Mësoni si të konfiguroni imazhin e sfondit që mund të ndryshohet me CSS. Keni 3 mundësi për të zgjedhur.

Si-të-ndrysho-rishikohet-sfondi-i-modelimit-të-sfondit-pamja-frymëzimi-shton-hijen-kufijtë-bëjnë-imazhe-të-veçohen

22.

Stili Lidhjet tuaja Image

Lënia e përdoruesve në dijeni se një pjesë e veçantë e faqes sonë të internetit ka për qëllim të klikohet, arrihet më së miri përmes efektit mbi miun. Ato seksione "të klikueshme" sigurisht përfshijnë imazhe të përmbajtjes. Image Link është një skenar që ju lejon të aplikoni stilim shtesë në lidhjet tuaja të imazhit.

Style-i-imazhet-tuaj-lidhjet-imazhet-stilimet-sfondet-pamja-frymëzimi-shtoni-hijen-kufijtë-bëjnë-imazhe-dal-në-sy

23.

Imazhe të shumta me sfond me CSS

Ndonjëherë, ka më shumë kuptim të përdorësh imazhe në sfond sesa t'i futësh ato direkt në faqe. Dhe ndërsa secili element - si etiketa juaj trupore - mund të mbajë vetëm një imazh sfondi, ato mund të zbatohen në disa elemente.

Imazhe të shumëfishta-në-sfond-me-css-imazhi-stilimi-sfondet-pamja-frymëzimi-shtoni-hijen-kufijtë-bëjnë-imazhe-të-veçohen

24.

Kufijtë e imazhit me CSS

Një tutorial me të vërtetë i lehtë që ju tregon se si të shtoni kufij të fortë për imazhet duke përdorur CSS.

Imazhet-kufij-me-css-imazhet-stilimet-sfondet-pamja-frymëzim-shtoni-hije-kufijtë-bëjnë-imazhe-dal-jashtë

25.

CSS Sprites pa përdorur imazhe në sfond

Mësoni se si të aplikoni efektin rri pezull pa shumë njohuri rreth CSS sprites.

CSS-sprites-pa-përdorur-imazhe-sfondi-modelimi-imazhet-sfondet-pamja-frymëzim-shtoni-hijen-kufijtë-bëjnë-imazhet-dal-në-sy


Lini komentin tuaj

Adresa juaj e emailit nuk do të publikohet. Fusha e kërkuar janë shënuar me *

*

*

  1. Përgjegjës për të dhënat: Miguel Ángel Gatón
  2. Qëllimi i të dhënave: Kontrolloni SPAM, menaxhimin e komenteve.
  3. Legjitimimi: Pëlqimi juaj
  4. Komunikimi i të dhënave: Të dhënat nuk do t'u komunikohen palëve të treta përveç me detyrim ligjor.
  5. Ruajtja e të dhënave: Baza e të dhënave e organizuar nga Occentus Networks (BE)
  6. Të drejtat: Në çdo kohë mund të kufizoni, rikuperoni dhe fshini informacionin tuaj.