Ko gre za izboljšanje slik, se lahko odločimo, da to storimo s Photoshopom in ga nato namestimo na spletno stran ali pa izberemo tudi možnost B: to storite s tehnikami HTML, CSS in Javascript, ki so na voljo.
Po skoku je na voljo veliko tehnik za izboljšanje slik, skoraj vse pa so narejene z jQuery kot glavno osnovo ali s CSS3 izkoriščanje najnovejših spletnih standardov, čeprav vas opozarjam, da v tem primeru izgubimo združljivost z nekaterimi brskalniki.
So v angleščini, vendar so ujeti na poti, obljubljeno :)
Vir | 1.WD
CSS3 zaokrožena slika z jQuery
Naučite se zaviti oznako razpon okoli elementa slike, da dosežete zaobljene slike, ki bodo prikazane v vseh sodobnih brskalnikih.
2.
Več ozadij in meja s CSS 2.1
Naučite se uporabljati psevdoelemente CSS 2.1, da zagotovite do 3 platna v ozadju, 2 predstavitveni sliki s fiksno velikostjo in več zapletenih robov za en element HTML.
3.
Hitri nasvet: Več obrob s preprostim CSS
Hitri zaslon prikazuje, kako s preprostim CSS-jem na ta način dosežete več meja, tako da svojim modelom dodate več globine. Precej enostavnejša različica prejšnje vadnice.
4.
Več obrob na dinamično spremenjenih elementih s CSS2
Tretja različica Nicholas Gallagher vam pokaže, kaj storiti, če niste v velikosti elementa.
5.
Zabavajte se z mejami - poševno, stisnjeno in še več!
Naučite se, kako doseči pritisnjeni učinek s CSS in nekaj preprostih trikov v obliki obrobe, da dobite različne učinke.
6.
Polaroidi s CSS3
Naučite se, kako z nekaj izjemnih CSS2 in CSS3 spremenite sicer skromen seznam slik v popoln nabor polaroidnih slik.
7.
Popolna ozadja celotne strani
Naučite se dodati sliko za ozadje s CSS, ki zapolni celotno stran s sliko, brez praznega prostora, po potrebi prilagodi sliko, ne povzroča drsnih trakov in še veliko več.
8.
CSS3 Box Shadow in Image Hover Effects
Raziščite nov način dodajanja senčnih učinkov samo z urejanjem slogovnega lista.
9.
Elegantni učinek sličice na miškin kazalec w / jQuery
Dosezite čeden učinek bliskavice s CSS in jQuery.
10.
Kako ustvariti preprost učinek prenašanja slik CSS
V tej vadnici boste izvedeli, kako ustvariti preprost učinek prevračanja slike CSS z osnovnim slogom HTML in CSS.
11.
vadnica
Floatutorial vas popelje skozi osnove plavajočih elementov, kot so slike, kapice, gumbi za naprej in nazaj, galerije slik, vstavljeni seznami in postavitve v več stolpcih. Oglejte si 4 vadnice, namenjene plavajoči sliki.
12.
Snazzy Hover Effects z uporabo CSS
V tej vadnici boste nadaljevali z ustvarjanjem prilagodljivih naprednih tehnik lebdenja z uporabo lastnosti CSS2.1.
13.
Hitra prevračanja brez
Prednaloži
Pri uporabi prenašanja slik CSS je treba naložiti dve, tri ali več slik (in za najboljše rezultate jih je treba pogosto prednaložiti). Naučite se, kako postaviti vsa stanja v eno sliko, hitreje spreminja dinamiko in ne zahteva prednalaganja.
14.
jQuery zaobljeni vogali
Veliko efektov jQuery za zaobljene vogale in veliko več vzorcev.
15.
Najlažji namig in predogled slike z uporabo jQuery
Oglejte si 3 primere uporabe skripta za predogled jQuery. Ta preprost skript se lahko uporablja za različne namene.
16.
Velik - celozaslonsko ozadje /
predvajanje
vtičnik jQuery
Superzided je vtičnik jQuery, ki spreminja velikost slik, da zapolni brskalnik, hkrati pa ohranja razmerje dimenzij slike in prek diaprojekcije s prehodi in prednalaganjem ciklira slike / ozadja.
17.
Prekrivanje PNG
Ste že kdaj naleteli na težavo pri ustvarjanju spletnega mesta s slikami, ki jih je dal naročnik, šele kasneje, ko posodobijo svojo fotografijo, ugotovijo, da prvotni videz in občutek ni ohranjen? Ta rešitev vključuje ustvarjanje prosojnega prosojnice PNG, ki se lahko uporablja kot maska / okvir okoli običajnega JPEG ali GIF. Tako je mogoče konfigurirati tipično namestitev sistema za upravljanje vsebin, tako da lahko uporabniki nalagajo fotografije, ne da bi morali skrbeti, da bi uporabili kateri koli grafični program za uporabo filtrov.
18.
BeZoom
Lahka
JQuery
Vtičnik za povečavo
BeZoom je preprosta in lahka alternativa za JQZoom. Je lažji in lažji za uporabo.
19.
Uporaba jQuery za animacije slike v ozadju
Igrajte se z jQuery in spremenite položaj slike v ozadju, da ustvarite vrsto učinka, ki ga iščete. Obstaja nov članek, v katerem je odgovor: "Kako ravnam z aktivnimi stanji?" - Obravnava aktivnega stanja za animirana ozadja jQuery.
20.
5 načinov za popestritev slik s CSS
Tu je nekaj preprostih trikov, s katerimi lahko svojim tipičnim nenavadnim slikam dodate nekaj okusa. Uporaba Photoshopa za oblikovanje posamezne slike je dolgočasno in težko vzdrževati. Naslednje tehnike CSS vam bodo pomagale olajšati bolečino.
21.
Kako:
Velikost velikosti
Ozadje slike
Naučite se nastaviti sliko CSS za sliko v ozadju. Izbirate lahko med 3 možnostmi.
22.
Oblikujte svoje slikovne povezave
Dajanje uporabnikom vedeti, da je določen del našega spletnega mesta namenjen kliku, je najbolje doseči z učinkom miške. Ti »klikljivi« odseki zagotovo vključujejo vsebinske slike. Image Link je skript, ki vam omogoča, da na povezave do slike uporabite dodaten slog.
23.
Več slik v ozadju s CSS
Včasih je bolj smiselno uporabiti slike za ozadje kot pa jih vstaviti neposredno na stran. In čeprav lahko vsak element - tako kot vaša telesna oznaka - vsebuje samo eno sliko v ozadju, jih je mogoče uporabiti za več elementov.
24.
Slika meji na CSS
Zelo enostavna vadnica, ki vam pokaže, kako slikam s pomočjo CSS dodati neprekinjeno obrobo.
25.
CSS Sprite brez uporabe slik v ozadju
Naučite se, kako uporabiti učinek lebdenja brez veliko znanja o spritevih CSS.
