training rosa
🔥25% DESCUENTO🔥 HOSTING WORDPRESS Grupo SEO TELEGRAM [Click Aquí]

Ver Resultados de Encuesta: ¿Te gusta el Fade álbum Vs con efecto en CSS3 para blogger?

Votantes
0. No puedes votar en esta encuesta
  • 0 0%
  • No

    0 0%
Resultados 1 al 5 de 5
Like Tree1Me gustan
  • 1 Publicado por lua86

Tema: Fade álbum V2, efecto con CSS3 para blogger

  1. #1
    Avatar de trabajosweb
    trabajosweb está desconectado Registrado

    User Info Menu

    Predeterminado Fade álbum V2, efecto con CSS3 para blogger

    Estaba buscando un álbum de imágenes para utilizarlo en diferentes cosas de blogger. El que más me llamó la atención fue este que les pongo acá.


    Lo interesante del álbum es que solo utilizamos CSS, nada de script. Lo primero es agregar el css antes de "]]></b:skin>", aunque esto ya es bien conocido para los usuarios de blogger, pero siempre hay usuario principiantes en el tema y me gusta guiar de las manos a ese tipos de personas, porque ciertamente me hubiese encantando que así pasara conmigo cuando comencé, sin más el código es el siguiente:

    Código:
    ul.fotos-detail {
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }
    ul.fotos-detail li {
        -moz-transition: all 200ms ease-in-out 0s;
        -ms-transition: all 200ms ease-in-out 0s;
        -o-transition: all 200ms ease-in-out 0s;
        -webkit-transition: all 200ms ease-in-out 0s;
        transition: all 200ms ease-in-out 0s;
        list-style: none outside none;
        background: #FFF;
        border: 1px solid #D2D5D9;
        border-radius: 3px;
        box-shadow: 0 1px 0 rgba(113, 117, 129, 0.2);
        float: left;
        margin: 10px 7px;
        padding: 5px;
    }
    ul.fotos-detail li:hover {
        background:#6eb1e0;
        border: 1px solid #177bc0;
        border-bottom-color: #0f4d78;
        -moz-box-shadow:0 1px 10px rgba(0,0,0,0.29),0 1px 4px rgba(23,148,232,0.81),inset 0 1px 0 #bbecf3; 
        -webkit-box-shadow:0 1px 10px rgba(0,0,0,0.29),0 1px 4px rgba(23,148,232,0.81),inset 0 1px 0 #bbecf3; 
        box-shadow:0 1px 10px rgba(0,0,0,0.29),0 1px 4px rgba(23,148,232,0.81),inset 0 1px 0 #bbecf3; 
    }
    ul.fotos-detail .notification-info {
        -moz-transition: all 200ms ease-in-out 400ms;
        -ms-transition: all 200ms ease-in-out 400ms;
        -o-transition: all 200ms ease-in-out 400ms;
        -webkit-transition: all 200ms ease-in-out 400ms;
        transition: all 200ms ease-in-out 400ms;
        background-color: rgba(0, 0, 0, 0.5);
        bottom: 0;
        font-family: Arial,Helvetica;
        line-height: 1;
        padding: 7px 0;
        position: absolute;
        text-align: center;
        width: 100%;
        opacity:1;
        z-index: 15;
    }
    ul.fotos-detail li:hover .notification-info {
        opacity: 0;
        margin-left: -180px;
    }
    ul.fotos-detail .notification-info span {
        color: #FFF;
        font-size: 11px;
        font-weight: bold;
        word-wrap: break-word;
    }
    .img-box-corte-fotos {
        background-color: #FFF;
        height: 180px;
        overflow: hidden;
        position: relative;
        width: 210px;
        z-index: 99;
    }
    .img-box-corte-fotos img {
        width: 350px;
    }
    .title-ff {
        border-bottom: 2px solid rgba(0, 0, 0, 0.3);
        display: block;
        font-size: 12px !important;
        margin-bottom: 5px;
        padding-bottom: 5px;
    }
    .img-box-corte-fotos .time {
        font-weight: bold;
    }
    .conten-img-cut {
        -moz-transition: all 200ms ease-in-out 200ms;
        -ms-transition: all 200ms ease-in-out 200ms;
        -o-transition: all 200ms ease-in-out 200ms;
        -webkit-transition: all 200ms ease-in-out 200ms;
        transition: all 200ms ease-in-out 200ms;
        height: 180px;
        overflow: hidden;
        position: relative;
        width: 210px;
        opacity:1;
        z-index: 10;
    }
    ul.fotos-detail li:hover .conten-img-cut {
        opacity:0;
    }
    
    ul.fotos-detail li:hover .conten-img-cut.left {
        margin-left: -210px;
    }
    ul.fotos-detail li:hover .conten-img-cut.right {
        margin-left: 210px;
    }
    ul.fotos-detail li:hover .conten-img-cut.top {
         margin-top: -180px;
    }
    ul.fotos-detail li:hover .conten-img-cut.bottom {
        margin-top: 180px;
    }
    .texto-content {
        -moz-transition: all 200ms ease-in-out 500ms;
        -ms-transition: all 200ms ease-in-out 500ms;
        -o-transition: all 200ms ease-in-out 500ms;
        -webkit-transition: all 200ms ease-in-out 500ms;
        transition: all 200ms ease-in-out 500ms;
        color: #555555;
        font-family: Arial,Helvetica;
        font-size: 12px;
        height: 170px;
        padding: 5px;
        position: absolute;
       line-height: 1.3;
        top: 0;
        width: 200px;
        opacity: 0;
        z-index: 5;
    }
    ul.fotos-detail li:hover .texto-content {
        opacity: 1;
    }
    Este css, es la parte esencial para que el álbum de imágenes funcione, de lo contrario será imposible. Ahora bien, lo que harás será lo siguiente, colocar el html en la parte que quieras mostrar el Fade álbum v2 para blogger:

    Código HTML:
    <ul class="fotos-detail">
                <li>
                    <a href="enlace hacia donde apunta nuestra foto">
                        <div class="img-box-corte-fotos">
                        <div class="conten-img-cut left">
                            <img border="0" src="url de la imagen">
                        </div>
                        <div class="texto-content"> 
                              Texto deseado dentro de la foto
                        </div>
                        <div class="notification-info">
                            <span class="title-ff">Nombre de la foto</span>
                            <span>Fecha - Nombre de usuario</span>
                        </div>
                        </div>
                    </a>
                </li>
                <div style="clear:both"></div>                        
    </ul>
    Eso es todo, ahora les cito lo siguiente del que publicó el álbum en su sitio:

    Ya tenemos el cuerpo de nuestro álbum, cada vez que queramos agregar una nueva foto a nuestro álbum tenemos que copiar y pegar el mismo código desde <li> hasta </li> encima de <div style="clear:both"></div>

    Configuración

    Para configurar nuestras fotos y nuestro álbum e marcado con colores lo que deben modificar a continuación explico que significa cada uno:

    Lo que esta en color verde lo reemplazan por lo que indique en el mismo código (fecha, usuario, etc) la fecha debe estar en este formato dd.mm.aaaa ejemplo: 31.07.2012

    Lo que esta en azul lo reemplazan por la url de su respectiva imagen

    Lo que esta en morado lo cambian por el enlace hacia donde se dirigirá al darle click a la imagen (yo le puse el mismo link de la imagen para que se vea en tamaño completo)

    Por ultimo lo que esta en rojo si se fijan dice left pues al pasar el mouse por enésima de la imagen desaparecerá hacia la derecha, el code lo diseñe para que pudieran escoger entre 4 formas: top, bottom, left y right, entonces ese valor es a su gusto, solo cambian "left" por el valor deseando entre los 4 que deje, pueden ir combinando si su alabemos tienen muchas imágenes
    Si quieren ver como queda entren en la fuente: Fade album V2, efecto con CSS3 | Z+Kreations

    Y si quieren ver como me quedó en un blog que prácticamente está nuevo: Payoneer tu tarjeta - Soluciones, tutoriales, ayudas y más.

    Saludos amigos, es todo.

  2. #2
    Avatar de trabajosweb
    trabajosweb está desconectado Registrado

    User Info Menu

    Predeterminado

    Mayormente no realizado encuestas al crear un tema, pero en este me animé hacerlo. Digan que tal les parece amigos de SWM

  3. #3
    lua86 Invitado

    Predeterminado

    Me gusta mucho el nuevo blog que has creado sobre Payoner. Tanto el diseño como el contenido. Suerte y éxitos!
    A trabajosweb le gusta.

  4. #4
    Avatar de trabajosweb
    trabajosweb está desconectado Registrado

    User Info Menu

    Predeterminado

    Cita Iniciado por lua86 Ver Mensaje
    Me gusta mucho el nuevo blog que has creado sobre Payoner. Tanto el diseño como el contenido. Suerte y éxitos!
    Gracias.

  5. #5
    Avatar de trabajosweb
    trabajosweb está desconectado Registrado

    User Info Menu

    Predeterminado

    A nadie le gusta votar acá jejeje que pasa muchachos jeje

