Dar efectos las fotos con HTML

Escrito por evan em | Traducido por joaquín di toma
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Dar efectos las fotos con HTML
Mejorar imágenes para la Web usando HTML. (Comstock/Comstock/Getty Images)

Las imágenes juegan un papel importante en el diseño web. En los sitios web, las imágenes se incorporan utilizandolas como fondo y para mejroar la navegación. Si no usas lenguajes de script como JavaScript o programas interactivos como Adobe Flash, las opciones de los efectos son limitadas. Puedes aplicar algunos efectos simples con estilos, usando HTML y CSS.

Otras personas están leyendo

HTML y CSS

Hyper Text Markup Language (HTML o en español" lenguaje de marcas de hipertexto") es un lenguaje de autor común utilizado por los desarrolladores web para crear sitios web estáticos. Con el HTML se establece la estructura de una página web. Aunque sea bueno en la creación del esqueleto de tu proyecto de web, no lo es tanto para la usarlo como estilo o para efectos. Para esto, se utilizan las hojas de estilo en cascada (CSS) y se complementa con tu HTML, te permite añadir elementos gráficos y estilos a tu página web. Por ejemplo, si quieres hacer que en todos los encabezados de cada página, el texto aparezca en negrita, puedes hacerlo con CSS

Opacidad de imagen

Uno de los efectos gráficos más comunes es la opacidad. La opacidad determina el grado de transparencia de una imagen que se encuentra en el sitio. Si quieres poner una imagen de fondo en tu página web y necesitas reducir la opacidad para crear un efecto más transparente, puedes hacerlo con CSS. Coloca el código CSS correspondiente en la etiqueta HTML <img>:

<img src="tufoto.jpg" width="150" height="113" alt="yourpicture" style="opacity:0.5;filter:alpha(opacity=50)" />

En este ejemplo, se definió la opacidad al "50", por lo tanto redujo la visibilidad de las imágenes de la página web a la mitad.

Efecto "mouse over"

Puedes tener el efecto de opacidad un paso más allá y cambiar la opacidad de una foto cuando el cursor del usuario pasa por encima de él. Este es un efecto "mouse-over". El código es similar a un cambio de la opacidad simple y también se coloca dentro de la etiqueta HTML <img>. Este es un buen efecto de utilizar los botones de navegación.

<img src="tufoto.jpg" style="opacity:0.5;filter:alpha(opacity=50)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" />

Puedes ver los comandos "onmouseout" y "onmouseover". Al cargar la página, este código reduce la opacidad de la imagen en un %50, cuando le pasas el cursor por encima aumenta al %100, cuando sacas el cursos de la imagen vuelve a reducirse de nuevo al %50.

Float (flotar)

"Float" (flotar) es otro efecto sencillo de HTML y CSS para una foto. El "float" define dónde aparecerá una imagen dentro de una tabla, celda o del documento. El comando "float" utiliza las propiedades de izquierda, derecha y centro. Puedes utilizar esto, ya sea para colocar una imagen dentro del texto o para crear una serie de imágenes correctamente colocadas en una galería. Se podría definir esto dentro de la etiqueta head HTML de la siguiente manera:

<head> <style type="text/css"> img { float:left; } </style> </head>

En el ejemplo anterior, se indicó que todos los elementos HTML con la etiqueta <img> floten a la izquierda en el documento.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles