Categoría: CSS

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.

Flexbox

Hoy hemos visto una manera más eficiente de maquetar, utilizando la propiedad Flexbox. En w3schools la explican bien:

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

http://www.emenia.es/flexbox-la-caja-flexible-css3/

Podemos ver las propiedades de una manera muy visual aquí:

https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

Aquí lo podemos ver animado:

https://jstutorial.medium.com/flexbox-the-animated-tutorial-8075cbe4c1b2
Flexbox el tutorial animado

Y aquí otra guía completa:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Templates con flexbox:

https://www.quackit.com/html/templates/css_flexbox_templates.cfm

Cómo calcular como crecen y se encogen los elementos (no es tan sencillo como parece):

https://ed.team/blog/guia-definitiva-de-flexbox-2-flex-basis-flex-frow-flex-shrink

Ejemplos prácticos de cómo hacer cosas con flexbox:

https://www.sketchingwithcss.com/samplechapter/cheatsheet.html

18 recursos interesantes:

https://bashooka.com/coding/css3-flexbox-resources/

https://www.chenhuijing.com/blog/flexbox-and-absolute-positioning/

Un juego para aprender flexbox:

https://flexboxfroggy.com/#es

Repaso general

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Repaso</title>
    <link rel="stylesheet" href="css/estilos.css">
</head>

<body>
    <!-- En el html solamente tenemos el contenido no tenemos nada de estilo-->
    <h1 id="titulo">Hola que tal</h1>
    <h6>Yo muy bien</h6>
    <p class="extra">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias consequatur possimus et. Tempora dolorem
        tempore in debitis distinctio, sunt incidunt exercitationem praesentium non maxime aspernatur, sit velit
        officiis! Ut, iusto?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam illo repellendus dicta deleniti voluptates. Modi,
        maxime ab quasi accusamus consectetur doloribus sunt autem libero asperiores illum velit fugiat similique neque.
    </p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li class="movido">3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div>
        <p>Esto es un bloque</p>
    </div>
    <header>
        <h1>Bloque de cabecera</h1>
    </header>
    <main>
        <aside><p>Barra lateral</p></aside>
        <section>
            <article>
                <h3 class="extra">Artículo 1</h3>
            </article>
            <article>
                <h3>Artículo 2</h3>
            </article>
            <article>
                <h3>Artículo 3</h3>
            </article>
        </section>
        <section id="galeria">
            <div class="imagen"><img src="https://picsum.photos/200"/><h4>Esto es una foto</h4></div>
            <div class="imagen"><img src="https://picsum.photos/200"/><h4>Esto es una foto</h4></div>
            <div class="imagen"><img src="https://picsum.photos/200"/><h4>Esto es una foto</h4></div>
        </section>
    </main>
</body>

</html>

/*Estilo de todos los elementos de mi web */
*{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
body{
    overflow-x: hidden;
    /* defino  una variable para todos los elementos que estén dentro del body */
    --fondo:yellow;
}
/*Estilo de una etiqueta */
h1{
    color:rgb(81, 81, 81);
}
/* clase y va a todos los elementos de esa clase */
.extra{
    background-color: blanchedalmond;
}

/* id que es un elemento único */
#titulo{
    /* Utilizo calc para que el ancho sea el de la página menos 200px */
    width: calc(100% - 200px);
    margin: auto;
    background-color: black;
    color: blanchedalmond;
    text-align: center;
    /* Aplicamos la animación */
    animation-name: baile;
    animation-duration: 6s;
    animation-delay: 3s;
}
article{
    margin-left: 50px;
    padding: 2em;
    background-color: gainsboro;
    float: left; /* los elementos se coloquen unos al lado de otros */
}
/* todos los h3 dentro de un article */
article h3{
    margin: 0;
}
.movido{
    position: relative;
    left: 50px;
}
.imagen{
    border: solid 2px gray;
    box-shadow: 5px 5px 5px gray;
    text-align: center;
    transition: 2s;
}
.imagen img{
    width: 100%;
    /* las transiciones tarden 2seg en ejecutarse */
    transition: 2s;
}
/* La imagen se hace grande al pasar por encima */
.imagen img:hover{
    transform: scale(1.2,1.2);
}
/* Cambiamos el color al pasar por encima */
.imagen:hover{
    /* uso la variable fondo definida antes */
    background-color:var(--fondo);
}
/* con el flex consigo que todos los elementos estén alineados y responsive */
#galeria{
    display: flex;
    clear: both;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

