25 pamokos, kaip pagerinti vaizdus naudojant CSS ir „jQuery“

CSS-3-box-shadow-image-hover-effects-image-style-backgrounds-izskatu-įkvėpimas-pridėti-šešėlis-sienos-padaryti vaizdus-išsiskirti

Tobulindami vaizdus galime pasirinkti tai padaryti naudodami „Photoshop“, tada įdėti jį į tinklalapį arba pasirinkti B variantą: darykite tai naudodami HTML, CSS ir „Javascript“ metodus, kurie yra prieinami.

Po šuolio yra daugybė būdų, kaip pagerinti vaizdus, ​​beveik visi jie pagaminti naudojant „jQuery“ kaip pagrindinę bazę arba naudojant CSS3 pasinaudojant naujausiais interneto standartais, nors primenu, kad tokiu atveju prarandame suderinamumą su kai kuriomis naršyklėmis.

Jie yra anglų kalba, bet jie yra pagauti skrydžio metu, pažadėjo :)

Šaltinis | 1DD

CSS3 suapvalintas vaizdas su „jQuery“

Sužinokite, kaip apvynioti žymę aplink vaizdo elementą, kad gautumėte apvalius vaizdus, ​​kurie bus rodomi visose šiuolaikinėse naršyklėse.

CSS-3-suapvalintas-vaizdas-su-jquery-image-hover-effects-image-style-backgrounds-look-inspiration-add-shadow-border-make-images-stand-out

2.

Keli fonai ir sienos su CSS 2.1

Sužinokite, kaip naudoti CSS 2.1 pseudoelementus, norint pateikti iki 3 fono drobių, 2 fiksuoto dydžio pristatymo vaizdus ir kelias sudėtingas kraštines vienam HTML elementui.

Keli fonai-kraštai-css-2-vaizdo stiliaus-fonai-išvaizda-įkvėpimas-pridėti-šešėlis-kraštai-padaryti-vaizdai-išsiskirti

3.

Greitas patarimas: kelios sienos su paprasta CSS

Greitas ekrano perdavimas, parodantis, kaip pasiekti kelias sienas naudojant paprastą CSS, tokiu būdu suteikiant daugiau gylio jūsų dizainams. Daug paprastesnė ankstesnės pamokos versija.

„Quick-tip-multiple-border-with-simple-css-image-styling-fonai-išvaizda-įkvėpimas-pridėti-šešėlis-kraštai-padaryti-vaizdai-išsiskirti“

4.

Keli kraštai ant dinamiškai dydžio elementų su CSS2

Trečioji versija Nicolasas Gallagheris parodyti, ką daryti, jei nenorite elemento dydžio.

Keli kraštai-dinamiško dydžio elementai su „css-2“ vaizdo stiliaus stiliaus fonais-išvaizda-įkvėpimas-pridėti-šešėlių-kraštai-padaryti vaizdus-išsiskirti

5.

Linksminkis su sienomis - išlenktais, prispaustais ir dar daugiau!

Sužinokite, kaip pasiekti spaudžiamą efektą naudojant CSS ir keletą paprastų krašto stiliaus triukų, kad gautumėte įvairių efektų.

Linksminkitės su kraštais-nuožulniais-prispaustais-daugiau-vaizdų-stiliaus-fonais-išvaizdos-įkvėpimo-pridėkite-šešėlių-kraštų-padaryti-vaizdus-išsiskiriančius

6.

Polaroidai su CSS3

Sužinokite, kaip naudoti nuostabų CSS2 ir CSS3, kad paverstumėte kitaip nereikalingą vaizdų sąrašą į pilną „Polaroid“ nuotraukų rinkinį.

„Polaroids-css-3-image-styling-backgrounds-look-inspiration-add-shadow-border-make-images-stand-out“

7.

Puikus viso puslapio fono vaizdas

Sužinokite, kaip pridėti fono paveikslėlį naudojant CSS, kuris užpildo visą puslapį vaizdu, be jokio tarpo, mastelį sumažina pagal poreikį, nesukelia slinkties juostų ir dar daugiau.

Puikus viso puslapio fono paveikslėlio užvedimo efektai-vaizdo stiliaus stilius-fonai-išvaizda-įkvėpimas-pridėti-šešėlis-sienos-padaryti vaizdus-išsiskirti

8.

CSS3 langelio šešėlių ir vaizdo užvedimo efektai

Naršykite naują būdą pridėti šešėlinių efektų, tiesiog redaguodami stiliaus lapą.

CSS-3-box-shadow-image-hover-effects-image-style-backgrounds-izskatu-įkvėpimas-pridėti-šešėlis-sienos-padaryti vaizdus-išsiskirti

