25 výukových programů pro vylepšení obrázků pomocí CSS a jQuery

CSS-3-box-shadow-image-hover-efekty-image-styling-pozadí-vzhled-inspirace-add-shadow-border-make-images-stand-out

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.

CSS-3-Rounded-Image-With-JQuery-Image-Hover-Effects-Image-Styling-Backgrounds-Vzhled-Inspirace-Přidat-Stín-Okraje-Vytvořit-Obrazy-Vyčnívat

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.

Více pozadí-ohraničení-css-2-image-styling-pozadí-vzhled-inspirace-přidat-stín-hranice-udělat-obrázky-vyniknout

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.

Rychlý tip-vícenásobné ohraničení-s-jednoduchým-css-obrázkem-styling-pozadí-vzhled-inspirace-přidat-stín-hranice-udělat-obrázky-vyniknout

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.

Více hranic-dynamicky velké prvky-s-css-2-image-styling-pozadí-vzhled-inspirace-přidat-stín-hranice-udělat-obrázky-vyniknout

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.

Bavte se-s-hranami-zkosený-lisovaný-více-image-styling-pozadí-vzhled-inspirace-add-shadow-border-make-images-stand-out

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.

Polaroidy-css-3-image-styling-pozadí-vzhled-inspirace-add-shadow-border-make-images-stand-out

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.

Perfect-full-page-background-image-hover-efekty-image-styling-pozadí-vzhled-inspirace-add-shadow-border-make-images-stand-out

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ů.

CSS-3-box-shadow-image-hover-efekty-image-styling-pozadí-vzhled-inspirace-add-shadow-border-make-images-stand-out

9.

Fancy Thumbnail Hover Effect w / jQuery

Dosáhněte čistého efektu ve stylu blesku pomocí CSS a jQuery.

Fancy-thumbnail-hover-effect-with-jquery-image-styling-backgrounds-vzhľad-inspirace-přidat-stín-hranice-udělat-obrázky-vyniknout

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.

Jak-vytvořit-jednoduchý-css-obraz-rollover-efekt-obraz-vznášet-efekty-obraz-styling-pozadí-vzhled-inspirace-přidat-stín-hranice-udělat-obrazy-vyniknout

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.

Floatutorial-image-styling-pozadí-vzhled-inspirace-přidat-stín-hranice-udělat-obrázky-vyniknout

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.

Snazzy-hover-effect-using-css-image-styling-pozadí-vzhled-inspirace-add-shadow-border-make-images-stand-out

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í.

Rychlé převrácení-bez-předběžného načtení-styling-pozadí-vzhled-inspirace-přidat-stín-hranice-udělat-obrázky-vyniknout

14.

jQuery zaoblené rohy

Spousta efektů jQuery pro zaoblené rohy a mnohem více vzorů.

Zaoblené rohy-jquery-image-styling-pozadí-vzhled-inspirace-přidat-stín-hranice-udělat-obrázky-vyniknout

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.

Nejjednodušší nápověda-náhled-použití-jquery-image-styling-pozadí-vzhled-inspirace-add-shadow-border-make-images-stand-out

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.

Supersized-full-screen-background-slideshow-jwuery-plugin-image-styling-backgrounds-vzhľad-inspirace-přidat-stín-hranice-udělat-obrázky-vyniknout

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ů.

Png-overlay-image-styling-pozadí-vzhled-inspirace-přidat-stín-hranice-udělat-obrázky-vyniknout

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ší.

Bezoom-lightweight-jquery-zoom-plugin-image-styling-pozadí-vzhled-inspirace-add-shadow-border-make-images-stand-out

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.

Použití-jquery-pro-pozadí-obraz-animace-obraz-styling-pozadí-vzhled-inspirace-přidat-stín-hranice-udělat-obrazy-vyniknout

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.

Způsoby, jak okořenit-vaše-obrázky-s-css-image-styling-pozadí-vzhled-inspirace-přidat-stín-hranice-udělat-obrázky-vyniknout

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í.

Jak-změnit velikost-pozadí-obrázek-styling-pozadí-vzhled-inspirace-přidat-stín-hranice-udělat-obrázky-vyniknout

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.

Stylujte-svůj-image-odkazy-image-styling-pozadí-vzhled-inspirace-add-shadow-border-make-images-stand-out

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ů.

Více obrazů na pozadí-s-css-obrázkem-styling-pozadí-vzhled-inspirace-přidat-stín-hranice-udělat-obrázky-vyniknout

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.

Image-border-with-css-image-styling-pozadí-vzhled-inspirace-add-shadow-border-make-images-stand-out

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.

CSS-sprites-without-using-background-images-image-styling-backgrounds-vzhled-inspirace-add-shadow-border-make-images-stand-out


Buďte první komentář

Zanechte svůj komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

*

*

  1. Odpovědný za údaje: Miguel Ángel Gatón
  2. Účel údajů: Ovládací SPAM, správa komentářů.
  3. Legitimace: Váš souhlas
  4. Sdělování údajů: Údaje nebudou sděleny třetím osobám, s výjimkou zákonných povinností.
  5. Úložiště dat: Databáze hostovaná společností Occentus Networks (EU)
  6. Práva: Vaše údaje můžete kdykoli omezit, obnovit a odstranit.