[Tutorial] Muy fácil - Efectos para imágenes en HTML

Ayudas para los usuarios principiantes; y que ubicarán fácilmente en este subforo.

ModeradorCOLON Moderadores

Avatar de Usuario
Ivan
Master User
Master User
MensajesCOLON 2172
RegistradoCOLON 29 Oct 2005 00:15
UbicaciónCOLON Santa Fe, Argentina
CONTACTCOLON

[Tutorial] Muy fácil - Efectos para imágenes en HTML

Notapor Ivan » 01 Ago 2009 04:55

Hola a todos.
Aquellos que no quieren descargarse programas de diseño gráfico,
utilicemos algunos códigos HTML para editar tu imagen rápido y fácil.
Debes revisar los códigos con el bloc de notas,
puesto que en Palimpalem (foro) no disponemos de edición HTML.


La imagen simple
Imagen


Voltearla horizontalmente
<DIV align=center>
<DIV style="FILTER: FlipH(); WIDTH: 100px; HEIGHT: 100px"><IMG style="WIDTH: 110px; HEIGHT: 100px" height=100 src="URL DE LA IMAGEN" width=100 border=0> </DIV></DIV>



Voltearla verticalmente
<DIV align=center>
<DIV style="FILTER: FlipV(); WIDTH: 100px; HEIGHT: 100px"><IMG height=100 src="URL DE LA IMAGEN" width=100 border=0>
</DIV></DIV>



Efecto blur (borrosa y movida)
<DIV align=center><DIV style="FILTER: Blur(Direction=left, Strength=25); WIDTH: 141px; HEIGHT: 100px"><IMG height=100 src="URL DE LA IMAGEN" width=100 align=right border=0></DIV></DIV>



Difuminado (transparencia) por la derecha
<IMG style="FILTER: alpha(opacity=100, finishOpacity=0,style=1); WIDTH: 130px; HEIGHT: 119px" src="URL DE LA IMAGEN">



Difuminado en el centro
<IMG style="FILTER: alpha(opacity=0, finishOpacity=100,style=3); WIDTH: 130px; HEIGHT: 119px" src="URL DE LA IMAGEN">



Difuminado por la izquierda
<IMG style="FILTER: alpha(opacity=0, finishOpacity=100,style=1); WIDTH: 130px; HEIGHT: 119px" src="URL DE LA IMAGEN">



Difuminado por todos lados
<IMG style="FILTER: alpha(opacity=100, finishOpacity=0,style=3); WIDTH: 130px; HEIGHT: 119px" src="URL DE LA IMAGEN">



Difuminado circular
<IMG style="FILTER: alpha(opacity=100, finishOpacity=0,style=2); WIDTH: 130px; HEIGHT: 119px" src="URL DE LA IMAGEN">



Efecto rayos X
<DIV align=center>
<DIV style="FILTER: Xray(); WIDTH: 100px; HEIGHT: 100px"> <IMG height=100 src="URL DE LA IMAGEN" width=100 border=2>
</DIV></DIV>



Efecto negativo y en curva
<P><DIV align=center><DIV style="FILTER: Wave(freq=1,strength=10,lightstrength=1,phase=0) invert(); WIDTH: 190px; HEIGHT: 130px"><IMG style="WIDTH: 150px; HEIGHT: 125px" src="URL DE LA IMAGEN" align=center border=6> </DIV></DIV>
<P></P>



Efecto negativo
<DIV align=center>
<DIV style="FILTER: Invert(); WIDTH: 100px; HEIGHT: 100px">
<IMG height=100 src="URL DE LA IMAGEN" width=100 border=0>
</DIV></DIV>



Efecto de opacidad (50%)
<IMG style="FILTER: alpha(opacity=50, finishOpacity=0,style=0); WIDTH: 130px; HEIGHT: 119px" src="URL DE LA IMAGEN">



Ondulada 1
<DIV align=center>

<DIV style="FILTER: Wave(freq=5,strength=2,lightstrength=1,phase=0); WIDTH: 175px; HEIGHT: 130px">

<IMG style="WIDTH: 150px; HEIGHT: 125px" src="URL DE LA IMAGEN" align=left border=3></DIV></DIV>



Ondulada 2
<DIV style="FILTER: Wave(freq=15,strength=2,lightstrength=1,phase=0); WIDTH: 175px; HEIGHT: 130px">

<IMG style="WIDTH: 150px; HEIGHT: 125px" src="URL DE LA IMAGEN" align=left border=6> </DIV></DIV>



Ondulada 3
<DIV align=center><DIV style="FILTER: Wave(freq=5,strength=5,lightstrength=1,phase=0); WIDTH: 175px; HEIGHT: 130px"><IMG style="WIDTH: 150px; HEIGHT: 125px" src="URL DE LA IMAGEN" align=left border=6> </DIV></DIV>



Ondulada 4
<DIV align=center>

<DIV style="FILTER: Wave(freq=15,strength=5,lightstrength=1,phase=0); WIDTH: 175px; HEIGHT: 130px">
<IMG style="WIDTH: 150px; HEIGHT: 125px" src="URL DE LA IMAGEN" align=left border=6> </DIV></DIV>



