Awọn Tutorial 25 lati ṣe ilọsiwaju awọn aworan pẹlu CSS ati jQuery

Css-3-apoti-ojiji-aworan-rababa-awọn ipa-aworan-ṣiṣe awọn abẹlẹ-irisi-awokose-ṣafikun-awọn aala-ṣe-awọn aworan-duro

Nigbati a ba n mu awọn aworan dara si a le yan lati ṣe pẹlu Photoshop ati lẹhinna gbe e sori oju-iwe wẹẹbu tabi a tun le yan aṣayan B: ṣe pẹlu HTML, CSS ati awọn imuposi Javascript ti o wa.

Lẹhin ti o fo awọn imọ-ẹrọ pupọ lo wa lati mu awọn aworan dara si, o fẹrẹ to gbogbo wọn ṣe pẹlu jQuery bi ipilẹ akọkọ tabi pẹlu CSS3 ni anfani awọn ipolowo wẹẹbu tuntun, botilẹjẹpe Mo leti si ọ pe ni ọran yẹn a padanu ibaramu pẹlu diẹ ninu awọn aṣawakiri.

Wọn wa ni ede Gẹẹsi ṣugbọn wọn mu wọn lori fifo, ṣe ileri :)

Orisun | 1stWD

CSS3 Yika Aworan Pẹlu jQuery

Kọ ẹkọ lati fi ami si ami igba kan ni ayika ẹya aworan lati ṣaṣeyọri awọn aworan yika eyiti yoo han ni ẹtọ ni gbogbo awọn aṣawakiri igbalode.

Css-3-round-image-with-jquery-image-hover-effects-image-styling-backgrounds-irisi-awokose-fi-ojiji awọn aala-ṣe-awọn aworan-imurasilẹ

2.

Ọpọlọpọ Awọn abẹlẹ ati Awọn aala pẹlu CSS 2.1

Kọ ẹkọ bii o ṣe le lo awọn eroja afarape CSS 2.1 lati pese to awọn canvases isale 3, awọn aworan igbekalẹ iwọn ti o wa titi 2, ati awọn aala ti eka pupọ fun eroja HTML kan.

Ọpọlọpọ awọn abẹlẹ-awọn aala-css-2-aworan-ti aṣa-awọn ẹhin-irisi-awokoye-ṣafikun-awọn aala-ṣe-awọn aworan-duro-jade

3.

Atokun ni kiakia: Awọn aala lọpọlọpọ pẹlu CSS Simple

Iboju iboju ni kiakia ti n fihan ọ bi o ṣe le ṣaṣeyọri awọn aala pupọ pẹlu CSS ti o rọrun ni ọna yẹn nfi ijinle diẹ sii si awọn apẹrẹ rẹ. Ẹya simplier pupọ ti ikẹkọ ti tẹlẹ.

Awọn aala-pupọ-pupọ-awọn aala-pẹlu-rọrun-css-aworan-sisọ-awọn ẹhin-irisi-awokose-ṣafikun-aala-awọn aala-ṣe-awọn aworan-duro-jade

4.

Ọpọlọpọ Awọn aala lori Awọn eroja Iwọn Dynamically pẹlu CSS2

Kẹta ti ikede Nicholas Gallagher n ṣe afihan ohun ti o le ṣe ti o ko ba ni iwọn eroja.

Awọn aala pupọ-ni agbara-iwọn awọn eroja-pẹlu-css-2-aworan-ṣiṣe awọn abẹlẹ-irisi-awokose-ṣafikun-awọn aala-ojiji-ṣe awọn aworan-imurasilẹ

5.

Ni Igbadun w / Awọn aala - Beveled, Te, & Diẹ sii!

Kọ ẹkọ bii o ṣe le ṣaṣeyọri ipa ti a tẹ pẹlu CSS ati diẹ ninu awọn ẹtan ara aala ti o rọrun lati ni ọpọlọpọ awọn ipa.

Ni-fun-pẹlu-awọn aala-beveled-tẹ-diẹ sii-aworan-aṣa-lẹhin-irisi-awokose-fi kun awọn iboji ojiji-ṣe-awọn aworan-duro-jade

