neděle 25. června 2017

Obrázkové efekty

neděle, června 25, 2017 bez komentáře

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í :-)



Sdílení článku:
Sdílet emailem Sdílet gmailem Sdílet Facebookem Sdílet Googlem Plus Sdílet Twitterem Sdílet Pinterestem Sdílet Tumblrem Sdílet Bloggerem Sdílet Wordpressem Sdílet whatsappem

Autorka článku:

Lucy Lillianne Vždycky mě bavilo hrát si s grafikou, dělat blogy a jejich vzhledy. Nikdy jsem se nepovažovala za nějakého experta a ani nikdy nebudu. To, co sem publikuji jsou věci, které by se mohly někomu do budoucna hodit nebo i mě samotné, pokud bych nějaký postup zapomněla... Každopádně jsem ráda, že sem tam si nějaký článek najde svého čtenáře nebo rovnou uplatnění :-)

štítky

0 komentářů:

Okomentovat


  • Tutorial na šablony

    Krok za krokem, jak si vytvořit vlastní blogovou šablonu po svém...

  • Tipy pro blogery

    Nápady a postřehy, odkoukané fígle, prostě vše, co by se vám mohlo hodit při práci na vašem vlastním blogu...

  • Moje grafika

    Amatérské pokusy o grafiku, mnohdy vytvořené s obrovským štěstím nebo díky volně stažitelné předchystané práci...

  • Calibre program

    Pár návodů s postupy, které jsem objevila díky experimentům s programem nebo diskuzním fórům na netu. Calibre slouží ke správě elektronických knih...