Crea una cuenta o inicia sesi贸n

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

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

1D
6H
52M
8S

Maquetando a nuestros conejitos en Animationland: contexto de apilamiento

3/12
Recursos

Aportes 100

Preguntas 4

Ordenar por:

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

o inicia sesi贸n.

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



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

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.

width: no s茅, lo que t煤 desees;
height: no s茅, lo que tu desees;

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>

Listo ya solo falta la animaci贸n

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

Hola, aqu铆 esta mi reto:

Yo hice el mio

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

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

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 鉂わ笍)

Reto completado

Reto cumplido

Primer paso!

<!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>

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.

.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: brown;
      bottom: 0;
    }
    .layer-4{
      position: absolute;
      z-index: 4;
      height: 380px;
      width: 80px;
      background: white;
      bottom: 0;
      left: 50px;

    }
    .layer-5{
      position: absolute;
      z-index: 5;
      left: 0;
      right: 20px;
      width: 220px;
      height: 320px;
      background: black;
      bottom: 0;
    }
    .layer-6{
      position: absolute;
      z-index: 6;
      height: 280px;
      width: 80px;
      background: white;
      bottom: 0;
      left: 180px;
    }
    .layer-7{
      position: absolute;
      z-index: 7;
      left: 0;
      left: 120px;
      
      width: 180px;
      height: 210px;
      background: lightseagreen;
      bottom: 0;
    }
    .layer-8{
      position: absolute;
      z-index: 8;
      right: 0;
      left: 0;
      margin: 0 auto;
      width: 150px;
      height: 100px;
      background-color:violet ;
      bottom: 0;
    }
    .layer-9{
      position: absolute;
      z-index: 9;
      width:100px ;
      height: 80px;
      background: lightyellow;
      bottom: 0;
    }
    .layer-10{
      position: absolute;
      z-index: 10;
      width:100px ;
      height: 80px;
      left: 200px;
      background: limegreen;
      bottom: 0;
    }

Para que no se le agreguen a cada una de las capas el bottom: 0;, una buena practica es que cada todos los elementos tengan una clase general y en el caso de los conejos, una clase particular, por ejemplo:
.
HTML

<body>
  <main class="phone">
    Animationland
    <div class="layer one">Layer-</div>
    <div class="layer two">Layer-</div>
    <div class="layer three">Layer-</div>
    <div class="layer four">Layer-</div>
    <div class="layer five">Layer-</div>
    <div class="layer six">Layer-</div>
    <div class="layer seven">Layer-</div>
    <div class="layer eight">Layer-</div>
    <div class="layer nine">Layer-</div>
    <div class="layer ten">Layer-</div>
  </main>
</body>

Aqu铆 todos los elementos tienen la clase layer, adem谩s de su clase particular

Si van a hacer listados, el counter-reset tambi茅n les sirve para eso

.
HTML

<ul>
  <li class="layer">
    Layer-
  </li>
  <li class="layer">
    Layer-
  </li>
  <li class="layer">
    Layer-
  </li>
  <li class="layer">
    Layer-
  </li>
  <li class="layer">
    Layer-
  </li>
  <li class="layer">
    Layer-
  </li>
  <li class="layer">
    Layer-
  </li>
  <li class="layer">
    Layer-
  </li>
</ul>

CSS

body{
  counter-reset: i;
}
.layer::after{
  counter-increment: i;
  content: counter(i);
}

.

Tratando de lograr el reto, espero que les gute

La propiedad CSS z-index indica el orden de un elemento posicionado y sus descendientes. Cuando varios elementos se superponen, los elementos con mayor valor z-index cubren aquellos con menor valor.

Un atajo para escribir los 10 div cada uno con su respectiva clase
.layer-$*10

Reto completado

Por si se atoran, aqu铆 esta el c贸digo que se utiliza en la clase

Hay vamos!

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>Document</title>
    <style>
        body {
            box-sizing: border-box;
            margin: 0;
            padding: 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 39px rgba(0, 0, 0, .4);
            z-index: 11;
        }
        .layer-1 {
            position: absolute;
            z-index: 1;
            height: 200px;
            width: 80px;
            background: chartreuse;
            bottom: 250px;
            right: 60px;
        }
        .layer-2 {
            position: absolute;
            z-index: 2;
            height: 200px;
            width: 80px;
            background: chartreuse;
            bottom: 250px;
            left: 60px;
        }
        .layer-3 {
            position: absolute;
            z-index: 3;
            left: 0;
            right: 0;
            margin: 0 auto;
            background: chocolate;
            width: 220px;
            height: 300px;
            bottom: 100px;
        }
        .layer-4 {
            position: absolute;
            z-index: 4;
            height: 200px;
            width: 80px;
            background: chartreuse;
            left: 50px;
            bottom: 150px;
        }
        .layer-5 {
            position: absolute;
            z-index: 5;
            background: chocolate;
            width: 200px;
            height: 250px;
            bottom: 50px;
            left: 0;
            border: 2px solid black;
        }
        .layer-6 {
            position: absolute;
            z-index: 6;
            height: 200px;
            width: 80px;
            background: chartreuse;
            bottom: 0;
            right: 30px;
        }
        .layer-7 {
            position: absolute;
            z-index: 7;
            width: 150px;
            height: 100px;
            bottom: 50px;
            right: 0;
            background: chocolate;
            border: 2px solid black;
        }
        .layer-8 {
            position: absolute;
            z-index: 8;
            margin: 0 auto;
            width: 200px;
            height: 100px;
            left: 0;
            right: 0;
            bottom: 0;
            background: pink;
        }
        .layer-9 {
            position: absolute;
            z-index: 9;
            width: 100px;
            height: 80px;
            bottom: 0;
            left: 0;
            background: white;
        }
        .layer-10 {
            position: absolute;
            z-index: 10;
            width: 100px;
            height: 80px;
            bottom: 0;
            right: 0;
            background: white;
        }
    </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>

Reto Cumplido!!!

El contexto de apilamiento en este caso es reconocer cada elemento del escenario y ubicarlo en una capa respectiva identificando el orden de la posici贸n z de cada una (desde el fondo hasta el frente)