Při vylepšování obrázků se můžeme rozhodnout, že to provedeme pomocí Photoshopu a poté ho připojíme na webovou stránku, nebo můžeme také zvolit možnost B: udělejte to pomocí technik HTML, CSS a Javascript, které jsou k dispozici.
Po skoku existuje mnoho technik k vylepšení obrázků, téměř všechny vytvořené pomocí jQuery jako hlavní základny nebo pomocí CSS3 s využitím nejnovějších webových standardů, i když vám připomínám, že v takovém případě ztratíme kompatibilitu s některými prohlížeči.
Jsou v angličtině, ale jsou chyceni za běhu, slíbil :)
Zdroj | 1. kolo
Zaoblený obrázek CSS3 s jQuery
Naučte se zabalit značku rozsahu kolem prvku obrázku, abyste dosáhli zaoblených obrázků, které se zobrazí přímo ve všech moderních prohlížečích.
2.
Více pozadí a hranic s CSS 2.1
Naučte se, jak používat pseudo-prvky CSS 2.1 k poskytnutí až 3 pláten na pozadí, 2 prezentačních obrázků s pevnou velikostí a několika složitých ohraničení pro jeden prvek HTML.
3.
Rychlý tip: Více hranic s jednoduchým CSS
Rychlý screencast, který vám ukáže, jak dosáhnout více ohraničení pomocí jednoduchých CSS, které přidají vašim návrhům větší hloubku. Mnohem jednodušší verze předchozího tutoriálu.
4.
Více hranic na dynamicky dimenzovaných prvcích s CSS2
Třetí verze Nicholas Gallagher vám ukáže, co dělat, pokud nemáte velikost prvku.
5.
Bavte se s hranicemi - zkosené, lisované a další!
Naučte se, jak dosáhnout lisovaného efektu pomocí CSS a několika jednoduchých triků ve stylu hranic, abyste získali různé efekty.
6.
Polaroidy s CSS3
Naučte se, jak pomocí některých úžasných CSS2 a CSS3 přeměnit jinak nenáročný seznam obrázků na plnohodnotnou sadu obrázků Polaroid.
7.
Dokonalý obrázek na pozadí celé stránky
Naučte se, jak přidat obrázek na pozadí pomocí CSS, který vyplní celou stránku obrázkem, žádné prázdné místo, upraví velikost obrázku podle potřeby, nezpůsobí posuvníky a mnohem více.
8.
Stíny a efekty přechodu obrazu CSS3 Box
Prozkoumejte nový způsob přidávání efektů vržených stínů pouhou úpravou šablony stylů.
9.
Fancy Thumbnail Hover Effect w / jQuery
Dosáhněte čistého efektu ve stylu blesku pomocí CSS a jQuery.
10.
Jak vytvořit jednoduchý efekt převrácení obrazu CSS
V tomto kurzu se naučíte, jak vytvořit jednoduchý efekt převrácení obrazu CSS se základním stylem HTML a CSS.
11.
Plovoucí
Floatutorial vás provede základy plovoucích prvků, jako jsou obrázky, přetahovací čepice, tlačítka Další a Zpět, galerie obrázků, vložené seznamy a rozložení s více sloupci. Podívejte se na 4 výukové programy věnované plovoucímu obrazu.
12.
Efekty Snazzy Hover pomocí CSS
V tomto kurzu se budete věnovat vytváření flexibilních pokročilých technik přechodu pomocí vlastností CSS2.1.
13.
Rychlé převrácení bez
Předběžně načíst
Při použití rolloverů obrázků CSS musí být načteny dva, tři nebo více obrázků (a pro nejlepší výsledky musí být často předem načteny). Naučte se, jak vložit všechny stavy do jednoho obrázku, provede dynamické změny rychleji a nevyžaduje žádné předběžné načtení.
14.
jQuery zaoblené rohy
Spousta efektů jQuery pro zaoblené rohy a mnohem více vzorů.
15.
Nejjednodušší popis a náhled obrázku pomocí jQuery
Podívejte se na 3 příklady použití skriptu náhledu přechodu jQuery. Tento jednoduchý skript lze použít pro různé účely.
16.
Supersized - Celá obrazovka na pozadí /
Slideshow
Plugin jQuery
Superzided je plugin jQuery, který mění velikost obrázků tak, aby vyplnil prohlížeč při zachování poměru rozměrů obrazu a cykluje obrázky / pozadí pomocí prezentace s přechody a předběžným načítáním.
17.
Překrytí PNG
Už jste někdy narazili na problém vytvořit web s obrázky poskytnutými klientem, abyste později po aktualizaci své fotografie našli původní vzhled a dojem, který se nezachová? Toto řešení zahrnuje vytvoření transparentního překrytí PNG, které lze použít jako masku / rámeček kolem běžného JPEG nebo GIF. Tímto způsobem lze nakonfigurovat typickou instalaci CMS, aby uživatelé mohli nahrávat fotografie, aniž by si museli dělat starosti s použitím jakéhokoli grafického programu k použití filtrů.
18.
BeZoom
Váha
JQuery
Zvětšit plugin
BeZoom je jednoduchá a lehká alternativa pro JQZoom. Je lehčí a jeho použití je snazší.
19.
Používání jQuery pro animace obrázků na pozadí
Hrajte s jQuery a změňte polohu obrázku na pozadí a vytvořte typ efektu, který hledáte. K dispozici je nový článek, který odpovídá na otázku „Jak zvládnu aktivní stavy?“ - Zpracování aktivního stavu pro animovaná pozadí jQuery.
20.
5 způsobů, jak okořenit vaše obrázky pomocí CSS
Zde je několik jednoduchých triků, které dodají vašim typickým nevýrazným obrázkům trochu chuti. Používání Photoshopu ke stylizaci každého obrázku může být z dlouhodobého hlediska zdlouhavé a obtížně udržovatelné. Tyto následující techniky CSS vám pomohou zmírnit tuto bolest.
21.
Jak:
Nastavitelný
Obrázek na pozadí
Naučte se, jak nastavit měnitelný obrázek na pozadí pomocí CSS. Máte na výběr ze 3 možností.
22.
Upravte své odkazy na obrázky
Informování uživatelů o tom, že konkrétní část našeho webu má být kliknuta, je nejlépe dosaženo efektem myši. Tyto sekce, na které lze kliknout, určitě obsahují obrázky obsahu. Image Link je skript, který vám umožní použít další styly na odkazy na obrázky.
23.
Více obrázků na pozadí s CSS
Někdy má větší smysl používat obrázky na pozadí, než je vkládat přímo na stránku. A zatímco každý prvek - stejně jako vaše značka těla - může obsahovat pouze jeden obrázek na pozadí, lze jej použít na několik prvků.
24.
Ohraničení obrazu pomocí CSS
Opravdu snadný návod, který vám ukáže, jak přidat pevné ohraničení obrázků pomocí CSS.
25.
Skřítci CSS bez použití obrázků na pozadí
Naučte se, jak použít efekt vznášení bez spousty znalostí o spritech CSS.