Kada poboljšavamo slike, možemo odabrati da to učinimo pomoću Photoshopa, a zatim ga montiramo na web stranicu ili takođe možemo odabrati opciju B: uradite to s dostupnim HTML, CSS i Javascript tehnikama.
Nakon skoka, postoji mnogo tehnika za poboljšanje slika, gotovo sve napravljene sa jQuery-jem kao glavnom bazom ili sa CSS3 iskorištavanjem najnovijih web standarda, iako vas podsjećam da u tom slučaju gubimo kompatibilnost s nekim preglednicima.
Oni su na engleskom, ali uhvaćeni su u letu, obećali su :)
Izvor | 1stWD
CSS3 zaokružena slika s jQueryjem
Naučite omotati oznaku raspona oko elementa slike kako biste postigli zaobljene slike koje će se prikazivati u svim modernim preglednicima.
2.
Više pozadina i granica sa CSS-om 2.1
Naučite kako koristiti CSS 2.1 pseudo-elemente za pružanje do 3 pozadine platna, 2 prezentacijske slike fiksne veličine i više složenih obruba za jedan HTML element.
3.
Kratki savjet: Višestruke granice sa jednostavnim CSS-om
Brzi screencast prikazuje vam kako postići višestruke obrube jednostavnim CSS-om na taj način dodajući veću dubinu svojim dizajnom. Mnogo jednostavnija verzija prethodnog vodiča.
4.
Višestruki obrubi na dinamičkim elementima sa CSS2
Treća verzija Nicholas Gallagher pokazuje vam šta da radite ako nemate veličinu elementa.
5.
Zabavite se s obrubom - Beveled, Pressed i još mnogo toga!
Naučite kako postići pritisnuti efekt pomoću CSS-a i nekoliko jednostavnih trikova u stilu obruba kako biste dobili razne efekte.
6.
Polaroidi sa CSS3
Naučite kako koristiti neke fantastične CSS2 i CSS3 da biste inače neuglednu listu slika pretvorili u potpuno razvijen polaroidni skup slika.
7.
Savršena pozadinska slika na cijeloj stranici
Naučite kako dodati pozadinsku sliku sa CSS-om koja ispunjava cijelu stranicu slikom, bez praznog prostora, po potrebi skalira sliku, ne uzrokuje klizače i još mnogo toga.
8.
CSS3 Box Shadow i Image Hover Effects
Istražite novi način dodavanja efekata sjene samo uređivanjem tabele stilova.
9.
Elegantni efekt prelaska mišem na minijaturi w / jQuery
Postignite uredan efekt u stilu blica uz CSS i jQuery.
10.
Kako stvoriti jednostavan CSS efekt prenošenja slike
U ovom vodiču naučit ćete kako stvoriti jednostavan efekt prebacivanja CSS slike s osnovnim HTML i CSS stilom.
11.
tutorial
Floatutorial vas vodi kroz osnove plutajućih elemenata kao što su slike, padajuće kapice, dugmad za slijedeće i nazad, galerije slika, redovi u redovima i rasporedi u više stupaca. Pogledajte 4 vodiča posvećena plutajućim slikama.
12.
Snazzy efekti lebdenja pomoću CSS-a
U ovom vodiču preći ćete na stvaranje fleksibilnih naprednih tehnika lebdenja pomoću CSS2.1 svojstava.
13.
Brza prevrtanja bez
Unaprijed učitati
Kada koristite prebacivanje CSS slika, moraju se učitati dvije, tri ili više slika (i često se moraju unaprijed učitati za najbolje rezultate). Naučite kako staviti sva stanja u jednu sliku bržim dinamičkim promjenama i ne zahtijeva prethodno učitavanje.
14.
jQuery zaobljeni kutovi
Mnogo jQuery efekata za zaobljene uglove i mnogo više uzoraka.
15.
Najlakši opis alata i pregled slika pomoću jQueryja
Pogledajte 3 primjera korištenja jQuery skripte za prevrtanje. Ova jednostavna skripta može se primijeniti u razne svrhe.
16.
Supersized - Pozadina cijelog zaslona /
Slideshow
jQuery dodatak
Superzided je dodatak jQuery koji mijenja veličinu slika kako bi ispunio preglednik, a da pritom održava omjer dimenzija slike i ciklizuje slike / pozadine putem prezentacije s prijelazima i predučitavanjem.
17.
PNG prekrivač
Jeste li ikada naišli na problem stvaranja web stranice sa slikama koje je dao klijent, da biste kasnije pronašli nakon što ažuriraju svoju fotografiju, izvorni izgled i dojam se ne zadržavaju? Ovo rješenje uključuje stvaranje prozirnog PNG prekrivača koji se može koristiti kao maska / okvir oko uobičajenog JPEG ili GIF-a. Na taj se način može konfigurirati tipična CMS instalacija tako da korisnici mogu slati fotografije bez potrebe da koriste bilo koji grafički program za primjenu filtara.
18.
BeZoom
Lakša težina
jQuery
Dodatak za zumiranje
BeZoom je jednostavna i lagana alternativa za JQZoom. Lakši je i lakši za upotrebu.
19.
Korištenje jQuery-ja za animacije pozadinske slike
Igrajte se s jQueryem i promijenite položaj pozadinske slike kako biste stvorili vrstu efekta koji tražite. Postoji novi članak koji odgovara "Kako se nositi s aktivnim stanjima?" - Rukovanje aktivnim stanjem za jQuery animirane pozadine.
20.
5 načina da začinite svoje slike CSS-om
Evo nekoliko jednostavnih trikova kako biste dodali malo ukusa svojim tipičnim nepristojnim slikama. Korištenje Photoshopa za oblikovanje svake slike može biti zamorno i dugoročno teško održavati. Sljedeće CSS tehnike pomoći će vam da ublažite bol.
21.
Kako:
Promenljiv
Pozadinska slika
Naučite kako postaviti pozadinsku sliku veličine koja se može promijeniti pomoću CSS-a. Na raspolaganju su vam 3 opcije.
22.
Oblikujte veze sa slikama
Obavještavanje korisnika da određeni odjeljak naše web stranice treba kliknuti na njega najbolje je postići efektom prelaska mišem. Ti odjeljci koji se mogu kliknuti uključuju slike sadržaja. Image Link je skripta koja vam omogućava da primijenite dodatni stil na vaše veze sa slikama.
23.
Više slika u pozadini sa CSS-om
Ponekad je logičnije koristiti pozadinske slike nego ih umetnuti direktno na stranicu. I dok svaki element - poput oznake vašeg tijela - može sadržavati samo jednu pozadinsku sliku, oni se mogu primijeniti na nekoliko elemenata.
24.
Slika se graniči sa CSS-om
Stvarno jednostavan vodič koji vam pokazuje kako dodati pune obrube slikama pomoću CSS-a.
25.
CSS Sprites bez upotrebe pozadinskih slika
Naučite kako primijeniti efekt lebdenja bez puno znanja o CSS spritovima.
