Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Oro Ejemplo Galeria

    Hochgeladen von

    api-318329473
    17 Ansichten2 Seiten

    Originaltitel

    oro ejemplo galeria

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    DOCX, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden

    Copyright:

    © All Rights Reserved
    Als DOCX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    17 Ansichten2 Seiten

    Oro Ejemplo Galeria

    Hochgeladen von

    api-318329473

    Copyright:

    © All Rights Reserved
    Als DOCX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 2

    http://www.psdahtmlpasoapaso.

    com/blog/como-crear-una-galeria-deimagenes-en-html

    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, insertndola en el mismo HTML.

    Para esto, y antes del cierre de la etiqueta </head>, incluimos el siguiene


    cdigo, que define 5 clases CSS:

    ?
    <style type=&amp;#039;text/css&amp;#039;>
    .thumbnail{ position: relative; z-index: 0; }
    .thumbnail:hover{ background-color: transparent; z-index: 50; }
    .thumbnail span{ /* Estilos para la imagen agrandada */ position: absolute;
    background-color: 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; }
    </style>
    Y en el codigo HTML solo introducimos las imagenes al tamao que
    querramos a modo de miniaturas. En este caso voy a incluir 2 imgenes,
    obviamente dentro de la etiqueta <body>:

    ?
    <a href="#thumb"><img src="html5.jpg" width="138" height="100"
    border="0" /><span><img src="html5.jpg" /><br />
    Pie de foto</span></a>
    <a href="#thumb"><img src="csscheatsheet.jpg" width="139"
    height="96" border="0" /><span><img src="csscheatsheet.jpg" /><br />
    Pie de foto</span></a>
    <a href="#thumb"><span><img src="foto_mazzola.jpg" /><br />

    Pie de foto</span></a>
    En el cdigo CSS, en la clase .thumbnail span puedes modificar el fondo
    de la imagen agrandada, su borde y sus mrgenes.
    background-color: -> Color de fondo.
    color: -> Color del texto del pie
    border: -> Borde de la foto

    ** REPORTE GRATUITO:
    Cmo convertir un PSD en HTML en 5 pasos.
    Haz Click AQUI para Descargarlo AHORA.

    Dentro del codigo HTML, cuando se insertan las imgenes, se definen los
    tamaos. Este corresponde a como veremos las imgenes SIN agrandar.
    Y luego de la etiqueta </br> (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 fcil de implementar. Esto nos demuestra una vez ms, el poder
    que nos da el CSS.

    Puedes reutilizar este cdigo, solo cmbiale los nombre de las imgenes y
    los textos del pie de foto (el que dice Pie de foto).

    Das könnte Ihnen auch gefallen