25 tutorial CSS eta jQuery-rekin irudiak hobetzeko

CSS-3-box-shadow-image-overover-effects-image-styling-backgrounds-itxura-inspirazioa-gehitu-itzal-ertzak-irudiak-nabarmendu-gehitu

Irudiak hobetzeko orduan, Photoshop-ekin egitea aukeratu dezakegu eta ondoren web orrian muntatu edo B aukera ere aukeratu dezakegu: egin ezazu eskuragarri dauden HTML, CSS eta Javascript teknikekin.

Jauziaren ondoren irudiak hobetzeko teknika ugari daude, ia guztiak jQuery oinarri nagusi gisa edo CSS3rekin egindakoak. azken web estandarrak aprobetxatuz, nahiz eta gogoratzen dudan kasu horretan nabigatzaile batzuekin bateragarritasuna galtzen dugula.

Ingelesez daude baina hegan harrapatu dituzte, agindu dute :)

Iturria | 1.WD

CSS3 Irudi biribila jQuery-rekin

Ikasi span etiketa bat biltzen irudiaren elementuaren inguruan, arakatzaile moderno guztietan bertan erakutsiko diren irudi biribilduak lortzeko.

CSS-3-irudia-biribildua-jQuery-rekin-efektuak-irudiaren estilismoa-atzeko planoak-itxura-inspirazioa-itzal-ertzak gehitu-irudiak nabarmentzen ditu

2.

Atzeko plano eta ertz anitzak CSSrekin 2.1

Ikasi CSS 2.1 sasi-elementuak nola erabiltzen diren atzeko planoko 3 mihise, tamaina finkoko 2 aurkezpen irudi eta ertz konplexu ugari emateko HTML elementu bakar baterako.

Hainbat-atzeko plano-ertzak-css-2-irudi-estiloko-atzeko planoak-itxura-inspirazioa-gehitu-itzal-ertzak-irudiak-nabarmendu

3.

Aholku azkarra: CSS sinplea duten ertzak

Screencast bizkorra, CSS sinpleekin ertz anitz nola lortu modu horretan zure diseinuei sakontasun gehiago eransten erakusten dizu. Aurreko tutorialaren bertsio askoz errazagoa.

Quick-tip-multiple-border-simple-with-css-image-styling-backgrounds-itxura-inspirazioa-gehitu-itzal-ertzak-irudiak-nabarmendu

4.

Ertz anitz CSS2-rekin dinamikoki tamainatutako elementuetan

-Ren hirugarren bertsioa Nicholas Gallagher elementuaren tamaina ez baduzu zer egin behar den erakusten.

Hainbat ertz-dinamikoki-tamainako-elementuak-css-2-irudi-estiloko-atzeko planoak-itxura-inspirazioa-gehitu itzal-ertzak-irudiak nabarmentzen

5.

Have Fun w / Borders - Alakatuak, sakatuak eta gehiago!

Ikasi CSSrekin sakatutako efektua nola lortu eta hainbat efektu lortzeko muga estilo trikimailu sinple batzuk.

Have-fun-with-ertz-beveled-prentsatuak-gehiago-styling-backgrounds-itxura-inspirazioa-gehitu-itzal-ertzak-irudiak-nabarmentzeko

6.

Polaroideak CSS3rekin

Ikasi CSS2 eta CSS3 izugarri batzuk erabiltzen, bestela, itxura gabeko irudien zerrenda Polaroid argazki multzo oso bihurtzeko.

Polaroids-css-3-image-styling-backgrounds-itxura-inspirazioa-gehitu-itzal-ertzak-irudiak-nabarmentzen-gehitu

7.

Orrialde osoko atzeko planoaren irudi ezin hobea

Ikasi atzeko irudia nola gehitu orri osoa irudiz betetzen duen CSS-rekin, espazio zuririk gabe, irudia behar den neurrian eskalatzen duena, korritze barrarik eta askoz gehiago eragiten ez duena.

Perfektua-orrialde osoko atzeko planoaren irudia pasatzean efektuak irudiaren estilismoaren atzeko planoak itxura inspirazioa gehitu itzalen ertzak irudiak nabarmentzen ditu

8.

CSS3 Box Itzalaren eta Irudiaren gaineko efektuak

Arakatu itzal efektuak gehitzeko modu berri bat estilo orria editatuz.

CSS-3-box-shadow-image-overover-effects-image-styling-backgrounds-itxura-inspirazioa-gehitu-itzal-ertzak-irudiak-nabarmendu-gehitu