6.

Polaroids pẹlu CSS3

Kọ ẹkọ bii o ṣe le lo diẹ ninu ẹru CSS2 ati CSS3 lati yi atokọ bibẹkọ ti atokọ atokọ ti awọn aworan sinu ipilẹ kikun ti awọn aworan Polaroid.

Polaroids-css-3-image-styling-backgrounds-irisi-awokose-fi-ojiji awọn aala-ṣe-awọn aworan-duro-jade

7.

Pipe Oju-iwe Atilẹyin Ni kikun

Kọ ẹkọ bi o ṣe le ṣafikun aworan isale pẹlu CSS ti o kun gbogbo oju-iwe pẹlu aworan, ko si aaye funfun, aworan irẹjẹ bi o ṣe nilo, ko fa awọn iwe-ikawe ati pupọ diẹ sii.

Pipe-oju-iwe-kikun-aworan-rababa-awọn ipa-ṣiṣe aworan-awọn ẹhin-irisi-awokose-ṣafikun-awọn aala-ojiji-ṣe awọn aworan-duro-jade

8.

Ojiji Ojiji CSS3 ati Awọn Ipa Rababa Aworan

Ṣawari ọna tuntun ti fifi awọn ipa ojiji ojiji silẹ silẹ nipasẹ ṣiṣatunkọ iwe ara kan.

Css-3-apoti-ojiji-aworan-rababa-awọn ipa-aworan-ṣiṣe awọn abẹlẹ-irisi-awokose-ṣafikun-awọn aala-ṣe-awọn aworan-duro

9.

Fancy eekanna atanpako Rababa Ipa w / jQuery

Ṣe aṣeyọri ipa-ọna filasi ti o dara pẹlu CSS ati jQuery.

Fancy-thumbnail-hover-effect-with-jquery-image-styling-backgrounds-irisi-awokose-fi-ojiji awọn aala-ṣe-awọn aworan-duro-jade

10.

Bii O ṣe le Ṣẹda Ipa Yiyi Aworan CSS Rọrun

Ninu ẹkọ yii iwọ yoo kọ bi o ṣe le ṣẹda ipa iyipo aworan CSS ti o rọrun pẹlu HTML ipilẹ ati aṣa CSS.

Bawo-lati-ṣẹda-css-aworan-yiyi-ipa-ipa-aworan-rababa-awọn ipa-aworan-awọn ipilẹṣẹ-irisi-awokose-fi kun-aala-awọn aala-ṣe-awọn aworan-imurasilẹ

11.

Ilẹ oju omi

Floatutorial gba ọ nipasẹ awọn ipilẹ ti awọn eroja lilefoofo bii awọn aworan, awọn bọtini fifọ silẹ, atẹle ati awọn bọtini ẹhin, awọn àwòrán aworan, awọn atokọ laini ati awọn ipa-iwe pupọ. Ṣayẹwo awọn itọnisọna 4 ti a ṣe igbẹhin si lilefoofo aworan.

Floatutorial-image-styling-backgrounds-irisi-awokose-fi-ojiji awọn aala-ṣe-awọn aworan-duro-jade

12.

Awọn ipa Snazzy Rababa Lilo CSS

Ninu ẹkọ yii, iwọ yoo kọja lori ṣiṣẹda awọn imuposi iṣipopada rọ rọ ni lilo awọn ohun-ini CSS2.1.

Snazzy-rababa-ipa-lilo-css-aworan-sisọ-awọn ẹhin-irisi-awokose-ṣafikun-awọn aala-ojiji-ṣe awọn aworan-duro-jade

13.

Awọn yipo Yiyara Laisi

Ṣaaju

Nigbati o ba nlo awọn yiyi aworan CSS, awọn aworan meji, mẹta, tabi diẹ ẹ sii gbọdọ wa ni fifuye (ati pe igbagbogbo ni a ṣajọ fun awọn esi to dara julọ). Kọ ẹkọ bii o ṣe le fi gbogbo awọn ipinlẹ sinu aworan kan jẹ ki awọn ayipada daadaa yiyara ati pe ko nilo iṣaaju.

