Categoría: CSS

Modificación ejercicio

En la plantilla que ya casi tenemos acabamos lo que nos quede (si es que queda algo) y añadimos:

– Transiciones para las fotos al hacer hover. Podéis buscar inspiración en alguno de los ejemplos que hemos visto.
– Una animación para el texto de color verde en el primer párrafo. Que aparezca de alguna manera (a vuestro gusto) y se coloque en su sitio.
– Un div en plan ‘Suscríbete a nuestra newsletter’ que aparezca a los 5 segundos de entrar en la página. Puede, simplemente, aparecer, o bien os podéis flipar y meterle una animación guapa.

Galería imágenes

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galería de Fotos</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>Galería de Fotos</h1>
    </header>
    <main>
        <div class="gallery">
            <!-- Ejemplo de una tarjeta de foto -->
            <div class="photo-card">
                <img src="https://picsum.photos/300?random=1" alt="Ejemplo 1">
                <h3>Título de la Foto 1</h3>
                <p>Una breve descripción de la foto 1.</p>
            </div>
            <div class="photo-card">
                <img src="https://picsum.photos/300?random=2" alt="Ejemplo 2">
                <h3>Título de la Foto 2</h3>
                <p>Una breve descripción de la foto 2.</p>
            </div>
            <div class="photo-card">
                <img src="https://picsum.photos/300?random=3" alt="Ejemplo 1">
                <h3>Título de la Foto 1</h3>
                <p>Una breve descripción de la foto 3.</p>
            </div>
            <div class="photo-card">
                <img src="https://picsum.photos/300?random=4" alt="Ejemplo 2">
                <h3>Título de la Foto 2</h3>
                <p>Una breve descripción de la foto 4.</p>
            </div>
            <div class="photo-card">
                <img src="https://picsum.photos/300?random=5" alt="Ejemplo 1">
                <h3>Título de la Foto 1</h3>
                <p>Una breve descripción de la foto 1.</p>
            </div>
            <div class="photo-card">
                <img src="https://picsum.photos/300?random=6" alt="Ejemplo 2">
                <h3>Título de la Foto 2</h3>
                <p>Una breve descripción de la foto 2.</p>
            </div>
           
            <div class="view view-first">
                <img src="https://picsum.photos/300?random=1">
                <div class="mask">
                    <h2>Hover Style #1</h2>
                    <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                    <a href="#" class="info">Read More</a>
                </div>
            </div>
            <div class="view view-fifth">
                <img src="https://picsum.photos/300?random=8">
                <div class="mask">
                    <h2>Hover Style #5</h2>
                    <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                    <a href="#" class="info">Read More</a>
                </div>
            </div>
            <div class="view view-sixth">
                <img src="https://picsum.photos/300?random=12">
                <div class="mask">
                    <h2>Hover Style #6</h2>
                    <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                    <a href="#" class="info">Read More</a>
                </div>
            </div>
            <div class="view view-seventh">
                <img src="https://picsum.photos/300?random=11">
                <div class="mask">
                    <h2>Hover Style #7</h2>
                    <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                    <a href="#" class="info">Read More</a>
                </div>
            </div>
            <div class="view view-eighth">
                <img src="https://picsum.photos/300?random=9">
                <div class="mask">
                    <h2>Hover Style #8</h2>
                    <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                    <a href="#" class="info">Read More</a>
                </div>
            </div>
            <div class="view view-tenth">
                <img src="https://picsum.photos/300?random=10">
                <div class="mask">
                    <h2>Hover Style #10</h2>
                    <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                    <a href="#" class="info">Read More</a>
                </div>
            </div>
        </div>
    </main>
</body>
</html>

/* Estilos generales */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

/* Cabecera fija */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 15px 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

header h1 {
    margin: 0;
    font-size: 2rem;
}

/* Estilo del contenedor principal */
main {
    margin-top: 80px; /* Altura de la cabecera */
    padding: 20px;
}

/* Estilo de la cuadrícula */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Estilo de cada tarjeta de foto */
.photo-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 15px;
    text-align: center;
    transition: transform 1s, box-shadow 0.3s;
}

.photo-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.photo-card img {
    max-width: 100%;
    border-radius: 8px;
}

.photo-card h3 {
    margin: 10px 0 5px;
    font-size: 18px;
    color: #444;
}

.photo-card p {
    font-size: 14px;
    color: #666;
}
.view {
    width: 300px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    -webkit-box-shadow: 1px 1px 2px #e6e6e6;
    -moz-box-shadow: 1px 1px 2px #e6e6e6;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center;
}

