Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Maquetando a nuestros conejitos en Animationland: contexto de apilamiento

3/12
Recursos

En este art铆culo, veremos en primer lugar, la definici贸n de apilamiento, ya que esta herramienta nos ser谩 de utilidad para seguir con el juego.

驴Qu茅 es el apilamiento? 馃П

El apilamiento es entendido como la sobreposici贸n de varios elementos formando una pila. Tenemos varias definiciones de cada diferente rama como en la construcci贸n, redes, entre otros.

Contexto de apilamiento en CSS 馃嵃

El contexto de apilamiento es la conceptualizaci贸n tridimensional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario en la p谩gina web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos. Es decir, vendr铆a a ser un apilamiento de forma horizontal con direcci贸n a nosotros.

Contexto de apilamiento

Una vez dicho ello, seguiremos en la creaci贸n de nuestro juego. Si analizamos la vista de c贸mo quedar铆a nuestro juego, tendr铆amos que identificar la cantidad de capas con las que contamos de acuerdo a su orden de apilamiento. Si visualizamos la siguiente imagen, visto desde otra perspectiva, podremos entender mejor el funcionamiento del contexto de apilamiento.

Ejemplo de contexto de apilamiento en nuestro juego

驴Y para qu茅 nos sirve? 馃

Es una buena pregunta, pero no te dejes enga帽ar ya que a pesar de ser un concepto sencillo, aporta con un valor enorme a nuestro juego. Adem谩s, como observamos, nos brinda una sensaci贸n de profundidad d谩ndole un toque m谩gico de realismo a nuestra p谩gina. A diferencia de usar un fondo est谩tico y no tengamos d贸nde esconder a nuestros conejitos 馃惏, conocer y usar este tipo de estrategias nos ayuda a construir una p谩gina m谩s completa y destacada 鉁.


Poniendo en pr谩ctica lo aprendido 馃惐鈥嶐煆

Una vez tengamos claro el concepto, crearemos un archivo html y colocaremos la estructura b谩sica como ya sabemos. En la etiqueta <body>, crearemos un contenedor div de clase phone, y dentro crearemos 10 contenedores div con las clases layer y layer-(n煤mero de orden), si nos ayudamos de las abreviaciones emmet, solo colocamos esto dentro de nuestra etiqueta <body>, le damos a ctrl + space y al final cuando nos salgan opciones (por lo general una) solo le damos enter.

  .phone>(.layer.layer-$)*10

Nos quedar铆a algo como esto:

Resultado de colocar la abreviaci贸n Emmet

Luego de conseguir el siguiente resultado, nos dirigimos a nuestra etiqueta <head> y agregamos la etiqueta <style>, dentro colocaremos el siguiente c贸digo, que convertir谩 la posici贸n del contenedor de clase .phone en absolute y la posici贸n de los contenedores hijos de clase .layer en relative. Tendr谩s el resultado de c贸mo quedar铆a en su editor preferido 馃捇.

Modificando la posici贸n de los elementos

Maquetando la apariencia de tel茅fono 馃摫

Luego de realizar todo lo mencionado, procederemos a agregar las siguientes propiedades dentro de la etiqueta <style>, modificando a body y el contenedor de clase .phone. Quedando como en la siguiente imagen, te explicar茅 lo que significa cada una de las propiedades m谩s adelante 馃.

Resultado al maquetar la apariencia del t茅lefono

Como podemos visualizar, hemos modificado a body, quit谩ndole el margen que viene por defecto, definiendo un alto y ancho de toda la pantalla, y modificando su propiedad display, para poder colocar al centro todos los elementos hijos directos de body, en este caso al contenedor de clase phone, esto se logr贸 con la propiedad que contiene grid que es place-items ingresando el valor de center 馃帄.

Siguiendo con la explicaci贸n, dentro del contenedor de clase .phone, hemos agregado un border de color negro y redondeado para dar la apariencia del contorno del tel茅fono 馃摫. Adem谩s, hemos definido un alto y ancho en p铆xeles, y por 煤ltimo un color de fondo de pantalla junto con una sombra.

Si has seguido los pasos correctamente, obtendr谩s el siguiente resultado en el navegador 鉁.

Resultado en el navegador al maquetar el tel茅fono

Posicionando los elementos 鈿

Una vez ya tengamos la apariencia del tel茅fono, lo que haremos ser谩 modificar uno por uno, los contenedores de clase .layer. Para ello, agregaremos cada uno de los contenedores de clase .layer-(n煤mero de orden) y agregaremos la propiedad z-index d谩ndole como valor su n煤mero de orden, te deber铆a quedar algo como esto 馃З.

Resultado de colocar los z-index a los hijos

:::(Info) (Aviso)
Los escrib铆 de esa forma para que puedas apreciar la estructura de cada uno y la captura no sea extensa, no hay problema si los escribes con su estructura normal.
:::


