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…
Requisitos para tomar el curso
Principios de Animación CSS: Keyframes y Animation en Acción
Animationland game
Maquetación de Juegos con CSS y Animaciones Interactivas
Capas y posicionamiento en CSS: Uso del Z-Index en maquetación web
Dibujo de Conejitos con CSS: Estructura y Estilización
Animation y keyframes en CSS
Propiedades CSS para Animaciones y Keyframes
Animaciones CSS: Control de Duración e Iteración
Propiedades de Animación CSS: Timing Function y Delay
Propiedades CSS para Animaciones: Dirección, Relleno y Estado de Reproducción
Rendimiento de animaciones con CSS
Optimización del Renderizado Web: Layout, Paint y Composite
Debugging y uso de DevTools para optimizar animaciones web
Optimización de Animaciones Web con CSS Triggers
Libros recomendados y próximos pasos
Curso Práctico de Animaciones Interactivas
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Capas y posicionamiento en CSS: Uso del Z-Index en maquetación web
3/12Recursos
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.
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.
¿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:
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 💻.
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 🤓.
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 ✅.
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 🧩.
:::(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 🎉.
Si todo está correcto ✨, tendrías el siguiente resultado en el navegador.
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.
Si todo está correcto con el segundo layer ✨, tendrías el siguiente resultado en el navegador.
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.
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.
¡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 113
Preguntas 5
Ordenar por:
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;
Listo ya solo falta la animación
Yo hice el mio
Una forma de reducir los position:absolute repetidos, seria utilizando la wilcards de CSS
[class^="layer"] {
position: absolute;
}
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
🙂 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>
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 “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
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>
Por aquí mi resultado, fue un total reto hacerlo pero me encantó 💚💚
Acá les dejo el repositorio con el código: <https://github.com/iamanyyeei/AnimationLand-CSS>
Crear 10 divs con la clase layer-1 al 10:
div.layer-$\*10 + Enter
Hello everyone!
Evita en lo posible usar:```css
.layer{
left: 0;
right: 0;
}
``` para centrar contenido. A cambio por ejemplo, sugiero utilizar:
```js
.layer{
left: 50%;
transform: translate(-50%);
}
```Espero les sirva.
este así llevo yo mi proyecto, Reto cumplido se podría decir C:
HTML
CSS
cualquier recomendación es bien vista y de ante mano gracias <3
excelente clase, por aca les dejo como va quedando lo que estoy haciendo
Hay un error en el resumen en
"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 💻."
phone es relative y layer es absolute. Ahí lo dice al revés
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
Les comparto mi progreso:
aque dejo mi solucion
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 “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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?