Ondulada 5
<DIV align=center>

<DIV style="FILTER: Wave(freq=60,strength=3,lightstrength=1,phase=0); WIDTH: 175px; HEIGHT: 115px">
<P align=center><IMG style="WIDTH: 196px; HEIGHT: 157px" height=115 src="URL DE LA IMAGEN" width=148 border=10> </P></DIV></DIV>



Con borde difuminado (transparencia)
<DIV align=center>

<DIV style="FILTER: Glow(strength=20,color=#FF0000); WIDTH: 150px; HEIGHT: 150px" align=center><BR>
<P align=center><IMG height=100 src="URL DE LA IMAGEN" width=100 align=center border=0></P></DIV>


Espero que les haya gustado el post. Un saludo.

Avatar de Usuario
formuloizer
Grand User
Grand User
MensajesCOLON 487
RegistradoCOLON 16 Jun 2009 19:50
UbicaciónCOLON Palma de Mallorca

Re: [Tutorial] Muy fácil - Efectos para imágenes en HTML

Notapor formuloizer » 01 Ago 2009 08:57

Muy buen trabajo Iván, los he probado todos y me han encantado. :;):
http://www.formuloizer.tk
Web de Fórmula 1 y Moto GP

Avatar de Usuario
Pablo
Administrador
Administrador
MensajesCOLON 2411
RegistradoCOLON 25 Nov 2006 23:26
UbicaciónCOLON Granada
CONTACTCOLON

Re: [Tutorial] Muy fácil - Efectos para imágenes en HTML

Notapor Pablo » 01 Ago 2009 10:56

:ooh: Increible post! GRacia spor aportarlo Iván :)

Avatar de Usuario
usuario_eliminado1
Advanced User
Advanced User
MensajesCOLON 860
RegistradoCOLON 06 Ene 2007 21:47
UbicaciónCOLON España.
CONTACTCOLON

Re: [Tutorial] Muy fácil - Efectos para imágenes en HTML

Notapor usuario_eliminado1 » 01 Ago 2009 11:34

¡Fantástico tema! :;):
Un buen y excelente aporte para el foro.
¡Felicidades!

Saludos. :alien:
AYUDÁ A PALIMPALEM. ENVIÁ ESTE POWERPOINT A TUS CONTACTOS
Lee las normas, no hagas doble-post, colocá asuntos explicativos, no escribas en mayúsculas, no ofendas, usa el buscador.

Avatar de Usuario
Ivan
Master User
Master User
MensajesCOLON 2172
RegistradoCOLON 29 Oct 2005 00:15
UbicaciónCOLON Santa Fe, Argentina
CONTACTCOLON

Re: [Tutorial] Muy fácil - Efectos para imágenes en HTML

Notapor Ivan » 01 Ago 2009 16:41

Okay. Me lo pensé porque muchos usuarios pedían
mejorar sus imágenes y no querían descargar programas o eran muy difíciles...

Avatar de Usuario
formuloizer
Grand User
Grand User
MensajesCOLON 487
RegistradoCOLON 16 Jun 2009 19:50
UbicaciónCOLON Palma de Mallorca

Re: [Tutorial] Muy fácil - Efectos para imágenes en HTML

Notapor formuloizer » 01 Ago 2009 18:32

Pues has dado justo en el clavo !! ::D:
http://www.formuloizer.tk
Web de Fórmula 1 y Moto GP

Kouta2
Newbie
Newbie
MensajesCOLON 50
RegistradoCOLON 13 May 2010 17:40

Re: [Tutorial] Muy fácil - Efectos para imágenes en HTML

Notapor Kouta2 » 14 May 2010 18:30

Hola, bueno lo ke realmente necesito es hacer uno de estos amigo:

<a href="http://www.animenexus.net/"><img src="http://afiliados.animenexus.co.cc/afiliados03_88x31.gif" alt="Anime Nexus"/></a>

Es un enlace de afiliacion a mi pagina, cuando lo coloco en mi pagina; aparece un gif el cual e un enlace a la pagina del dueño del gif

se agradece

aahh y tambien si me puedes mostrar como hacer para ke a uno de esto ; enves de ke se mueva, yo kiero ke cuando le coloco en cursor encima la imagen se hace mas grande

gracias
Imagen
Revolucion otaku www.grupolunacentral.tk por el arraigo mundial del anime.

alstonamos
Aprendiz
Aprendiz
MensajesCOLON 1
RegistradoCOLON 16 Abr 2016 07:37
Escribe: PalimpalemCOLON Palimpalem

Re: [Tutorial] Muy fácil - Efectos para imágenes en HTML

Notapor alstonamos » 16 Abr 2016 07:40

Es un enlace de afiliacion a mi pagina, cuando lo coloco en mi pagina; aparece un gif el cual e un enlace a la pagina del dueño del gif????
== Solitaire ==


Volver a

¿Quién está conectado?

Usuarios navegando por este Foro: 7 y 0 invitados