Efeitos para imagens

**branquinha** Sex Ago 07, 2009 2:56 pm

Imagem com link:

Código:: <a href="LINK DE DESTINO" target="_blank"><img src="LINK DA IMAGEM" border="0" alt="DESCRIÇÃO DA IMAGEM"></a>

Imagem transparente:

Código:: <img src="AQUI URL " style="filter:alpha(opacity=50)">

Quanto menor o valor mais transparente fica, ou seja com 30 de opacity a imagem fica mais branca do que com 50.

Reflicta a imagem em posição Vertical:

Código:: <img src="AQUI URL " style="filter:flipv">

Reflicta a imagem em posição Horizontal:

Código:: <img src=" AQUI URL" style="filter:fliph">

Efeito de noite:

Código:: <img src="AQUI URL" style="filter:xray()">

Efeito de preto e branco:

Código:: <img src="AQUI URL" style="filter:gray;">

Efeito de gravadura na imagem:

Código:: <img src="AQUI URL" style="filter:progid:dximagetransform.microsoft.emboss">

Efeito de realce nas imagem:

Código:: <img src=" AQUI URL" style="filter:progid:dximagetransform.microsoft.emboss">

Efeitos À Passagem Do Rato (hover):

De Preto e Branco para Cor:

Código:: <style type="text/css"> a: AQUI URL {filter:gray;} a:visited img {filter:gray;} a:hover img {filter:none;} </style>

De Cor para Preto e Branco:

Código:: <style type="text/css"> a: AQUI URL {filter:none;} a:visited img {filter:none;} a:hover img {filter:gray;} </style>

De normal para reflectida:

Código:: <style type="text/css"> a:link img {filter:gray;} a:visited img {filter:gray;} a:hover img {filter:none;} </style>

De reflectida para normal:

Código:: <style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:gray;} </style>

De nitidez para desfoque:

Código:: <style type="text/css"> a:hover img {filter: blur(add = 0, direction = 225, strength = 10)}</style>

De desfoque para nitidez:

Código:: <style type="text/css"> a:link img {filter:blur(add = 0, direction = 225, strength = 10);} a:visited img {filter:blur(add = 0, direction = 225, strength = 10);}a:hover img {filter: none}</style>

De nivelamento para realce:

Código:: <style type="text/css"> a:hover img {filter:progid:dximagetransform.microsoft.emboss;} </style> </style>

De realce para nivelamento:

Código:: <style type="text/css"> a:link img {filter:progid:dximagetransform.microsoft.emboss;} a:visited img {filter:progid:dximagetransform.microsoft.emboss;} a:hover img {filter:none;}</style> </style>

De sol para noite:

Código:: <style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:xray();} </style>

De noite para sol:

Código:: <style type="text/css"> a:link img {filter:xray();} a:visited img {filter:xray();} a:hover img {filter:none;} </style>

De nitidez para transparência:

Código:: <style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:alpha(opacity=60);} </style>

De transparência para nitidez:

Código:: <style type="text/css"> a:link img {filter:alpha(opacity=60);} a:visited img {filter:alpha(opacity=60);} a:hover img {filter:none;} </style>

Colocar imagens próximas:

Código:: <div style="white-space: nowrap;"> <img src="URL IMAGEM"> <img src="URL IMAGEM”"> </div>

Imagem de Fundo:

Para se fazer isto é fundamental que a resolução da imagem seja aproximadamente de 1280x800.(Mesmo com esta resolução, a imagem pode não ocupar o fundo todo, dependendo da resolução usada no monitor de cada pessoa).

Para colocar a imagem deverá utilizar o seguinte código:

Código:: <style type='text/css'>body { background-image: url(ENDEREÇO URL DA IMAGEM); background-position: center; background-attachment: fixed; background-repeat: no-repeat; }</style>

Para criarem o "Endereço URL" necessário, tem de fazer o upload da imagem para sites de armazenamento.