/* Con el media query controlo que en determinadas resoluciones cambie el estilo para que
quede mejor */
@media  screen and (max-width:500px) {
    article{
        margin: 50px 0;
        float: none;
    }
    
}

/* Animación de cuatro pasos en los que cambiamos tamaño, rotación y colores */
@keyframes baile {
0%{
    transform: scale(0.5,0.5);
    color:black;
}    
25%{
    color:red;
    transform: rotate(20deg);
}
50%{
    color:black;
    transform: scale(2,1.5);
}
75%{
    transform: rotate(-20deg);
}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de layout con grid</title>
    <link rel="stylesheet" href="css/layout.css">
</head>
<body>
    <header id="pageHeader"><h1>Tornillería martínez</h1>></header>
    <article id="mainArticle"><h1>Tornillería Martínez</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam veniam laboriosam eaque, alias veritatis reprehenderit maiores nulla quis ratione sequi aliquam omnis in tenetur perferendis. Repellendus architecto harum mollitia laudantium?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam veniam laboriosam eaque, alias veritatis reprehenderit maiores nulla quis ratione sequi aliquam omnis in tenetur perferendis. Repellendus architecto harum mollitia laudantium?</p></article>
    <nav id="mainNav"><ul>
        <li>Inicio</li>
        <li>Nosotros</li>
        <li>Productos</li>
        <li>Contacto</li>
        <li>Servicios</li>
    </ul></nav>
    <div id="siteAds"><img src="https://picsum.photos/100"/><img src="https://picsum.photos/100"/></div>
    <footer id="pageFooter">(C) Diseño mortal</footer>
</body>
</html>

body { 
    display: grid;
    grid-template-areas: 
      "header header header"
      "nav article ads"
      "footer footer footer";
    grid-template-rows: 80px 1fr 70px;  
    grid-template-columns: 20% 1fr 15%;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    height: 100vh;
    margin: 0;
    }  
  header, footer, article, nav, div {
    padding: 1.2em;
    background: gold;
    }
  #pageHeader {
    grid-area: header;
    }
  #pageFooter {
    grid-area: footer;
    }
  #mainArticle { 
    grid-area: article;      
    }
  #mainNav { 
    grid-area: nav; 
    }
  #siteAds { 
    grid-area: ads; 
    } 
  /* Stack the layout on small devices/viewports. */
  @media all and (max-width: 575px) {
    body { 
      grid-template-areas: 
        "header"
        "article"
        "ads"
        "nav"
        "footer";
      grid-template-rows: 80px 1fr 70px 1fr 70px;  
      grid-template-columns: 1fr;
   }
  }

Ejemplos variables

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/variables.css">
</head>
<body>
    <h1>Hola que tal</h1>
    <h2>Muy bien</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic dolore provident minus commodi veniam, nihil necessitatibus sint nulla. Quidem explicabo facere repellendus perspiciatis ea! Impedit in eum sapiente! Et, quaerat.</p>
    <div id="anuncio">Esto es un anuncio</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

html{
    --gris:blue; /* las variables se definen con dos guiones: -- */
    --blanco:yellow;
    --tamanyo:2em;
}
h1{
    color:var(--gris);
}
#anuncio{
    --blanco:white; /*sobreescribiendo la variable blanco */
    color:var(--blanco);
    background-color:   var(--gris);
    font-size: var(--tamanyo);
}
ul{
    background-color: var(--gris);
    color: var(--blanco);
}

Ejemplo transformación

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplos transiciones</title>
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
    <div id="transicion1">Hola que tal</div>
    <div id="transicion2">Yo muy bien</div>
    <div id="transicion3">Me alegro</div>
 <div id="transicion4">Estamos en matrix</div>
</body>
</html>

div{
    width: 200px;
    height: 200px;
    background-color: orange;
}
#transicion1{
    transition: width 2s, transform 3s,background-color 4s;
}

#transicion1:hover{
    transform: rotate(45deg);
    width:300px;
    background-color: darkgreen;
}

#transicion2{
    background-color: blue;
    transition: transform 3s,background-color 4s;
}

#transicion2:hover{
    transform: skewX(45deg);
    background-color: rgb(255, 225, 58);
}

#transicion3{
    background-color: rgb(244, 35, 198);
    transition: transform 3s,background-color 4s;
}

#transicion3:hover{
    transform: rotateX(360deg);
    background-color: #26e53d;
}
#transicion4{
    background-color: rgb(75, 234, 255);
    transition: transform 3s,background-color 4s;
}

#transicion4:hover{
    transform: matrix(2,.3,.4,3,200,200);
    background-color: #f4ff7a;
}