9.

Irudi txikiko pasatzearen efektua

Lortu flash estiloko efektu txukuna CSS eta jQuery-rekin.

Miniaturazko irudi txikia-efektua-jQuery-irudi-estiloa-atzeko planoak-itxura-inspirazioa-gehitu-itzal-ertzak-irudiak-nabarmentzen

10.

Nola sortu CSS irudi iraulketa efektu sinplea

Tutorial honetan CSS irudien iraulketa efektu sinplea nola sortzen den ikasiko duzu oinarrizko HTML eta CSS estiloekin.

Nola sortu simple-css-image-rollover-effect-image-hover-effects-image-styling-backgrounds-itxura-inspirazioa-itzal-ertzak-gehitu-irudiak-nabarmentzeko

11.

Floatutoriala

Floatutorial-ek elementu mugikorren oinarriak ezagutuko ditu, hala nola, irudiak, goitibeherak, hurrengo eta atzerako botoiak, irudi galeriak, lerro zerrendak eta zutabe anitzeko diseinuak. Ikusi irudi mugikorrei eskainitako 4 tutorial.

Floatutorial-irudia-estiloa-atzeko planoak-itxura-inspirazioa-gehitu-itzal-ertzak-irudiak-nabarmentzen

12.

Snazzy Hover Effects CSS erabiliz

Tutorial honetan, CSS2.1 propietateak erabiliz pasatzearen gaineko teknika malguak sortuko dituzu.

Snazzy-pasatzean-efektua-css-irudia-estiloko-atzeko planoak-itxura-inspirazioa-gehitu-itzal-ertzak-irudiak-nabarmentzen ditu

13.

Fast Rollovers gabe

Aurrez kargatu

CSS irudi mugimenduak erabiltzerakoan, bi, hiru edo gehiago irudi kargatu behar dira (eta askotan kargatu behar dira emaitza onenak lortzeko). Ikasi egoera guztiak irudi bakarrean nola jarri aldaketa dinamikoak azkarrago egiten ditu eta ez da aurrekargatu behar.

Aldaketa azkarrak-aurrekargatu gabe irudiaren estilismoko atzeko planoak itxura inspirazioa gehitu itzaleko ertzak irudiak nabarmentzeko

14.

jQuery txoko biribilduak

JQuery efektu asko izkin biribilduetarako eta eredu askoz gehiago lortzeko.

Txoko biribilduak-jquery-irudia-estiloko-atzeko planoak-itxura-inspirazioa-gehitu-itzal-ertzak-irudiak-nabarmentzeko

15.

Argibideen irudi eta aurrebista errazena jQuery erabiliz

Ikus jQuery rollover preview script erabiltzeko 3 adibide. Gidoi sinple hau hainbat helburuetarako aplika daiteke.

Erantzunik gabeko argibideak-aurrebista-jQuery-irudiaren estilizazio-atzeko planoak-itxura-inspirazioa-gehitu-itzal-ertzak-irudiak nabarmentzen ditu

16.

Gaindimentsioa - Pantaila osoko atzeko planoa /

Slideshow

jQuery Plugina

Superzided jQuery plugin bat da, irudien tamaina aldatzen duena, arakatzailea betetzeko irudien dimentsio erlazioa mantenduz eta irudiak / atzeko planoak diapositiba bidez trantsizioekin eta aurrez kargatuz.

Pantaila osoko pantaila osoko atzealdea-diaporama-jwuery-plugina-irudiaren estilismoa-atzeko planoak-itxura-inspirazioa-itzal-ertzak-irudiak nabarmentzen ditu

17.

PNG gainjartzea

Bezeroak emandako argazkiekin gune bat sortzearen arazorik izan al duzu inoiz, argazkilaritza eguneratu ondoren, jatorrizko itxura eta sentsazioa gordetzen ez dituzun aurkitzeko? Soluzio honek PNG gainjartze gardena sortzea dakar, JPEG edo GIF arrunten inguruan maskara / marko gisa erabil daitekeena. Horrela, CMS instalazio tipikoa konfigura daiteke, erabiltzaileek argazkiak igo ditzaten iragazkiak aplikatzeko edozein programa grafikoren erabilerarekin kezkatu beharrik izan gabe.

Png-overlay-image-styling-backgrounds-itxura-inspirazioa-gehitu-itzal-ertzak-irudiak-nabarmentzen

18.

BeZoom

Pisu txikia

JQuery

