abril 2024 – Página 7

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;
}

Modificar responsive layout

 @media (max-width:600px){
    #caracteristicas{
        flex-direction: column;
    }
    .caracteristica{
        width: 100%;
    }
    #portada article{
        display: none;
    }

Media queries para dispositivos

En w3school:

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

Ejemplos:

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

Tutorial bastante completo:

https://www.adictosaltrabajo.com/2012/10/11/css3-media-queries/

En css trick:

https://css-tricks.com/a-complete-guide-to-css-media-queries/

Lista de resoluciones para todos los dispositivos:

Media Queries for Standard Devices

Las más comunes:

https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/

Un artículo muy bueno sobre uso de media query.

https://www.toptal.com/designers/responsive/introduction-to-responsive-web-design-pseudo-elements-media-queries

Qué es el diseño responsive:

https://i.workana.com/glosario/que-es-el-diseno-responsive/

Ejemplos responsive:

https://web.dev/responsive-web-design-basics/

9 principios del diseño responsive:

https://blog.froont.com/9-basic-principles-of-responsive-web-design/

Menú hamburguesa solo CSS:

https://codepen.io/alvarotrigo/pen/MWEJEWG

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .example {background: pink;}
}

Layout 2 parte

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

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

<body>
    <header>
        <h1>The Corner</h1>
        <nav>
            <p>Inicio</p>
            <p>Productos</p>
            <p>Servicios</p>
            <p>Contacto</p>
        </nav>
    </header>
    <section id="eslogan">
        <h2>Bienvenidos a <span class="destacado">The Corner</span> la mejor academia para aprender.</h2>
        <h2>Cada día te preparamos para el futuro.</h2>
    </section>
    <section id="portada">
        <img src="img/academia.png" alt="academia" />
        <article>
            <h3>Aulas</h3>
            <p>Las mejores aulas de toda Barcelona.
                Medios técnicos inigualables.</p>
        </article>

    </section>
    <div class="separador"></div>
    
    <section id="caracteristicas">
        <article class="caracteristica">
            <p class="numero">1</p>
            <div>
                <h4>Titulo</h4>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, blanditiis voluptates? Ad,
                    reprehenderit animi natus nihil adipisci placeat eveniet ipsa. Facere, ullam quaerat quasi ipsa quas
                    harum est praesentium mollitia.</p>
            </div>
        </article>
        <article class="caracteristica">
            <p class="numero">2</p>
            <div>
                <h4>Titulo</h4>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, blanditiis voluptates? Ad,
                    reprehenderit animi natus nihil adipisci placeat eveniet ipsa. Facere, ullam quaerat quasi ipsa quas
                    harum est praesentium mollitia.</p>
            </div>
        </article>
        <article class="caracteristica">
            <p class="numero">3</p>
            <div>
                <h4>Titulo</h4>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, blanditiis voluptates? Ad,
                    reprehenderit animi natus nihil adipisci placeat eveniet ipsa. Facere, ullam quaerat quasi ipsa quas
                    harum est praesentium mollitia.</p>
            </div>
        </article>
    </section>
    <h2 class="texto_separador">Recent work</h2>
</body>

</html>

*{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
}
header{
    background-color: black;
    color: white;
    padding: 2em;
    /*
    De esta manera se organizan los dos elementos de la cabecera, el h1 y el nav
    display: flex;
    justify-content: space-between;
    align-items: center;
    */
}
nav{
    display: flex;
    float: right;
}
nav p{
    margin: 0 1em;
}
nav p:hover{
    color: yellow;
    cursor: pointer;
}
section{
    margin:2em;
    padding: 1em;
}
#eslogan{
    text-align: center;
    line-height: 3em;
}
.destacado{
    background-color: green;
    color: white;
    border-radius: 6px;
    padding: .2em;
}
#portada{
    position: relative;
}
#portada img{
    width: 100%;
}
#portada article{
    position: absolute;
    bottom: 2em;
    left: 2em;
    width: 30%;
    background-color: #00000095;
    color: white;
    padding: 3em;
}
.separador{
    border-bottom: solid 1px #8f8f8f;
    margin: .4em 3em;
}
#caracteristicas{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 0;
}
.caracteristica{
    display: flex;
    align-items: start;
    width: 30%;
    padding: 1em;
}