9.

Puošnus miniatiūrų užvedimo efektas su „jQuery“

Pasiekite tvarkingą „flash“ stiliaus efektą naudodami CSS ir „jQuery“.

Išgalvotas miniatiūros užvedimo efektas su „jquery-image-style“ fonais-išvaizda-įkvėpimas-pridėti-šešėlis-kraštai-padaryti vaizdus-išsiskirti

10.

Kaip sukurti paprastą CSS vaizdo perkėlimo efektą

Šioje pamokoje jūs sužinosite, kaip sukurti paprastą CSS vaizdo perteikimo efektą naudojant pagrindinį HTML ir CSS stilių.

Kaip sukurti paprastą-css-image-rollover-effect-image-hover-effects-image-style-backgrounds-look-inspiration-add-shadow-border-make-images-stand-out

11.

pamoka

„Floatutorial“ pateikia pagrindinius plaukiojančių elementų, tokių kaip vaizdai, iškraipymo skydeliai, kito ir atgal mygtukus, vaizdų galerijas, įterptinius sąrašus ir kelių stulpelių išdėstymą, pagrindus. Peržiūrėkite 4 mokymo programas, skirtas vaizdų plūduriavimui.

„Floatutorial-image-styling-fonai-išvaizda-įkvėpimas-pridėti-šešėlis-sienos-padaryti-vaizdus-išsiskirti“

12.

Snazzy Hover efektai naudojant CSS

Šioje pamokoje jūs apžvelgsite lanksčių išplėstinių žymėjimo būdų naudojimą naudojant CSS2.1 ypatybes.

Snazzy-hover-effect-using-css-image-styling-backgrounds-izskatu-įkvėpimas-pridėti-šešėlis-sienos-padaryti-vaizdai-išsiskirti

13.

Greiti perėjimai be

Iš anksto įkelti

Naudojant CSS vaizdo slinktį, reikia įkelti du, tris ar daugiau vaizdų (kurie dažnai būna iš anksto įkelti, kad būtų pasiekti geriausi rezultatai). Sužinokite, kaip sudėti visas būsenas į vieną vaizdą dinaminiai pokyčiai vyksta greičiau ir nereikia iš anksto įkelti.

Greitai perkeliami-be išankstinio įkrovimo-vaizdo stiliaus-fonų-išvaizdos-įkvėpimo-pridėti-šešėlių-kraštų-padaryti-vaizdus-išsiskirti

14.

„jQuery“ suapvalinti kampai

Daugybė „jQuery“ efektų užapvalintiems kampams ir daug daugiau modelių.

Suapvalinti kampai-jquery-image-style-backgrounds-look-inspiration-add-shadow-border-make-images-stand-out

15.

Lengviausias patarimas ir vaizdų peržiūra naudojant „jQuery“

Žr. 3 „jQuery“ perkėlimo peržiūros scenarijaus naudojimo pavyzdžius. Šis paprastas scenarijus gali būti pritaikytas įvairiems tikslams.

Lengviausias patarimas-peržiūra-naudojant-jquery-image-style-backgrounds-izskatu-įkvėpimą-add-shadow-border-make-images-stand-out

16.

„Supersized“ - viso ekrano fonas /

Skaidrės

„jQuery“ papildinys

„Superzided“ yra „jQuery“ įskiepis, kuris keičia vaizdų dydį, kad užpildytų naršyklę, išlaikydamas vaizdo matmenų santykį, ir perjungia vaizdus / fonus per skaidrių demonstraciją su perėjimais ir išankstiniu įkelimu.

„Supersized-full-screen-background-slideshow-jwuery-plugin-image-style-backgrounds-Išvaizda-įkvėpimas-pridėti-šešėlis-kraštai-padaryti-vaizdai-išsiskirti“

17.

PNG perdanga

Ar kada susidūrėte su svetainės su kliento pateikiamomis nuotraukomis kūrimo problema, kad vėliau, atnaujinus fotografiją, rastumėte originalią išvaizdą ir savijautą? Šis sprendimas apima skaidrios PNG perdangos sukūrimą, kuris gali būti naudojamas kaip kaukė / rėmelis aplink įprastą JPEG ar GIF. Tokiu būdu galima sukonfigūruoti įprastą TVS diegimą, kad vartotojai galėtų įkelti nuotraukas, nesijaudindami, kad naudosdami bet kokią grafikos programą filtrams taikyti.

Png-overlay-image-styling-fonai-išvaizda-įkvėpimas-pridėti-šešėlis-kraštai-padaryti vaizdus-išsiskirti

18.

„BeZoom“

Lengvas

JQuery

Mastelio papildinys