Modificando cada uno de los layers

Empezaremos de forma ordenada por el .layer-1 que vendr铆a a ser un conejito 馃惏, agregando un color, posici贸n y tama帽o. Con las propiedades position, background, height, entre otras. As铆 como podr谩s visualizar en la siguiente imagen 馃帀.

Modificando el layer-1 en CSS

Si todo est谩 correcto 鉁, tendr铆as el siguiente resultado en el navegador.
Resultado de modificar el layer-1

En cuanto lo hayas conseguido, podremos pasar al layer-2, que ser铆a el segundo conejito 馃惏. Tambi茅n modificaremos su color, posici贸n y tama帽o ingresando casi las mismas propiedades que hicimos con el layer anterior.

Modificando el layer-2 en CSS

Si todo est谩 correcto con el segundo layer 鉁, tendr铆as el siguiente resultado en el navegador.
Resultado de modificar el layer-2

Poco a poco, todo va tomando forma, ahora pasaremos a modificar el contenedor de clase layer-3, que tendr铆a a ser la plataforma 馃帊 desde donde se esconden los dos primeros conejitos 馃惏. Para ello, tambi茅n definiremos tama帽o, posici贸n y colores. Ingresaremos las siguientes propiedades.

Modificando el layer-3 en CSS

Explicando lo que significan cada una de las propiedades, podremos verificar que cuenta con un alto y ancho gracias a las propiedades height y width, respectivamente. Adem谩s definimos un color con ayuda de background y como nuestra posici贸n es absolute podemos ayudarnos de bottom, left, right y top para conseguir la posici贸n deseada. Y as铆 es como obtendremos el siguiente resultado en el navegador.
Resultado de modificar el layer-3

隆Felicidades! 馃帀

Esto ha sido todo por este art铆culo. Si por alguna raz贸n, no conseguiste realizarlo correctamente, no te desanimes. No todos lo logramos hacer a la primera. Recuerda que cualquier pregunta o duda puedes realizarla desde nuestra plataforma. Si has estado atento, te habr谩s dado cuenta que algunas propiedades son redundantes. Pero no te preocupes, lo solucionaremos en los pr贸ximos art铆culos 馃拵.

Te reto a que intentes avanzar los siguientes layers por tu cuenta, en el siguiente art铆culo, nos encargaremos de dibujar con CSS.

Te espero all铆 y recuerda que nunca pares de aprender 馃挌.

Contribuci贸n creada con los aportes de:Angel David Osorio Leyva

Aportes 111

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Tambi茅n les dejo este gif que hice que les explica de forma un poquito m谩s visual c贸mo funciona el contexto de apilamiento en Animationland 馃憖馃憞
.

Hola ! Un peque帽o aporte,no es necesariamente del tema pero puede ayudar.Cuando hagamos los divs enumerados para los layers,podemos usar el atajo emmet para que sea mas rapido el escribir el html.
solo escriben esto y le dan tab.

 .layer-$*10

https://docs.emmet.io/

En el navegador microsoft edge existe una manera de ver la posici贸n en el eje Z desde las dev-tools, s贸lo le tienes que dar al cuadrito de la derecha de la propiedad z-index en los estilos y te abrir谩 un visor 3D como el siguiente鈥

Aqui les dejo mi reto, lo hice en Halloween y me inspire en SquideGame!
Code here: https://codepen.io/anna_albirena/pen/WNEEdyX

Emmet

div.phone>div.layer-$*10

RETO



Quise crear mi propia versi贸n de animationland, en mi caso le llam茅 Pinguiland 馃お

Les dejo un descubrimiento que hice: para este caso, colocar los z-index no es necesario
.
Esto se debe al propio contexto de apilamiento de CSS, por defecto, el orden en el que coloquemos los elementos hijos en el HTML har谩 que se organicen de esta manera, as铆 que en el caso que nos corresponde

<div class="phone">
        <div class="layer-1"></div>
        <div class="layer-2"></div>
        <div class="layer-3"></div>
        <div class="layer-4"></div>
        <div class="layer-5"></div>
        <div class="layer-6"></div>
        <div class="layer-7"></div>
        <div class="layer-8"></div>
        <div class="layer-9"></div>
        <div class="layer-10"></div>
    </div>

Al colocarlos en este orden por defecto layer-2 quedar谩 por encima de layer-1, layer-3 por encima de layer-2 y de layer-1 y as铆 sucesivamente. Lo que en este caso que estamos trabajando har铆a que el z-index por defecto coincida con el z-index que estabamos agregando manualmente, lo cual lo hace redundante.

Listo! todav铆a no tiene la forma de los conejos y esas cosas pero vamos bien!

