PSD a HTML Paso a Paso

http://psdahtmlpasoapaso.com

Como crear una galeria de imagenes en html Unas de los elementos que comunmente contienen las páginas web, son las galeria de imagenes. Hay muchisimas galerías pre-hechas en Flash y Javascript, pero estas requieren que el desarrollador tenga conocimientos de estos lenguajes para poder implementarlas. En este artículo te mostraré como crear una muy simple galería de fotos en HTML y CSS, con menos de 10 líneas de código. Esta galeria de imagenes es extremadamente simple pero si buscamos algo sin complicaciones, nos ayudará muchisimo. AQUI puedes ver un ejemplo de esta galeria de imagenes. Está compuesta por un par de lineas de CSS que las puedes incluir dentro del mismo archivo HTML o las puedes linkear a un CSS externo. Aquí ye mostraré un ejemplo, insertándola en el mismo HTML. Para esto, y antes del cierre de la etiqueta , incluimos el siguiene código, que define 5 clases CSS: [sourcecode language='css'] .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ /* Estilos para la imagen agrandada */ position: absolute; backgroundcolor: black; padding: 5px; left: -100px; border: 5px double gray; visibility: hidden; color: #ffffff; text-decoration: none; } .thumbnail span img{ border-width: 0; padding: 2px; } .thumbnail:hover span{ visibility: visible; top: -100; left: 0px; } [/sourcecode] Y en el codigo HTML solo introducimos las imagenes al tamaño que querramos a modo de miniaturas. En este caso voy a incluir 2 imágenes, obviamente dentro de la etiqueta : [sourcecode language='html']
Pie de foto
Pie de foto
PSD a HTML Paso a Paso | Aprende a convertir PSD a HTML paso a paso y sin

secretos – http://psdahtmlpasoapaso.com

1

PSD a HTML Paso a Paso

http://psdahtmlpasoapaso.com

Pie de foto [/sourcecode] En el código CSS, en la clase ".thumbnail span" puedes modificar el fondo de la imagen agrandada, su borde y sus márgenes. background-color: -> Color de fondo. color: -> Color del texto del pie border: -> Borde de la foto ** REPORTE GRATUITO: Cómo convertir un PSD en HTML en 5 pasos. Haz Click AQUI para Descargarlo AHORA. Dentro del codigo HTML, cuando se insertan las imágenes, se definen los tamaños. Este corresponde a como veremos las imágenes SIN agrandar. Y luego de la etiqueta
(salto de linea), podemos introducir un texto que irá debajo de la foto grande. Como puedes ver, el ejemplo de la galeria de imagenes, es totalmente simple y fácil de implementar. Esto nos demuestra una vez más, el poder que nos da el CSS. Puedes reutilizar este código, solo cámbiale los nombre de las imágenes y los textos del pie de foto (el que dice "Pie de foto").

PSD a HTML Paso a Paso | Aprende a convertir PSD a HTML paso a paso y sin

secretos – http://psdahtmlpasoapaso.com

2