Temas Similares

  1. Plantilla para blogger - Olo Blogger Store v.2.0
    Por trabajosweb en el foro Blogger
    Respuestas: 4
    Último Mensaje: 03/11/2018, 10:34
  2. Respuestas: 1
    Último Mensaje: 11/10/2017, 10:45
  3. Buscador de YouTube CSS3 para Blogger
    Por trabajosweb en el foro Blogger
    Respuestas: 0
    Último Mensaje: 29/09/2012, 22:07
  4. CSS3 Playground - Generador de CSS3
    Por trabajosweb en el foro General SoyWebmaster
    Respuestas: 0
    Último Mensaje: 12/09/2012, 00:50
  5. Ayuda en un efecto flash para web
    Por ody en el foro Webmasters Porno
    Respuestas: 6
    Último Mensaje: 28/04/2008, 15:45

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •  

Otros Foros de Interés

Curso SEO - Foro SEO - Foro Programacion - Foro Diseño Web - Intercambio de Enlaces - Negocios por Internet - Como Ganar Dinero - Foro Hosting - Foro Apuestas Deportivas

ÚLTIMOS ARTÍCULOS DEL BLOG SEO DE DAVID AYALA

La PUTA realidad del SEO (Qué es el SEO de verdad)
¿Cuantas palabras tiene que tener un post para SEO?
¡Hay vida después de WordPress!
Mi experiencia en el I Congreso de Ecommerce de Almería
Usamos cookies que analizan hábitos de comportamiento y navegación que aceptas al navegar aquí. Política de privacidad | Cookies | Aviso legal