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 👀👇
.
Requisitos para tomar el curso
Sabes más de animaciones de lo que crees
Animationland game
Creando contadores con CSS en Animationland
Maquetando a nuestros conejitos en Animationland: contexto de apilamiento
Dibujando a nuestros conejitos con CSS en Animationland
Animation y keyframes en CSS
Animation name y keyframe
Animation duration
Animation timing function, iteration count y delay
Animation direction, fill mode y play state
Rendimiento de animaciones con CSS
CSS Triggers: layout, paint y composite
Debugging de animaciones con DevTools
Buenas prácticas para optimizar animaciones web
Libros recomendados y próximos pasos
Continúa en el Curso Práctico de Animaciones con CSS
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Aportes 100
Preguntas 4
Ordenar por:
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
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 “layer-#” 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’t 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^=‘layer’]… para seleccionar todas las clases que inicien con la cadena de texto ‘layer’. 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 😁.
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 “layer-” 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 “lejos” 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:
😃 …y 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, “esto 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)
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.