.view .mask,.view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
 }
 .view img {
    display: block;
    position: relative;
 }
 .view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0;
 }
 .view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center;
 }
 .view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000;
 }
 .view a.info:hover {
    box-shadow: 0 0 5px #000;
 }
 .view-fifth img {
    transition: all 0.3s ease-in-out;
 }
 .view-fifth .mask {
    background-color: rgba(146,96,91,0.3);

    transform: translateX(-300px);
    filter: alpha(opacity=100);
    opacity: 1;
    transition: all 0.3s ease-in-out;
 }
 .view-fifth h2 {
    background: rgba(255, 255, 255, 0.5);
    color: #000;
    box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
 }
 .view-fifth p {
    filter: alpha(opacity=0);
    opacity: 0;
    color: #333;
    transition: all 0.2s linear;
 }
 .view-fifth:hover .mask {
    transform: translateX(0px);
 }
 .view-fifth:hover img {
    transform: translateX(300px);
 }
 .view-fifth:hover p {
    filter: alpha(opacity=100);
    opacity: 1;
 }

 .view-eighth .mask {
    background-color: rgba(255, 255, 255, 0.7);
    top: -200px;
    filter: alpha(opacity=0);
    opacity: 0;
    transition: all 0.3s ease-out 0.5s;
 }
 .view-eighth h2 {
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out 0.1s;
 }
 .view-eighth p {
    color: #333;
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out 0.2s;
 }
 .view-eighth a.info {
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out 0.3s;
 }
 .view-eighth:hover .mask {
    filter: alpha(opacity=100);
    opacity: 1;
    top: 0px;
    transition-delay: 0s;
    animation: bounceY 0.9s linear;
 }
 .view-eighth:hover h2 {
    transform: translateY(0px);
    transition-delay: 0.4s;
 }
 .view-eighth:hover p {
    transform: translateY(0px);
    transition-delay: 0.2s;
 }
 .view-eighth:hover a.info {
    transform: translateY(0px);
    transition-delay: 0s;
 }
 @keyframes bounceY {
     0% { transform: translateY(-205px);}
     40% { transform: translateY(-100px);}
     65% { transform: translateY(-52px);}
     82% { transform: translateY(-25px);}
     92% { transform: translateY(-12px);}
     55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
 }


 .view-first img {

    transition: all 0.2s linear;
 }
 .view-first .mask {

    filter: alpha(opacity=0);
    opacity: 0;
    background-color: rgba(219,127,8, 0.7);

    transition: all 0.4s ease-in-out;
 }
 .view-first h2 {

    transform: translateY(-100px);

    filter: alpha(opacity=0);
    opacity: 0;

    transition: all 0.2s ease-in-out;
 }
 .view-first p {

    transform: translateY(100px);

    filter: alpha(opacity=0);
    opacity: 0;

    transition: all 0.2s linear;
 }
 .view-first:hover img {
  
    transform: scale(1.1,1.1);
 }
 .view-first a.info {

    filter: alpha(opacity=0);
    opacity: 0;

    transition: all 0.2s ease-in-out;
 }
 .view-first:hover .mask {

    filter: alpha(opacity=100);
    opacity: 1;
 }
 .view-first:hover h2,
 .view-first:hover p,
 .view-first:hover a.info {

    filter: alpha(opacity=100);
    opacity: 1;

    transform: translateY(0px);
 }
 .view-first:hover p {

    transition-delay: 0.1s;
 }
 .view-first:hover a.info {
    
    transition-delay: 0.2s;
 }
                 

 .view-tenth img {
    transform: scaleY(1);
    transition: all 0.7s ease-in-out;
 }
 .view-tenth .mask {
    background-color: rgba(255, 231, 179, 0.3);
    transition: all 0.5s linear;
    filter: alpha(opacity=0);
    opacity: 0;
 }
 .view-tenth h2 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(0);
    color: #333;
    transition: all 0.5s linear;
    filter: alpha(opacity=0);
    opacity: 0;
 }
 .view-tenth p {
    color: #333;
    filter: alpha(opacity=0);
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
 }
 .view-tenth a.info {
    filter: alpha(opacity=0);
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
 }
 .view-tenth:hover img {
    transform: scale(10);
    filter: alpha(opacity=0);
    opacity: 0;
 }
 .view-tenth:hover .mask {
    filter: alpha(opacity=100);
    opacity: 1;
 }
 .view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
    transform: scale(1);
    filter: alpha(opacity=100);
    opacity: 1;
 }
                 

 .view-seventh img {
    transition: all 0.5s ease-out;
    filter: alpha(opacity=100);
    opacity: 1;
 }
 .view-seventh .mask {
    background-color: rgba(77,44,35,0.5);
    transform: rotate(0deg) scale(1);
    filter: alpha(opacity=0);
    opacity: 0;
    transition: all 0.3s ease-out;
 }
 .view-seventh h2 {
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out;
 }
 .view-seventh p {
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out;
 }
 .view-seventh a.info {
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out;
 }
 .view-seventh:hover img {
    transform: rotate(720deg) scale(0);
    filter: alpha(opacity=0);
    opacity: 0;
 }
 .view-seventh:hover .mask {
    filter: alpha(opacity=100);
    opacity: 1;
    transform: translateY(0px) rotate(0deg);
    transition-delay: 0.4s;
 }
 .view-seventh:hover h2 {
    transform: translateY(0px);
    transition-delay: 0.7s;
 }
 .view-seventh:hover p {
    transform: translateY(0px);
    transition-delay: 0.6s;
 }
 .view-seventh:hover a.info {
    transform: translateY(0px);
    transition-delay: 0.5s;
 }

 .view-sixth img {
    transition: all 0.4s ease-in-out 0.5s;
 }
 .view-sixth .mask {
    background-color: rgba(146,96,91,0.5);
    filter: alpha(opacity=0);
    opacity: 0;
    transition: all 0.3s ease-in 0.4s;
 }
 .view-sixth h2 {
    filter: alpha(opacity=0);
    opacity: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(10);
    transition: all 0.3s ease-in-out 0.1s;
 }
 .view-sixth p {
    filter: alpha(opacity=0);
    opacity: 0;
    transform: scale(10);
    transition: all 0.3s ease-in-out 0.2s;
 }
 .view-sixth a.info {
    filter: alpha(opacity=0);
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.3s ease-in-out 0.1s;
 }
 .view-sixth:hover .mask {
    filter: alpha(opacity=100);
    opacity: 1;
    transition-delay: 0s;
 }
 .view-sixth:hover img {
    transition-delay: 0s;
 }
 .view-sixth:hover h2 {
    filter: alpha(opacity=100);
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.1s;
 }
 .view-sixth:hover p {
    filter: alpha(opacity=100);
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.2s;
 }
 .view-sixth:hover a.info {
    filter: alpha(opacity=100);
    opacity: 1;
    transform: translateY(0px);
    transition-delay: 0.3s;
 }

