Obrázkové efekty

Mám pro vás další návod. Tentokrát půjde o nejrůznější efekty s obrázky... Jedná se o to, že pokud máte na blogu nějaké obrázky a chcete, aby po najetí na ně změnily barvu, tvar nebo cokoli dalšího, všechno jde nastavit... U mě na blogu můžete například na obrázcích vidět, že po najetí myší jsou černobílé...

Můj návod.

Kopírovat se zdrojem!

Následující kódy vkládáte do css, tedy nad ] ] ></b:skin>

Uvedu vám pár příkladů a pak si můžete zkoušet sami. Vždy měňte jen tučné obarvené části kódu...

Základní obrázkové efekty

Šedý obrázek

 
V závorce uvádíte jak moc chcete obrázek 'odbarvit'. Od úplně černobílé až po lehce našedlý...
 

img:hover {
filter: grayscale(90%);
}

Rozmazaný obrázek

Lehké rozmazání obrázku, až do takové verze, kdy nejde poznat o co šlo :-) Stačí zkoušet a měnit hodnoty.
 

img:hover {
filter: blur(10px);
}

Rotace obrázku

Mínus nebo bez znaménka určuje, na kterou stranu se bude obrázek naklánět...

img:hover {
transform: rotate(-10deg);
}

Zesvětlování a ztmavování

V tomto případě jde o změny v barevnosti, tento kód ubírá a přidává barvy... V koncovém efektu to vypadá jako zesvětlení nebo ztmavení.

img:hover {
filter: brightness(70%);
}

Přibarvování obrázku

Podle změny hodnoty mění ostrost barev...

img:hover {
filter: saturate(200%);
}

Sépiová barva

img:hover {
filter: sepia(1);
}

Převrácené barvy (jiná škála)

img:hover {
filter: hue-rotate(160deg);
}

img:hover {
filter: hue-rotate(180deg);
}

img:hover {
filter: hue-rotate(90deg);
}

Negativ

img:hover {
filter: invert(1);
}

Průhlednost

img:hover {
filter: opacity(0.3);
}

Další efekty

Změna tvaru z hranatého na kulatý

Pokud jde o čtvercový obrázek, rámeček bude kruh, pokud jde o obdélník, vznikne elipsa...

img:hover {
border-radius: 50%;
}

Rámeček

Za # zvolte kód vlastní barvy....

img:hover {
border: 5px solid #000;
}

Dvojitý rámeček...

img:hover {
border: 5px double #000;
}

Mixované efekty

Zaoblení nebo kruhový obrázek plus rámeček....

img:hover {
border-radius: 50%;
border: 5px solid #000;
}

Dvojitý rámeček a černobílý obrázek....

img:hover {
filter: grayscale(90%);
border: 5px double #000;
}

Zprůhlednění a červený rámeček... Ale pozor, některé efekty, jako například tento, mohou ovlivnit i barvu rámečku...

img:hover {
filter: opacity(0.3);
border: 3px solid #cc0000;
}

Nejrůznějších kombinací je nespočet. Sami si už můžete experimentovat a vytvářet, co se vám zlíbí :-)