„BeZoom“ yra paprasta ir lengva alternatyva „JQZoom“. Jis lengvesnis ir juo lengviau naudotis.

„Bezoom“ - lengvas „jquery-zoom“ įskiepis - vaizdo stiliaus stilius - išvaizda-įkvėpimas-pridėti-šešėlis-kraštai-padaryti vaizdus-išsiskirti

19.

„JQuery“ naudojimas fono paveikslėlių animacijoms

Žaiskite su „jQuery“ ir pakeiskite fono paveikslėlio padėtį, kad sukurtumėte ieškomo efekto tipą. Yra naujas straipsnis, kuriame atsakoma į „Kaip elgtis su aktyviomis būsenomis?“ - „JQuery“ animuotų fonų aktyvios būsenos tvarkymas.

Naudojant „jquery-for-background-image-animations-image-style-backgrounds-look-inspiration-add-shadow-border-make-images-stand-out“

20.

5 būdai, kaip pagardinti vaizdus naudojant CSS

Čia yra keletas paprastų gudrybių, suteikiančių skonį jūsų tipiškiems švelniems vaizdams. Kiekvieno vaizdo stiliaus naudojimas „Photoshop“ gali būti nuobodus ir ilgainiui sunkiai prižiūrimas. Šie CSS metodai padės jums sumažinti tą skausmą.

Vaizdų pagardinimo būdai su „css“ vaizdo stiliaus modeliais-išvaizda-įkvėpimas-pridėti-šešėlių-kraštai-padaryti vaizdus-išsiskirti

21.

Kaip:

Galima pakeisti

Fono paveikslėlio

Sužinokite, kaip nustatyti keičiamo dydžio fono paveikslėlį naudojant CSS. Galite rinktis iš 3 variantų.

Kaip pakeisti dydį-fono paveikslėlio stilius-fonai-išvaizda-įkvėpimas-pridėti-šešėlį-kraštus-padaryti-vaizdus-išsiskirti

22.

Stiliuokite savo vaizdo nuorodas

Geriausia informuoti vartotojus, kad tam tikrą mūsų svetainės skyrių reikia spustelėti, pasiekti pelės žymėjimo efektu. Tose „spustelėjamose“ skiltyse tikrai yra turinio vaizdų. „Image Link“ yra scenarijus, leidžiantis pritaikyti papildomą vaizdo nuorodų stilių.

Stilius-jūsų-vaizdas-nuorodos-vaizdo stiliaus stilius-fonai-išvaizda-įkvėpimas-pridėti-šešėlio-kraštai-padaryti vaizdus-išsiskirti

23.

Keli foniniai vaizdai su CSS

Kartais prasmingiau naudoti fono paveikslėlius, nei juos įterpti tiesiai į puslapį. Nors kiekvienas elementas, kaip ir jūsų kūno žyma, gali turėti tik vieną fono vaizdą, jis gali būti pritaikytas keliems elementams.

Keli fono vaizdai su „css“ vaizdu-stiliaus fonai-išvaizda-įkvėpimas-pridėti-šešėlį-kraštus-padaryti-vaizdus-išsiskirti

24.

Vaizdo kraštinės su CSS

Tikrai lengva pamoka, parodanti, kaip pridėti tvirtą vaizdų kraštą naudojant CSS.

„Image-border-with-css-image-styling-fonai-išvaizda-įkvėpimas-pridėti-šešėlis-border-make-images-stand-out“

25.

CSS „Sprites“ nenaudojant foninių vaizdų

Sužinokite, kaip pritaikyti pelės žymeklio efektą, neturint daug žinių apie CSS įrašus.

CSS-sprites-nenaudojant fono vaizdų-vaizdo stiliaus-fonų-išvaizdos-įkvėpimo-pridėti-šešėlių-kraštų-padaryti vaizdus-išsiskirti


Straipsnio turinys atitinka mūsų principus redakcijos etika. Norėdami pranešti apie klaidą, spustelėkite čia.

Būkite pirmas, kuris pakomentuos

Palikite komentarą

Jūsų elektroninio pašto adresas nebus skelbiamas. Privalomi laukai yra pažymėti *

*

*

  1. Atsakingas už duomenis: Miguel Ángel Gatón
  2. Duomenų paskirtis: kontroliuoti šlamštą, komentarų valdymą.
  3. Įteisinimas: jūsų sutikimas
  4. Duomenų perdavimas: Duomenys nebus perduoti trečiosioms šalims, išskyrus teisinius įsipareigojimus.
  5. Duomenų saugojimas: „Occentus Networks“ (ES) talpinama duomenų bazė
  6. Teisės: bet kuriuo metu galite apriboti, atkurti ir ištrinti savo informaciją.