Zoom plugina

BeZoom alternatiba sinple eta arina da JQZoom. Arinagoa da eta errazagoa da erabiltzea.

Bezoom-arin-jQuery-zoom-plugin-irudia-estiloa-atzeko planoak-itxura-inspirazioa-gehitu-itzal-ertzak-irudiak-nabarmentzen

19.

JQuery erabiltzea atzeko planoko irudien animazioetarako

Jolastu jQuery-rekin eta aldatu atzeko planoko irudiaren bila, bilatzen ari zaren efektu mota sortzeko. Artikulu berri bat dago "Nola kudeatzen ditut egoera aktiboak?" - JQuery Animaziozko Atzeko Aktiboen Egoera kudeatzea.

JQuery erabiltzea atzeko planoko irudien animazioak irudien estilismoaren atzeko planoak itxura inspirazioa gehitu itzalen ertzak irudiak nabarmentzeko

20.

Zure moduak zure irudiak CSS-rekin gozatzeko 5 modu

Hona hemen trikimailu sinple batzuk zure irudi samur tipikoei zaporea emateko. Irudi bakoitza estilizatzeko Photoshop erabiltzea neketsua eta epe luzean mantentzea zaila izan daiteke. Honako CSS teknika hauek min hori arintzen lagunduko dizute.

Irudiak espeziatzeko-CSS-irudiekin-itxurak-itxura-inspirazioarekin-itzal-ertzak-irudiak-nabarmentzeko-gehitu.

21.

Nola:

tamaina aldatu

Atzeko planoko irudia

Ikusi tamaina handiko atzeko irudia CSS-rekin konfiguratzen. 3 aukera dituzu aukeran.

Atzeko planoaren irudiaren tamaina aldatzeko moduko itxura inspirazioa gehitu itzaleko ertzak irudiak nabarmentzeko

22.

Estilizatu zure irudien estekak

Erabiltzaileei jakinaraztea gure webguneko atal jakin bat klikatzeko pentsatuta dagoela saguaren gaineko efektuaren bidez lortzen dela. "Egin klik" atal horietan, zalantzarik gabe, edukien irudiak daude. Image Link zure irudi estekei estilo osagarria aplikatzeko aukera ematen duen script bat da.

Estilatu zure irudiaren estekak irudien estilismoaren atzeko planoak itxura inspirazioarekin itzalpeko ertzak gehitu irudiak nabarmentzeko

23.

Atzeko planoko irudi anitz CSSrekin

Batzuetan, zentzuzkoa da atzeko planoko irudiak erabiltzea zuzenean orrian txertatzea baino. Eta elementu bakoitzak - zure gorputzaren etiketak bezala - atzeko planoko irudi bakarra eduki dezakeen arren, hainbat elementutan aplika daitezke.

Hainbat-atzeko-irudiak-css-irudiak-estiloko-atzeko planoak-itxura-inspirazioa-gehitu-itzal-ertzak-irudiak-nabarmentzen dituzten

24.

Irudi ertzak CSSrekin

Oso erraza da CSS erabiliz irudiei ertz sendoa nola gehitu erakusten duen tutoriala.

Irudi-ertzak-css-irudi-estiloko-atzeko planoak-itxura-inspirazioa-gehitu-itzal-ertzak-irudiak-nabarmentzea

25.

CSS Sprites atzeko planoko irudiak erabili gabe

Ikasi pasatzearen efektua nola aplikatu CSS spriteei buruzko ezagutza handirik gabe.

CSS-Sprites-atzeko planoaren irudiak erabili gabe itxurak inspirazio-itzal-ertzak gehitu behar ditu irudiak nabarmentzeko


Artikuluaren edukia gure printzipioekin bat dator etika editoriala. Akats baten berri emateko egin klik hemen.

Idatzi lehenengo iruzkina

Utzi zure iruzkina

Zure helbide elektronikoa ez da argitaratuko.

*

*

  1. Datuen arduraduna: Miguel Ángel Gatón
  2. Datuen xedea: SPAM kontrolatzea, iruzkinen kudeaketa.
  3. Legitimazioa: Zure baimena
  4. Datuen komunikazioa: datuak ez zaizkie hirugarrenei jakinaraziko legezko betebeharrez izan ezik.
  5. Datuak biltegiratzea: Occentus Networks-ek (EB) ostatatutako datu-basea
  6. Eskubideak: Edonoiz zure informazioa mugatu, berreskuratu eta ezabatu dezakezu.