.numero{
    background-color: gray;
    border-radius: 50%;
    font-size: 1.5em;
    width: 1.3em;
    text-align: center;
    padding: .1em;
    margin: 0.1em 1em;
    flex-shrink: 0; /*para evitar que se distorsione */
}
.numero:hover{
    background-color: green;
    color:white;
}
.texto_separador{
    margin: .4em 3em;
    display: flex;
    align-items: center;
}
.texto_separador::after {
    content: '';
    flex: auto;
    margin-left: 1rem;
    border-top: 1px solid #8f8e8e;
  }

Ejemplo Grid

<!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/grid.css"/>
</head>
<body>
    <div id="contenedor">
        <div id="primero" class="elemento">1</div>
        <div id="side" class="elemento">2</div>
        <div id="content" class="elemento">3</div>
        <div id="footer" class="elemento">4</div>
        <!--
        <div class="elemento">5</div>
        <div class="elemento">6</div>
        <div class="elemento">7</div>
        <div class="elemento">8</div>
        <div class="elemento">9</div>
        <div class="elemento">10</div>
        -->
    </div>
</body>
</html>

.elemento{
    border: solid 2px gray;
    padding: 1em;
    background-color: aquamarine;
}
#contenedor{
    display: grid;
     grid-template-columns: 150px 2fr 1fr; /* unidades relativas al espacio libre */
     grid-template-rows: 1fr repeat(2,2fr);
     grid-template-areas:  'header header header header'
                           'side content content content'
                           'side content content content'
                           'side content content content'
                           'footer footer footer footer'
                           
                           ;
}
#primero{
    grid-area: header;
}
#side{
    grid-area: side;
}
#content{
    grid-area: content;
}
#footer{
    grid-area: footer;
}

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

Layout primera parte

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Corner</title>
    <link rel="stylesheet" href="css/estilos.css"/>
</head>
<body>
    <header>
        <h1>The Corner</h1>
        <nav>
            <p>Inicio</p>
            <p>Productos</p>
            <p>Servicios</p>
            <p>Contacto</p>
        </nav>
    </header>
    <section id="eslogan">
        <h2>Bienvenidos a <span class="destacado">The Corner</span> la mejor academia para aprender.</h2>
        <h2>Cada día te preparamos para el futuro.</h2>
    </section>
    <section id="portada">
        <img src="img/academia.png" alt="academia"/>
        <article>
            <h3>Aulas</h3>
            <p>Las mejores aulas de toda Barcelona. 
                Medios técnicos inigualables.</p>
        </article>
    </section>
</body>
</html>

*{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
}
header{
    background-color: black;
    color: white;
    padding: 2em;
    /*
    De esta manera se organizan los dos elementos de la cabecera, el h1 y el nav
    display: flex;
    justify-content: space-between;
    align-items: center;
    */
}
nav{
    display: flex;
    float: right;
}
nav p{
    margin: 0 1em;
}
nav p:hover{
    color: yellow;
    cursor: pointer;
}
section{
    margin:2em;
    padding: 1em;
}
#eslogan{
    text-align: center;
    line-height: 3em;
}
.destacado{
    background-color: green;
    color: white;
    border-radius: 6px;
    padding: .2em;
}
#portada{
    position: relative;
}
#portada img{
    width: 100%;
}
#portada article{
    position: absolute;
    bottom: 2em;
    left: 2em;
    width: 30%;
    background-color: black;
    color: white;
    padding: 3em;
}

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.

Ejemplo flex

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css/flex_ejemplo.css" rel="stylesheet"/>
</head>
<body>
    <head><img src="img/mascotas.jpg"><h1>Mis mascotas</h1>
    <h5>Tu mejor tienda de mascotas</h5></head>
    <div id="galeria">
        <div class="tarjeta"><h5>Gatito</h5><img src="img/gato.webp"/></div>
        <div class="tarjeta"><h5>Gatito</h5><img src="img/gato.webp"/></div>
        <div>  <div class="tarjeta"><h5>Gatito</h5><img src="img/gato.webp"/></div>
        <div class="tarjeta"><h5>Gatito</h5><img src="img/gato.webp"/></div></div>
      
        <div class="tarjeta"><h5>Gatito</h5><img src="img/gato.webp"/></div>
        <div class="tarjeta"><h5>Gatito</h5><img src="img/gato.webp"/></div>
               
       
    </div>
</body>
</html>


#galeria{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    height: 600px;
    background-color: bisque;
    align-content: stretch;
}
.tarjeta{
    background-color: chartreuse;
    border-style: solid;
    border-radius: 5px;
    border-width: 2px;
    margin: 1em;
    padding: .5em;
}
.tarjeta img{ /* pon estas propiedades a las img dentro de la clase tarjeta */
    width: 190px;
}
.tarjeta h5{
    color:red;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}