Heyy chicos, por si alguno necesita ayuda en la maquetaci贸n de nuestro proyecto aqu铆 les dejare mi c贸digo para poder continuar el curso sin ning煤n problema 馃槂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        body{
            margin: 0;
            height: 100vh;
            width: 100%;
            display: grid;
            place-items: center;
        }

        .phone{
            position: relative;
            border: 9px solid black;
            border-radius: 40px;
            height: 600px;
            width: 300px;
            background: #ccefff;
            box-shadow: 0 19px 38px rgb(0, 0, 0,0.30), 
            0 15px 12px rgb(0, 0, 0,0.22);
            
        }
        .layer-1{
            position: absolute;
            z-index: 1;
            height: 450px;
            width: 80px;
            background: white;
            bottom: 0;
            right: 60px;

        }
        .layer-2{
            position: absolute;
            z-index: 2;
            height: 450px;
            width: 80px;
            background: white;
            bottom: 0;
            left: 60px;
        }
        .layer-3{
            position: absolute;
            z-index: 3;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 220px;
            height: 400px;
            background: pink;
            bottom: 0;
        }
        .layer-4{
            position: absolute;
            z-index: 4;
            height: 360px;
            width: 80px;
            background: white;
            bottom: 0;
            left: 50px;
        }
        .layer-5{
            position: absolute;
            z-index: 5;
            left: 0;
            width: 220px;
            height: 290px;
            background: rgb(171, 171, 171);
            border-bottom-left-radius: 40px;
            bottom: 0;
        }
        .layer-6{
            position: absolute;
            z-index: 6;
            height: 230px;
            width: 80px;
            background: white;
            bottom: 0;
            right: 40px;
        }
        .layer-7{
            position: absolute;
            z-index: 7;
            right: 0;
            width: 170px;
            height: 180px;
            background: pink;
            border-bottom-right-radius: 30px;
            bottom: 0;
        }
        .layer-8{
            position: absolute;
            z-index: 8;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 170px;
            height: 90px;
            background: rgb(0, 21, 255);
            bottom: 0;
        }
        .layer-9{
            position: absolute;
            z-index: 9;
            left: 0;
            width: 100px;
            height: 100px;
            background: pink;
            border-bottom-left-radius: 30px;
            bottom: 0;
        }
        .layer-10{
            position: absolute;
            z-index: 10;
            right: 0;
            width: 100px;
            height: 70px;
            background: rgb(105, 105, 105);
            border-bottom-right-radius: 30px;
            bottom: 0;

        }
    </style>
</head>
<body>
    <div class="phone">
        <div class="layer-1"></div>
        <div class="layer-2"></div>
        <div class="layer-3"></div>
        <div class="layer-4"></div>
        <div class="layer-5"></div>
        <div class="layer-6"></div>
        <div class="layer-7"></div>
        <div class="layer-8"></div>
        <div class="layer-9"></div>
        <div class="layer-10"></div>
    </div>
</body>
</html>
width: no s茅, lo que t煤 desees;
height: no s茅, lo que tu desees;

Una forma de reducir los position:absolute repetidos, seria utilizando la wilcards de CSS

[class^="layer"] {
 	position: absolute;
 } 

Listo ya solo falta la animaci贸n

Yo hice el mio

Hola, aqu铆 esta mi reto:

Reto cumplido

Me emocione entre esta y la siguiente clase y termine haciendo el dibujo de Kirby y deje dos conejitos (me encari帽e con el dibujo xd 鉂わ笍)

Listo !

Hola chicos, les dejo mi reto y con c贸digo como lo tienen la maestras.

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      width: 100%;
      display: grid;
      place-items: center;
    }

    .phone {
      position: relative;
      border: 8px solid black;
      border-radius: 40px;
      height: 600px;
      width: 300px;
      background-color: #CCEFFF;
      box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
    }

    .layer {
      position: absolute;
      height: 450px;
      width: 80px;
      background-color: white;
      border-radius: 20px;

    }

    .land {
      position: absolute;
      width: 220px;
      height: 400px;
      bottom: 0;
      background-color: #B7584D;
      border-top: #58BD60 10px solid;
      border-radius: 20px 20px 0 0;
      box-shadow: 2px 4px 10px black;
    }

    .layer-1 {
      z-index: 1;
      bottom: 0;
      right: 60px;
    }

    .layer-2 {
      z-index: 2;
      bottom: 0;
      left: 60px;
    }

    .layer-3 {
      z-index: 3;
      left: 0;
      right: 0;
      margin: 0 auto;

    }

    .layer-4 {
      z-index: 4;
      bottom: 0;
      left: 30px;
      height: 350px;
      border-radius: 20px 20px 0 30px;
    }

    .layer-5 {
      z-index: 5;
      height: 300px;
      width: 190px;

      border-radius: 20px 20px 0 30px;
    }

    .layer-6 {
      z-index: 6;
      bottom: 0;
      right: 30px;
      height: 250px;
    }

    .layer-7 {
      z-index: 7;

      right: 0;
      height: 200px;
      width: 190px;
      border-radius: 20px 20px 30px 0;
    }

    .layer-8 {
      position: absolute;
      z-index: 8;
      bottom: 0;

      right: 0;
      left: 0;
      margin: 0 auto;

      width: 125px;
      height: 100px;
      background-color: #57BD60;
      border-radius: 50px 50px 0 0;

    }

    .layer-9 {
      position: absolute;
      z-index: 9;
      bottom: 0;
      left: 0;

      width: 125px;
      height: 110px;
      background-color: white;
      border-radius: 0 50px 0 30px;

    }

    .layer-10 {
      position: absolute;
      z-index: 10;
      bottom: 0;
      right: 0;

      width: 125px;
      height: 110px;
      background-color: white;
      border-radius: 50px 0 30px 0;

    }
  </style>