Awọn iyipo-sare-laisi preload-aworan-ṣiṣe awọn aṣa-lẹhin-irisi-awokoye-ṣafikun-awọn aala-ṣe-awọn aworan-duro-jade

14.

jQuery Awọn igun ti a yika

Ọpọlọpọ awọn ipa jQuery fun awọn igun yika ati awọn ilana pupọ diẹ sii.

Awọn iyipo-jquery-image-styling-backgrounds-irisi-awokose-fi-ojiji awọn aala-ṣe-awọn aworan-duro-jade

15.

Irọrun irinṣẹ ati Awotẹlẹ Aworan Lilo jQuery

Wo awọn apẹẹrẹ 3 ti lilo afọwọkọ awotẹlẹ rollover jQuery. Iwe afọwọkọ yii ti o rọrun le ṣee lo fun awọn idi pupọ.

Aṣayan irinṣẹ-rọrun-awotẹlẹ-lilo-jquery-aworan-sisọ-awọn ẹhin-irisi-awokose-ṣafikun-awọn aala-ojiji-ṣe awọn aworan-duro-jade

16.

Supersized - Atilẹyin Iboju kikun /

agbelera

jQuery Ohun itanna

Superzided jẹ ohun itanna jQuery ti o ṣe iwọn awọn aworan lati kun ẹrọ aṣawakiri lakoko mimu ipin iwọn aworan ati awọn iyika Awọn aworan / awọn abẹlẹ nipasẹ agbelera pẹlu awọn itejade ati gbigba tẹlẹ.

Supersized-full-screen-background-slideshow-jwuery-plugin-image-styling-backgrounds-irisi-awokose-fi-ojiji awọn aala-ṣe-awọn aworan-duro-jade

17.

PNG Apọju

Njẹ o ti lọ sinu iṣoro ti ṣiṣẹda aaye kan pẹlu awọn aworan ti alabara fun, nikan lati wa nigbamii lẹhin ti wọn ṣe imudojuiwọn fọtoyiya oju-ara atilẹba ati rilara ko ni idaduro? Ojutu yii ni ṣiṣẹda ṣiṣere PNG ti o han gbangba eyiti o le ṣee lo bi iboju / fireemu ni ayika JPEG tabi GIF deede. Ni ọna yii, fifi sori ẹrọ CMS aṣoju le jẹ tunto ki awọn olumulo le ṣe ikojọpọ awọn fọto laisi nini wahala nipa lilo eyikeyi eto awọn aworan lati lo awọn awoṣe.

Png-overlay-image-styling-backgrounds-irisi-awokose-fi-ojiji awọn aala-ṣe-awọn aworan-duro-jade

18.

BeZoom

Iwuwo

Ìbòmọlẹ

Sisọ Itanna

BeZoom jẹ yiyan ti o rọrun ati iwuwo fẹẹrẹ fun JQZoom. O fẹẹrẹfẹ ati pe o rọrun lati lo.

Bezoom-lightweight-jquery-zoom-plugin-plugin-image-styling-backgrounds-irisi-awokose-fi-ojiji awọn aala-ṣe-awọn aworan-duro-jade

19.

Lilo jQuery fun Awọn ohun idanilaraya Aworan Lẹhin

Mu ṣiṣẹ pẹlu jQuery ki o yipada ipo ti aworan abẹlẹ lati ṣẹda iru ipa ti o n wa. Nkan tuntun wa ti o dahun “Bawo ni MO ṣe le mu awọn ipinlẹ ti nṣiṣe lọwọ?” - Mimu Ipinle Ti nṣiṣe lọwọ fun Awọn ipilẹ ti ere idaraya jQuery.

Lilo-jquery-for-background-image-animations-image-styling-backgrounds-irisi-awokose-fi-ojiji awọn aala-ṣe-awọn aworan-duro-jade

20.

Awọn ọna 5 lati Spice Awọn aworan Rẹ pẹlu CSS

