1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Beautiful LightBox CSS3

Tema en 'Tutoriales de HTML y CSS' comenzado por KaoruMishimaru_20, 23 de Septiembre de 2015.

  1. KaoruMishimaru_20

    KaoruMishimaru_20 Miembro conocido

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    505
    Me gusta recibidos:
    317
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    KaoruMishimaru
    Localización:
    Argentina, Buenos Aires, La Plata
    Página web:
    [​IMG]
    Beautiful LightBox CSS3

    ¡LEAN ANTES DE COMENTAR O PREGUNTAR!

    ¿Por qué en ingles? Que se yo, todo queda bien en ingles, hasta los insultos :p

    Creo que me van a echar de la comunidad por estar publicando siempre el mismo tema, puros lightbox, ventanas modales, ya ni se como se llaman.

    Bueno quise inspirar en OS X pero no se si en realidad llamarlo algo Tipo OS X Porque lo único que tiene relacionado con OS X son los botones de control (Cerrar, minimizar, minimizar. Tamaño).

    Pero bueno, ya voy a pensar en algún nombre, por ahora será

    "Beautiful LightBox CSS3"

    ¿Como hice la textura del fondo del Lighbox?

    Es algo sencillo y esta hecho con :before
    Código (CSS):
    :before{
        content: "";
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: radial-gradient(rgba(255, 255, 255, .05) 20%, transparent 20%);
        background-size: 10px 10px;
        z-index: -1;
    }


    ¿Como hice el fondo de colores rojo?

    Eso se hace con la propiedad/atributo (Eso me tiene confundido) repeating-linear-gradient
    Código (CSS):
    background: repeating-linear-gradient( 45deg, #D8533B 0, #D8533B 20px, tomato 20px, tomato 40px );
        background: -webkit-repeating-linear-gradient( 45deg, #D8533B 0, #D8533B 20px, tomato 20px, tomato 40px );
        background: -moz-repeating-linear-gradient( 45deg, #D8533B 0, #D8533B 20px, tomato 20px, tomato 40px );
    Bueno, no tengo mas nada que decir, si no entienden algo o quieren saber sobre algo, para eso esta la box comentarios, otra vez en ingles :p Los botones de control, los tres, solo cierran la ventana, si quieren que le de funcionamiento real, solo díganlo y veo que puedo hacer.

    Codepen Demo

    Creo que alguien había dicho que desde Codepen se podía descargar el archivo, así que no se como se hace pero bueno, si pueden me avisan.

    PD: Por las dudas dejo el archivo :p

    Descarga
     
    A Starking Elyos, chivodev, AngelKrak y 2 otros les gusta esto.
  2. Maddenamy

    Maddenamy Miembro conocido

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    862
    Me gusta recibidos:
    486
    Puntos de trofeos:
    63
    Ocupación:
    Estudiante
    Localización:
    México
    Página web:
    Para descargar desde codepen haces clic en "share" y ahí aparece la opción "export .zip".

    Te quedó muy bien!!
     
    A KaoruMishimaru_20 le gusta esto.
  3. KaoruMishimaru_20

    KaoruMishimaru_20 Miembro conocido

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    505
    Me gusta recibidos:
    317
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    KaoruMishimaru
    Localización:
    Argentina, Buenos Aires, La Plata
    Página web:
    ¡Joya! Así ya la proxima se como es :D ¡Thanks!
     
  4. FalconMasters

    FalconMasters
    Administrador
    Miembro del Equipo

    Se incorporó:
    6 de Enero de 2015
    Mensajes:
    392
    Me gusta recibidos:
    319
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Diseñador Web
    Página web:
    Excelente aporte, muchas gracias
     
    A KaoruMishimaru_20 le gusta esto.

Comparte esta página