</head>

<body>
  <div class="phone">
    <div class="layer layer-1"> </div>
    <div class="layer layer-2"> </div>
    <div class="land layer-3"> </div>
    <div class="layer layer-4"> </div>
    <div class="land layer-5"> </div>
    <div class="layer layer-6"> </div>
    <div class="land layer-7"> </div>
    <div class=" layer-8"> </div>
    <div class=" layer-9"> </div>
    <div class=" layer-10"> </div>
  </div>
</body>

</html>

Reto cumplido!!
Trate de que se redujeran las lineas codigo y adem谩s fuera m谩s entendible con el uso de variables, se pudo reducir m谩s pero lo deje ah铆. me gustar铆a feedback, Gracias 馃槃
Link: https://codepen.io/paolojoaquin/pen/zYZPOyV

Primer paso!

Reto completado

Aqu铆 esta mi aporte
![](

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin:0;
            height: 100vh;
            width: 100%;
            display: grid;
            place-items: center;
        }
        .phone {
            position: relative;
            border: 8px solid black;
            border-radius: 40px;
            height: 600px;
            width: 300px;
            background: #ccefff;
            box-shadow: 0 19px 38px rgba(0, 0, 0,0.30),0 15px 12px rgba(0, 0, 0,0.22);
        }
        .layer-1{
            position: absolute;
            z-index: 1;
            height: 450px;
            width: 80px;
            background: white;
            bottom: 0;
            right: 60px;
            border: 2px solid black;
            border-radius: 20px;
        }
        .layer-2{
            position: absolute;
            z-index: 2;
            height: 450px;
            width: 80px;
            background: white;
            bottom: 0;
            left: 60px;
            border: 2px solid black;
            border-radius: 20px;
        }
        .layer-3{
            position: absolute;
            z-index: 3;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 220px;
            height: 400px;
            background: wheat;
            bottom: 0;
            border: 2px solid black;
            border-radius: 20px;
        }
        .layer-4{
            position: absolute;
            z-index: 4;
            height: 350px;
            width: 80px;
            background: white;
            bottom: 0;
            left:60px;
            border: 2px solid black;
            border-radius: 20px;
        }
        .layer-5{
            position: absolute;
            z-index: 5;
            left: 0;
            margin: 0 auto;
            width: 220px;
            height: 300px;
            background: wheat;
            bottom: 0;
            border: 2px solid black;
            border-radius: 20px;
        }
        .layer-6{
            position: absolute;
            z-index: 6;
            height: 250px;
            width: 80px;
            background: white;
            bottom: 0;
            right: 40px;
            border: 2px solid black;
            border-radius: 20px;
        }
        .layer-7{
            position: absolute;
            z-index: 7;
            right: 0;
            margin: 0 auto;
            width: 160px;
            height: 200px;
            background: wheat;
            bottom: 0;
            border: 2px solid black;
            border-radius: 20px;
        }
        .layer-8{
            position: absolute;
            z-index: 8;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 150px;
            height: 130px;
            background: wheat;
            bottom: 0;
            border: 2px solid black;
            border-radius: 20px;
        }
        .layer-9{        
            position: absolute;
            z-index: 9;
            height: 100px;
            width:100px;
            background: white;
            bottom: 0;
            left: 0;
            border: 2px solid black;
            border-radius: 20px;
        }
        .layer-10{
            position: absolute;
            z-index: 10;
            height: 100px;
            width: 100px;
            background: white;
            bottom: 0;
            right: 0;
            border: 2px solid black;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div class="phone">
        <div class="layer-1"></div>
        <div class="layer-2"></div>
        <div class="layer-3"></div>
        <div class="layer-4"></div>
        <div class="layer-5"></div>
        <div class="layer-6"></div>
        <div class="layer-7"></div>
        <div class="layer-8"></div>
        <div class="layer-9"></div>
        <div class="layer-10"></div>
    </div>
</body>
</html>

En HTML en VSC un atajo para cuando se quiera escribir el mismo c贸digo muchas veces como en el caso de los div con clase 鈥渓ayer-#鈥 se puede lograr de la siguiente forma, mucho mas r谩pida鈥

鈥>div.layer-$*9

div : nombre del elemento
.layer- : nombre de la clase que se le va a poner
$: Es como un contador
*9 : La cantidad de veces que quieres repetir la linea.
馃槃


Ahi vamos, poco a poco.

en el layer inicial el que contiene todo, sobre la clase phone utilizar la propiedad overflow:hidden, esto para quitar les esquinas en la parte inferior.

Reto cumplido

馃檪 Yo segu铆 la filosof铆a de Don鈥檛 Repeat Yourself, y as铆 qued贸 el borrador del futuro juego. Les dejo el c贸digo.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contexto de apilamiento</title>
    <style>
      body {
        margin: 0;
        height: 100vh;
        width: 100%;
        display: grid;
        place-items: center;
      }
      .phone {
        position: relative;
        border: 8px solid black;
        border-radius: 40px;
        height: 600px;
        width: 300px;
        background: #ccefff;
        box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3),
          0 15px 12px rgba(0, 0, 0, 0.22);
        overflow: hidden;
      }
      .phone > div {
        position: absolute;
        box-sizing: border-box;
        /* border: black 1px solid; */
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3),
          2px 2px 3px rgba(0, 0, 0, 0.8);
      }
      .conejo {
        height: 80px;
        width: 80px;
        background: white;
      }
      .tierra {
        background: #9b7653;
        width: 220px;
        height: 40%;
        border-top: green 5px solid;
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
      }
      .arbusto {
        background-color: green;
        width: 80%;
        height: 120px;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        bottom: 0;
      }
      .layer-1 {
        bottom: 380px;
        z-index: 1;
        right: 60px;
      }
      .layer-2 {
        z-index: 1;
        background: white;
        bottom: 380px;
        left: 60px;
      }
      .layer-3 {
        z-index: 2;
        left: 0;
        right: 0;
        bottom: 180px;
        margin: 0 auto;
      }
      .layer-4 {
        z-index: 3;
        bottom: 260px;
        left: 20px;
      }
      .layer-5 {
        z-index: 4;
        bottom: 60px;
      }
      .layer-6 {
        z-index: 5;
        bottom: 200px;
        right: 20px;
      }
      .layer-7 {
        z-index: 6;
        right: 0;
        bottom: 0;
      }
      .layer-8 {
        z-index: 7;
        bottom: 0;
        right: 0;
        left: 0;
        margin: 0 auto;
      }
      .layer-9 {
        z-index: 8;
        left: -50%;
      }
      .layer-10 {
        z-index: 8;
        right: -50%;
      }
    </style>
  </head>
  <body>
    <div class="phone">
      <div class="layer-1 conejo"></div>
      <div class="layer-2 conejo"></div>
      <div class="layer-3 tierra"></div>
      <div class="layer-4 conejo"></div>
      <div class="layer-5 tierra"></div>
      <div class="layer-6 conejo"></div>
      <div class="layer-7 tierra"></div>
      <div class="layer-8 arbusto"></div>
      <div class="layer-9 arbusto"></div>
      <div class="layer-10 arbusto"></div>
    </div>
  </body>