Eyi ni awọn ẹtan diẹ ti o rọrun lati ṣafikun adun diẹ si awọn aworan bland aṣoju rẹ. Lilo Photoshop si aṣa ara aworan kọọkan le jẹ irẹwẹsi ati nira lati ṣetọju ni igba pipẹ. Awọn ilana CSS wọnyi wọnyi yoo ṣe iranlọwọ fun ọ ni irọrun irora naa.

Awọn ọna-si-turari-soke-awọn aworan rẹ-pẹlu-css-aworan-ṣiṣe awọn abẹlẹ-irisi-awokose-fi kun awọn aala ojiji-ṣe-awọn aworan-duro-jade

21.

Bi o si:

Tunṣe tunṣe

Aworan ni abẹlẹ

Kọ ẹkọ bii o ṣe le ṣeto aworan isale iwọn pẹlu CSS. O ni awọn aṣayan 3 lati yan lati.

Bawo-si-resizeable-background-image-styling-backgrounds-irisi-awokose-fi-ojiji awọn aala-ṣe-awọn aworan-duro-jade

22.

Ara Awọn ọna asopọ Aworan Rẹ

Jẹ ki awọn olumulo mọ pe apakan pato ti oju opo wẹẹbu wa ni itumọ lati tẹ ni aṣeyọri ti o dara julọ nipasẹ asin lori ipa. Awọn apakan “ti o tẹ” ni esan pẹlu awọn aworan akoonu. Ọna asopọ Aworan jẹ iwe afọwọkọ kan ti o fun ọ laaye lati lo afikun ti aṣa si awọn ọna asopọ aworan rẹ.

Style-your-image-links-image-styling-backgrounds-irisi-awokose-fi-ojiji awọn aala-ṣe-awọn aworan-duro-jade

23.

Ọpọlọpọ Awọn aworan abẹlẹ pẹlu CSS

Ni awọn igba miiran, o jẹ oye diẹ sii lati lo awọn aworan abẹlẹ ju lati fi sii taara ni oju-iwe naa. Ati pe lakoko eroja kọọkan - bii ami ara rẹ - le mu aworan atẹhin kan nikan, wọn le lo si awọn eroja pupọ.

Awọn aworan pupọ-lẹhin-pẹlu-pẹlu-css-aworan-sisọ-awọn abẹlẹ-irisi-awokoye-ṣafikun-awọn aala-ṣe-awọn aworan-duro-jade

24.

Awọn aala Aworan pẹlu CSS

Tutorial ti o rọrun gangan ti o n fihan ọ bi o ṣe le fi aala ti o lagbara kun si awọn aworan nipa lilo CSS.

Awọn aala aworan-pẹlu-css-aworan-ṣiṣe awọn abẹlẹ-irisi-awokose-ṣafikun-awọn aala-ṣe-awọn aworan-duro-jade

25.

Awọn Sprites CSS laisi Lilo Awọn aworan abẹlẹ

Kọ ẹkọ bii o ṣe le lo ipa rababa laisi ọpọlọpọ oye nipa awọn sprites CSS.

Css-sprites-without-using-background-images-image-styling-backgrounds-irisi-awokose-fi-ojiji awọn aala-ṣe-awọn aworan-duro-jade


Awọn akoonu ti nkan naa faramọ awọn ilana wa ti awọn ilana olootu. Lati jabo aṣiṣe kan tẹ nibi.

Jẹ akọkọ lati sọ ọrọ

Fi ọrọ rẹ silẹ

Adirẹsi imeeli rẹ yoo ko le ṣe atejade.

*

*

  1. Lodidi fun data naa: Miguel Ángel Gatón
  2. Idi ti data naa: SPAM Iṣakoso, iṣakoso ọrọ asọye.
  3. Ofin: Iyọọda rẹ
  4. Ibaraẹnisọrọ data: Awọn data kii yoo ni ifọrọhan si awọn ẹgbẹ kẹta ayafi nipasẹ ọranyan ofin.
  5. Ibi ipamọ data: Alaye data ti o gbalejo nipasẹ Awọn nẹtiwọọki Occentus (EU)
  6. Awọn ẹtọ: Ni eyikeyi akoko o le ni opin, gba pada ki o paarẹ alaye rẹ.