CSS Animaciones

https://www.w3schools.com/css/css3_animations.asp

https://themeisle.com/blog/css-animations-tutorial/

https://www.lambdatest.com/blog/css-animations-tutorial/

https://cssanimation.rocks/

https://blog.hubspot.com/website/css-animation-examples

Ejemplos:

Animate

Tympanus 1

Tympanus2

https://1stwebdesigner.com/css-effects/

https://dev.to/afif/another-100-underline-overlay-animations-the-extended-css-collection-574c

Mini ejercicio grid

Cread un contenedor que tenga borde y fondo (para poder distinguirlo) y cread dentro un grid de 4 columnas iguales y 3 filas la del medio el doble que la inferior y la superior. Para poder ver si lo estamos haciendo bien podéis poner dentro 12 divs con un borde y un fondo también.

CSS Grid

Un paso más allá del flexbox es utilizar el CSS Grid, que nos permite utilizar una cuadrícula en la página, y que los elementos se posicionen en las coordenadas que queramos:

https://www.w3schools.com/css/css_grid.asp

Aquí tenemos una guía completa de cómo usar CSS grid:

https://css-tricks.com/snippets/css/complete-guide-grid/

Otra guía, en castellano y bien explicada:

https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-grid-layout/

Y otra más también muy bien explicada:

https://medium.com/@alexcamachogz/dominando-css-grid-ff916434f85a

Interactiva:

https://www.joshwcomeau.com/css/interactive-guide-to-grid/

Buenas prácticas:

https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/

Un juego para practicar grid:

https://cssgridgarden.com/#es

Usar flexbox o grid?

https://blog.logrocket.com/flexbox-vs-css-grid/

https://programacion.net/articulo/css_grid_vs_flexbox_cual_es_mas_practico_1771

Ejercicio Layout

Crear un layout con flex (y todos los conocimientos adquiridos) parecido a este:

No tiene por qué ser igual, mucho menos el mismo tema, pero sí que tenga esas secciones, divisiones, etcétera. No tiene que ser responsive porque todavía no hemos hecho media queries.