</html>

Mi aporte ser铆a que en lugar de agregar 10 clases y cada una con position absolute, le agregamos una clase extra a cada div hijo que sea layer.

.phone>(.layer.layer-$)*10

Con ello, obtendremos algo como esto:

Y solo colocamos en la etiqueta style lo siguiente:

<style>
  .phone{
    position: relative;
  }
  .layer{
    position: absolute;
  }
</style>

![](

Si queremos ahorrarnos l铆neas de c贸digo, siempre es importante conocer los selectores de CSS. Podemos usar 鈥class^=鈥榣ayer鈥橾鈥 para seleccionar todas las clases que inicien con la cadena de texto 鈥榣ayer鈥. As铆 le asignamos a todas al mismo tiempo la posici贸n absoluta.

Reto Cumplido

Estuve una hora haci茅ndolo xD pero vali贸 totalmente la pena, no sab铆a las posibilidades de CSS para poder dibujar

Si usas emmet puedes crear los layers usando el siguiente c贸digo:

Listo 馃榿.

![](

Por ahora mi arbusto ser谩 azul馃槀. Me esta encantando este curso

Si vienen del desarroollo de videojuegos, esto es m谩s f谩cil que yo en tiempos de covid.
Digo, es bastante sencillo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contexto de apilamiento</title>
</head>
<style>
    body {
        margin:0;
        height:100vh;
        width: 100%;
        display: grid;
        place-items: center;
    }

    .phone{
        position: relative;
        border: 8px solid black;
        border-radius: 20px;
        width: 300px;
        height: 600px;
        background: #CCEFFF;
        box-shadow: 0 19px 38px rgba(0,0,0,0.3), 0 15px 12px rgba(0,0,0,0.22);
    }

    .layer-1{
        position:absolute;
        z-index:1;
        height: 450px;
        width: 80px;
        background: white;
        bottom: 0;
        right: 60px;
    }

    .layer-2{
        position:absolute;
        z-index:2;
        height: 450px;
        width: 80px;
        background: white;
        bottom: 0;
        left: 60px;
    }

    .layer-3{
        position:absolute;
        z-index:3;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 220px;
        height: 400px;
        background: wheat;
        bottom: 0;

    }

    .layer-4{
        position:absolute;
        z-index:4;
        height: 350px;
        width: 80px;
        background: white;
        bottom: 0;
        left: 50px;
    }

    .layer-5{
        position:absolute;
        z-index:5;
        margin: 0 auto;
        width: 220px;
        height: 300px;
        background: gray;
        bottom: 0;
        left: 0;
        
    }

    .layer-6{
        position:absolute;
        z-index:6;
        height: 250px;
        width: 80px;
        background: white;
        bottom: 0;
        right: 20px;
    }

    .layer-7{
        position:absolute;
        z-index:7;
        margin: 0 auto;
        width: 220px;
        height: 200px;
        background: palegoldenrod;
        bottom: 0;
        right: 0;
    }

    .layer-8{
        position:absolute;
        z-index:8;
        width: 120px;
        height: 100px;
        background: palevioletred;
        bottom: 0;
        left: 0;
    }

    .layer-9{
        position:absolute;
        z-index:9;
        margin: 0 auto;
        width: 180px;
        height: 120px;
        background: lawngreen;
        bottom: 0;
        right: 0;
        left: 0;
    }

    .layer-10{
        position:absolute;
        z-index:10;
        width: 100px;
        height: 100px;
        background: olive;
        bottom: 0;
        right: 0;
    }

    
</style>
<body>
    <div class="phone">
        <div class="layer-1"></div>
        <div class="layer-2"></div>
        <div class="layer-3"></div>
        <div class="layer-4"></div>
        <div class="layer-5"></div>
        <div class="layer-6"></div>
        <div class="layer-7"></div>
        <div class="layer-8"></div>
        <div class="layer-9"></div>
        <div class="layer-10"></div>
    </div>
</body>
</html>

Me encant贸 este tip para hacer los divs r谩pidamente a partir de la anotaci贸n de Emmet: ```js .phone>(.layer.layer-$)*10 // es equivalente a:
```
Atajo en vscode: div.phone>(div.layer-$\*10) Nota: si no te funciona puedes agregar al final \*1 de forma manual: div.phone>(div.layer-$\*10)\*1
<https://codepen.io/jesuskinto/pen/yLZrayE> ![](https://static.platzi.com/media/user_upload/image-1e1e01a9-f8cd-46ea-bbec-6664447c494b.jpg)
aqu铆 est谩 el reto completado (modifiqu茅 un poco el proyecto) ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202023-11-28%20194747-b879b038-9c74-4e8f-ba1f-17c81d7349e3.jpg)![](file:///C:/Users/Nara/Pictures/Captura%20de%20pantalla%202023-11-28%20194747.png)
Les comparto mi progreso: ![](https://static.platzi.com/media/user_upload/maqueta-76031c83-2ece-469a-bd64-b644b35ee2d3.jpg)
aque dejo mi solucion ![](https://static.platzi.com/media/user_upload/image-955522a6-ea6c-45bd-8814-b0ae2e3f7282.jpg)
Para cada elemento su capa

Apilamiento:

Costo pero funciono midiendo pixeles jajajajaj

Reto terminado:

Mi nombre es Gabriel Cordero y ayer fue el d铆a 1锔忊儯2锔忊儯1锔忊儯 de mi viaje para convertirme en desarrollador web de frontend en New York. Estoy grabando mi viaje porque se que lo conseguire, si les interesa este es mi ultimo video: https://youtu.be/VKFhkmRNgnI Mis videos son en ingles ya que quiero practicarlo y mejorarlo.

Para no repetir position: absolute 10 veces en el codigo se me ocurrio utilizar este selector

div[class^="layer-"] {
      position: absolute;
    }

que dice basicamente a los div cuyo atributo class empieza con el string 鈥渓ayer-鈥 aplica los siguientes estilos

Ac谩 el resultado de mi juego hasta ahora 馃惏

Listo el pollo

Espero que haya quedado bien馃憖

Codigo CSS

body {
    margin: 0;
    height: 100vh;
    width: 100%;
    display: grid;
    place-items: center;
}

.phone {
    position: relative;
    border: 8px solid black;
    border-radius: 40px;
    height: 600px;
    width: 300px;
    background: #ccefff;
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.30);
}
.layer-1 {
    position: absolute;
    z-index: 1;
    height: 450px;
    width: 80px;
    background: white;
    bottom: 0;
    right: 60px;
    border-radius: 20px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.30);
}
.layer-2 {
    position: absolute;
    z-index: 2;
    height: 450px;
    width: 80px;
    background: white;
    bottom: 0;
    left: 60px;
    border-radius: 20px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.30);
}
.layer-3 {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 220px;
    height: 400px;
    background: chocolate;
    bottom: 0;
    border-radius: 33px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.30);
    border-top: 10px solid green;
}
.layer-4 {
    position: absolute;
    z-index: 4;
    height: 350px;
    width: 80px;
    background: white;
    bottom: 0;
    left: 30px;
    border-radius: 20px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.30);
}
.layer-5 {
    position: absolute;
    z-index: 5;
    background: chocolate;
    margin: 0 auto;
    left: 0;
    width: 200px;
    height: 300px;
    bottom: 0;
    border-bottom-left-radius: 33px;
    border-radius: 33px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.30);
    border-top: 10px solid green;
}
.layer-6 {
    position: absolute;
    z-index: 6;
    height: 240px;
    width: 80px;
    background: white;
    bottom: 0;
    right: 30px;
    border-radius: 20px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.30);
}
.layer-7 {
    position: absolute;
    z-index: 7;
    background: chocolate;
    margin: 0 auto;
    right: 0;
    width: 200px;
    height: 200px;
    bottom: 0;
    border-radius: 33px;
    box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.30);
    border-top: 10px solid green;
}
.layer-8 {
    position: absolute;
    z-index: 8;
    background: green;
    margin: 0 auto;
    width: 200px;
    height: 100px;
    bottom: 0;
    left: 50px;
    right: 50px;
    box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.30);

}
.layer-9 {
    position: absolute;
    z-index: 9;
    background: whitesmoke;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    bottom: 0;
    left: 0;
    border-bottom-left-radius: 33px;
    border-top-right-radius: 33px;
    box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.30);
}
.layer-10 {
    position: absolute;
    z-index: 10;
    background: whitesmoke;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    bottom: 0;
    right: 0;
    border-bottom-right-radius: 33px;
    border-top-left-radius: 33px;
} 

