Kada poboljšavamo slike, možemo to učiniti pomoću Photoshopa, a zatim ga montirati na web stranicu ili također možemo odabrati opciju B: učinite to s dostupnim HTML, CSS i Javascript tehnikama.
Nakon skoka, postoje mnoge tehnike za poboljšanje slika, gotovo sve napravljene s jQueryjem kao glavnom bazom ili sa CSS3 iskorištavajući najnovije web standarde, premda 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 | 1.WD
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 s CSS-om 2.1
Naučite kako koristiti CSS 2.1 pseudo-elemente za pružanje do 3 pozadinska platna, 2 prezentacijske slike fiksne veličine i više složenih obruba za jedan HTML element.
3.
Kratki savjet: Višestruki obrubi s jednostavnim CSS-om
Brzi prijenos slike koji vam pokazuje kako postići više obruba 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čki dimenzioniranim elementima s CSS2
Treća verzija Nicholas Gallagher pokazujući vam što učiniti ako nemate veličinu elementa.
5.
Zabavite se s obrubom - ukošeni, prešani i još mnogo toga!
Naučite kako postići utisnuti efekt pomoću CSS-a i nekoliko jednostavnih trikova u obliku obruba kako biste dobili razne efekte.
6.
Polaroidi sa CSS3
Naučite kako koristiti neke izvrsne CSS2 i CSS3 za pretvaranje inače neuglednog popisa slika u cjeloviti set polaroid slika.
7.
Savršena pozadinska slika na cijeloj stranici
Naučite kako dodati pozadinsku sliku s CSS-om koja ispunjava cijelu stranicu slikom, nema praznog prostora, po potrebi skalira sliku, ne uzrokuje pomične trake i još mnogo toga.
8.
CSS3 Box Shadow i Image Hover Effects
Istražite novi način dodavanja efekata sjene samo uređivanjem stilskog lista.
9.
Elegantni efekt lebdenja minijature w / jQuery
Postignite uredan efekt bljeskalice s CSS-om i jQueryjem.
10.
Kako stvoriti jednostavan CSS efekt prenošenja slike
U ovom ćete tutorialu naučiti kako stvoriti jednostavan efekt prevrtanja 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, gumbi za slijedeće i natrag, galerije slika, ugrađeni popisi i rasporedi s više stupaca. Pogledajte 4 vodiča posvećena plutajućim slikama.
12.
Snazzy efekti lebdenja pomoću CSS-a
U ovom ćete uputstvu prelaziti na stvaranje fleksibilnih naprednih tehnika lebdenja pomoću svojstava CSS2.1.
13.
Brza prevrtanja bez
Predučitavanje
Kada koristite prevrtanje 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že dinamičke promjene i ne zahtijeva prethodno učitavanje.
14.
jQuery zaobljeni kutovi
Mnogo jQuery efekata za zaobljene kutove 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
Dodatak jQuery
Superzided je dodatak jQuery koji mijenja veličinu slika radi popunjavanja preglednika, a istovremeno održava omjer dimenzija slike i ciklusom slika / pozadina putem prezentacije s prijelazima i predopterećenjem.
17.
PNG prekrivač
Jeste li ikad naišli na problem stvaranja web stranice sa slikama koje je dao klijent, da biste kasnije pronašli nakon što ažuriraju svoje fotografije, izvorni izgled i dojam nisu zadržani? Ovo rješenje uključuje stvaranje prozirnog PNG prekrivača koji se može koristiti kao maska / okvir oko uobičajenog JPEG-a ili GIF-a. Na taj se način može konfigurirati tipična CMS instalacija tako da korisnici mogu prenositi fotografije bez potrebe da se brinu o korištenju bilo kojeg grafičkog programa za primjenu filtara.
18.
BeZoom
Lagana
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 kojima ćete dodati malo okusa 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 tu bol.
21.
Kako da:
Promjenjiva veličina
Pozadina slike
Naučite kako postaviti pozadinsku sliku veličine koja se može promijeniti s CSS-om. Možete odabrati između 3 mogućnosti.
22.
Oblikujte svoje veze na slike
Davanje do znanja korisnicima da određeni odjeljak naše web stranice treba kliknuti najbolje je postići efektom prelaska mišem. Oni odjeljci koji se mogu kliknuti uključuju slike sadržaja. Image Link je skripta koja vam omogućuje primjenu dodatnog stila na vaše veze na slike.
23.
Više pozadinskih slika s CSS-om
Ponekad je logičnije koristiti pozadinske slike nego ih umetnuti izravno na stranicu. I dok svaki element - poput oznake vašeg tijela - može sadržavati samo jednu pozadinsku sliku, može se primijeniti na nekoliko elemenata.
24.
Slika se graniči s CSS-om
Stvarno jednostavan vodič koji vam pokazuje kako dodati čvrsti obrub slikama pomoću CSS-a.
25.
CSS Sprites bez upotrebe pozadinskih slika
Naučite kako primijeniti efekt lebdenja bez puno znanja o CSS spritovima.
