Pokiaľ ide o vylepšovanie obrázkov, môžeme sa rozhodnúť urobiť to pomocou Photoshopu a potom ho namontovať na webovú stránku alebo tiež zvoliť možnosť B: urobte to pomocou dostupných techník HTML, CSS a Javascript.
Po výskoku existuje veľa techník na vylepšenie obrázkov, takmer všetky vyrobené pomocou jQuery ako hlavnej základne alebo pomocou CSS3 využívať výhody najnovších webových štandardov, aj keď vám pripomínam, že v takom prípade stratíme kompatibilitu s niektorými prehľadávačmi.
Sú v angličtine, ale sú chytení za behu, sľúbili :)
Zdroj | 1.WD
Zaoblený obrázok CSS3 s jQuery
Naučte sa omotať okolo prvku obrázka značku rozpätia, aby ste dosiahli zaoblené obrázky, ktoré sa zobrazia priamo vo všetkých moderných prehliadačoch.
2.
Viaceré pozadia a hranice s CSS 2.1
Naučte sa, ako používať pseudoelementy CSS 2.1 na poskytnutie až 3 pláten na pozadí, 2 prezentačných obrázkov s pevnou veľkosťou a viacerých zložitých okrajov pre jeden element HTML.
3.
Rýchly tip: Viacnásobné ohraničenie pomocou jednoduchého CSS
Rýchly screencast, ktorý vám ukáže, ako dosiahnuť viacnásobné orámovanie pomocou jednoduchých CSS, ktoré tak dodajú vašim návrhom väčšiu hĺbku. Oveľa jednoduchšia verzia predchádzajúceho tutoriálu.
4.
Viacnásobné ohraničenie na prvkoch s dynamickou veľkosťou pomocou CSS2
Tretia verzia Nicholas Gallagher vám ukáže, čo máte robiť, ak nemáte veľkosť prvku.
5.
Bavte sa s hranicami - skosené, stlačené a ďalšie!
Naučte sa, ako dosiahnuť lisovaný efekt pomocou CSS a niektorých jednoduchých trikov s hraničnými štýlmi, ako získať rôzne efekty.
6.
Polaroidy s CSS3
Naučte sa, ako používať niektoré úžasné CSS2 a CSS3 na premenu inak nenáročného zoznamu obrázkov na plnohodnotnú sadu obrázkov Polaroid.
7.
Dokonalý obrázok na celú stránku
Naučte sa, ako pridať obrázok na pozadí pomocou CSS, ktorý vyplní celú stránku obrázkom, bez medzery, podľa potreby upraví veľkosť obrázka, nespôsobí posúvače a oveľa viac.
8.
Efekty tieňov a obrázkov pri umiestnení na CSS3 Box
Preskúmajte nový spôsob pridávania efektov vrhaných tieňov jednoduchou úpravou šablóny štýlov.
9.
Efektný efekt umiestnenia miniatúry na miniatúru s jQuery
Dosiahnite čistý efekt v štýle blesku pomocou CSS a jQuery.
10.
Ako vytvoriť jednoduchý efekt obnovenia obrazu CSS
V tomto výučbe sa naučíte, ako vytvoriť jednoduchý efekt prevrátenia obrázkov CSS so základnými štýlmi HTML a CSS.
11.
Plávajúce
Floatutorial vás prevedie základmi plávajúcich prvkov, ako sú obrázky, veľké písmená, tlačidlá ďalšie a späť, galérie obrázkov, vložené zoznamy a rozloženie s viacerými stĺpcami. Pozrite si 4 návody venované plávaniu obrázkov.
12.
Efekty Snazzy Hover pomocou CSS
V tomto výučbe sa budete venovať vytváraniu flexibilných pokročilých techník vznášania pomocou vlastností CSS2.1.
13.
Rýchle prevrátenie bez
Predpätie
Pri použití prechodov obrázkov CSS musia byť načítané dva, tri alebo viac obrázkov (pre najlepšie výsledky musia byť často vopred načítané). Naučte sa, ako dať všetky stavy do jedného obrázka, čo umožňuje rýchlejšie dynamické zmeny a nevyžaduje žiadne predbežné načítanie.
14.
jQuery zaoblené rohy
Mnoho efektov jQuery pre zaoblené rohy a oveľa viac vzorov.
15.
Najjednoduchší popis a ukážka obrázka pomocou jQuery
Pozrite si 3 príklady použitia skriptu ukážky jQuery rollover. Tento jednoduchý skript je možné použiť na rôzne účely.
16.
Supersized - Celá obrazovka na pozadí /
slideshow
Plugin jQuery
Superzided je doplnok jQuery, ktorý mení veľkosť obrázkov tak, aby vyplnili prehliadač, pričom zachováva pomer rozmerov obrázkov a cykluje obrázky / pozadia pomocou prezentácie s prechodmi a predbežným načítaním.
17.
Prekrytie PNG
Už ste niekedy narazili na problém s vytvorením stránky s obrázkami zadanými klientom, aby ste neskôr po aktualizácii fotografie našli pôvodný vzhľad a dojem, ktorý sa nezachová? Toto riešenie spočíva v vytvorení priehľadného prekrytia PNG, ktoré je možné použiť ako masku / rámček okolo bežných súborov JPEG alebo GIF. Týmto spôsobom je možné nakonfigurovať typickú inštaláciu CMS, aby používatelia mohli nahrávať fotografie bez obáv z použitia nejakého grafického programu na použitie filtrov.
18.
BeZoom
lighweight
JQuery
Priblížiť doplnok
BeZoom je jednoduchá a ľahká alternatíva pre JQZoom. Je ľahší a ľahšie sa používa.
19.
Používanie jQuery na animácie obrázkov na pozadí
Pohrajte sa s jQuery a zmeňte pozíciu obrázka na pozadí, aby ste vytvorili typ efektu, ktorý hľadáte. Existuje nový článok s odpoveďou na otázku „Ako zvládnem aktívne stavy?“ - Spracovanie aktívneho stavu pre animované pozadia jQuery.
20.
5 spôsobov, ako okoreniť svoje obrázky pomocou CSS
Tu je niekoľko jednoduchých trikov, ktoré dodajú vášmu typickému nevýraznému obrazu chuť. Používanie Photoshopu na úpravu každého obrázka môže byť z dlhodobého hľadiska namáhavé a ťažko udržiavateľné. Tieto nasledujúce techniky CSS vám pomôžu zmierniť túto bolesť.
21.
Ako:
resizeable
Obrázok na pozadí
Naučte sa, ako nastaviť zmeniteľný obrázok na pozadí pomocou CSS. Na výber máte 3 možnosti.
22.
Štýl odkazov na obrázky
Informovanie používateľov o tom, že na konkrétnu časť našej webovej stránky sa má kliknúť, je najlepšie dosiahnuť efektom myši. Tieto sekcie, na ktoré je možné kliknúť, určite obsahujú obrázky obsahu. Image Link je skript, ktorý umožňuje použiť ďalšie štýly na odkazy na obrázky.
23.
Viac obrázkov na pozadí s CSS
Niekedy má zmysel používať obrázky na pozadí ako ich vkladať priamo na stránku. Aj keď každý prvok - napríklad značka tela - môže obsahovať iba jeden obrázok na pozadí, je možné ich použiť na niekoľko prvkov.
24.
Hranice obrázkov s CSS
Naozaj ľahký návod, ktorý vám ukáže, ako pridať k obrázkom pevné ohraničenie pomocou CSS.
25.
CSS Sprites bez použitia obrázkov na pozadí
Naučte sa, ako použiť efekt vznášania bez väčších znalostí o spritoch CSS.