Aqu铆 como quedo el resto de la maqueta!

Tal vez no es el lugar indicado, pero creo que me enamore鈥 que increible look el de ella y su destreza, en si ella es maravillosa 鈥
Y no pense que todo eso se podia hacer con css, lo hacia con js

驴C贸mo haces para poner ese tema y qu茅 te salgan las letras de esos colores en el VSC?

Hola, comparto mi reto.

El contexto de apilamiento es una especie de eje z que va desde el navegador hacia el usuario. De esta forma se crean una serie de capaz sobre las que se van a sobreponer los elementos. Estas capas se pueden ordenar usando la propiedad z-index de CSS.


Bueno, as铆 va quedando, aun falta alg煤n trabajo extra鈥

el zindex de layer1 seria el mas cercano al origen de coordenadas (para que quede a lo mas 鈥渓ejos鈥 del usuario

Lo que llevo:

Les comparto el efecto o estilo que aplique en el background del phone.

Usando emmet podemos crear f谩cilmente los divs: div.phone>div.layer-$*10

Mi aporte de lo que seria el pre-alfa de los conejos 馃榿

aqui mi reto cumplido solo en cubitos 馃槃

Asi quedo el reto del acomodo

Es Bellisimo 馃槏馃槏馃槏馃槏

Ya listo para pasar al sigueinte paso:)
bastante sencillo pero suficiente para ir avanzando.

Este es el c贸digo en css:

馃槂 鈥 este es el resultado:

![](

Gracias a emmet lo podemos hacer de esta forma:

.phone>.layer-$*10

Por si acaso emmet viene de forma nativa en VSCode y otros.


made by cricadev

Reto completado!

RETO CUMPLIDO!!!

Hola, aqui mi reto.
.
El cesped se me ocurrio hacerlo con cuadrados invertidos, ya que un cuadrado son dos triangulitos.
.

Aunque el curso est谩 enfocado en animaci贸n con CSS, es el primer curso d贸nde empleo de forma f谩cil las famosas posiciones relativas y absolutas sin batallar tanto 馃槄

As铆 mi versi贸n de momento

Yo pensar铆a que el lejos ser铆a un z-index: 0 y el z-index cercano de 6 para que aparezca hasta arriba, 鈥渆sto lo comento antes de iniciar la clase鈥

![](

bastante lo-fi
![]()

Mi forma de completar el reto (aunque es muy sencillo)

As铆 va por el momento:

Creo que los conejos estar铆an en la capa de m谩s atr谩s, pero no s茅 si la propiedad permite valores negativos.
Ser铆a conejo de arriva Z index 0, y nuve Z index 10

css

.phone{
    width: 300px;
    height: 600px;
    position: relative;
    border: 8px solid black;
    border-radius: 30px;
    background: #CCEFFF;
    overflow: hidden;
    box-shadow: 0 19px 38px rgba(0,0,0,0.3), 0 15px 12px rgba(0,0,0,0.22);
}
.layer-1{
    position: absolute;
    height: 450px;
    width: 80px;
    z-index: 1;
    bottom: 0;
    right: 60px;
    background: white;
    border-radius: 40px;
}
.layer-2{
    position: absolute;
    height: 450px;
    width: 80px;
    z-index: 2;
    bottom: 0;
    left: 60px;
    background: #ffffff;
    border-radius: 40px;
}

.layer-3{
    position: absolute;
    height: 400px;
    width: 220px;
    z-index: 3;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    background: #6d4b1a;
    border-top: 15px solid #3b8d1b;
    border-radius: 10px;
}
.layer-4{
    position: absolute;
    height: 350px;
    width: 80px;
    z-index: 4;
    bottom: 0;
    left: 60px;
    background: white;
    border-radius: 40px;
}
.layer-5{
    position: absolute;
    height: 300px;
    width: 200px;
    z-index: 5;
    bottom: 0;
    left: 0;
    background: #7a541a;
    border-top: 15px solid #50ad2c;
    border-radius: 10px;
}
.layer-6{
    position: absolute;
    height: 250px;
    width: 80px;
    z-index: 6;
    bottom: 0;
    right: 45px;
    background: white;
    border-radius: 40px;
}
.layer-7{
    position: absolute;
    height: 200px;
    width: 170px;
    z-index: 7;
    bottom: 0;
    right: 0;
    background: #996920;
    border-top: 15px solid #5ac031;
    border-radius: 10px;
}
.layer-8{
    position: absolute;
    height: 100px;
    width: 200px;
    z-index: 8;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    background: rgb(62, 128, 73);
}
.layer-9{
    position: absolute;
    height: 80px;
    width: 100px;
    z-index: 9;
    bottom: 0;
    right: 0;
    background: white;
}
.layer-10{
    position: absolute;
    height: 80px;
    width: 100px;
    z-index: 9;
    bottom: 0;
    left: 0;
    background: white;
} 

DONE!

Asi me va quedando!

Tengo un conejito rebelde y pelon, que buen proyecto jajaja me entretuve un buen rata haciendo esto con sass 馃槃


As铆 me qued贸! 馃槃

reto

pa poner doble clase con emmet, 贸sea as铆 class="layer layer-1"
hay que poner .layer.layer-$ uwu

Me ha gustado mucho esta clase :3

Reto completado:

.layer-1 {
    z-index: 1;
    @include rabbit(450px, 160px, 0);
}
.layer-2 {
    z-index: 2;
    @include rabbit(450px, 60px, 0);
}
.layer-3 {
    z-index: 3;
    @include hill(220px, 400px, 0, 0, 0, 0, wheat);
    margin: 0 auto;
}
.layer-4 {
    position: absolute;
    z-index: 4;
    @include rabbit(345px, 30px, 0);
}
.layer-5 {
    z-index: 5;
    @include hill(220px, 300px, 0, 0, 30px, 0,gray);
}
.layer-6 {
    z-index: 6;
    @include rabbit(250px, 175px, 0);
}
.layer-7 {
    z-index: 7;
    @include hill(200px, 210px, 100px, 0, 0, 30px, salmon);
}
.layer-8 {
    z-index: 8;
    @include bush(120px, 100px, 0, 0, 0, 0, MediumSeaGreen);
    margin: 0 auto;
}
.layer-9 {
    z-index: 9;
    @include bush(100px, 80px, 200px, 0, 0, 30px, OldLace);
}
.layer-10 {
    z-index: 10;
    @include bush(100px, 80px, 0px, 0, 30px, 0, OldLace);
}

MIXINS:

@mixin rabbit($alto, $izq, $der) {
    position: absolute;
    background: white;
    width: 80px;
    height: $alto;
    bottom: 0;
    left: $izq;
    right: $der;
}

@mixin hill($ancho, $alto, $izq, $der, $esquinai, $esquinad, $fondo) {
    position: absolute;
    width: $ancho;
    height: $alto;
    left: $izq;
    right: $der;
    bottom: 0;
    border-bottom-left-radius: $esquinai;
    border-bottom-right-radius: $esquinad;
    background: $fondo;
}

@mixin bush($ancho, $alto, $izq, $der, $esquinai, $esquinad, $fondo) {
    position: absolute;
    width: $ancho;
    height: $alto;
    left: $izq;
    right: $der;
    bottom: 0;
    border-bottom-left-radius: $esquinai;
    border-bottom-right-radius: $esquinad;
    background: $fondo;
}

He realizado el reto.