Hice mi diseño basándome en el polo norte, así me quedó xd:
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Dibujando a nuestros conejitos con CSS en Animationland
4/12Recursos
Para este artículo, ya debemos tener la siguiente vista lista. Una vez hayas llegado a esta vista, comenzamos con los conejitos 🐰.
Empezando a maquetar nuestro primer conejito 🐇
Empezamos con el primer layer, con clase layer-1. Primero, cambiaremos el color de su fondo, por uno diferente a blanco ⬜, para que podamos visualizar los cambios que realizaremos con un mayor contraste. Y dentro de la etiqueta, colocaremos las siguientes etiquetas \<div> para las partes del cuerpo. Así como en la siguiente imagen.
Estilando a nuestro primer conejito 🎈
Estilando la oreja izquierda 🎊
Dentro de nuestra etiqueta \<style>, colocaremos el estilo de las clases agregadas hace un momento. En este caso, usaremos las etiquetas \<div> con clases left-ear--outer y left-ear--inner. Ingresando las siguientes propiedades.
Para left-ear--outer, le damos un fondo blanco, un border redondeado, un ancho y altura, le cambiamos su posición a absolute para poder indicarle la propiedad left.
Si todo ha salido bien, conseguiremos el siguiente resultado ✨.
Una vez hayas conseguido lo mismo, te reto a hacer la oreja derecha por tu cuenta. De igual forma, podrás compararlo con nuestro resultado, pero intenta realizarlo por tu cuenta primero. ¡Confío en ti! 💚
Estilando la oreja derecha 🎊
Debajo de las clases dónde estilamos la oreja izquierda, colocamos el siguiente código, que sería muy parecido a excepción de algunos puntos. Como en lugar de la propiedad left, colocamos right.
Con las siguientes propiedades, conseguiremos formar la oreja derecha. Así tendríamos las dos orejas como se muestra a continuación 🎉.
Estilando la cabeza 🐰
En cuanto hayamos conseguido realizar las orejas satisfactoriamente. Lo que haremos, será estilar la etiqueta \<div> con clase head, con las siguiente propiedades. En donde la daremos un color de fondo, un borde redondeado, un ancho y alto, un margen para colocarlo al centro y las propiedades left, right y top con ayuda de la propiedades position con valor en absolute.
Con dichas propiedades, conseguiremos lo siguiente mostrado en el navegador 🎊.
Estilando los ojos 👀
Para los ojos, lo que haremos será modificar las etiquetas \<div> con las clases head__eye, head__eye--left y head__eye--right.
Empezaremos modificando la clase head__eye 🎨. Colocaremos propiedades para definir el color de fondo, borde redondeado, un ancho y alto, y la posición en absolute.
Ahora, verás un solo punto dentro del conejo 🐰. Esto se debe a que tenemos dos ojos, pero uno está encima de otro, por eso tenemos el efecto de que solo hay uno. Así que nos faltaría modificar ahora las clases head__eye--left y head__eye--right para poder posicionar ambos ojos.
Con ello, estaríamos logrando visualizar correctamente ambos ojos de nuestro primer conejo, como lo muestra la siguiente imagen ✨.
Idea como realizar el efecto de zigzag 📍
Si queremos lograr un efecto de zigzag para el fondo o los bloques, podemos guiarnos del siguiente link haciendo click aquí{target="_blank"}.
En dónde, el artículo nos explica cómo entender la lógica para el mismo, dividiendo desde pequeñas cuadrículas para que una vez unidas logremos el efecto.
Y esto sería todo por aquí, en el siguiente artículo veremos animation name y keyframes. ¡Te esperamos! 🧩
Contribución creada con los aportes de:Angel David Osorio Leyva
Aportes 95
Preguntas 11
Ordenar por:
Intente darle un toque 3D, ahora a ponerle los conejitos
Hice un poquito de trampa pero aquí les dejo como me quedo.
😄
Les comparto el código, por si alguien se quiere guiar:
Html
<!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>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="phone">
<div class="layer-1">
<div class="left-ear--outer">
<div class="left-ear--inner"></div>
</div>
<div class="right-ear--outer">
<div class="right-ear--inner"></div>
</div>
<div class="head">
<div class="head__eye head__eye-left"></div>
<div class="head__eye head__eye-right"></div>
</div>
</div>
<div class="layer-2">
<div class="left-ear--outer">
<div class="left-ear--inner"></div>
</div>
<div class="right-ear--outer">
<div class="right-ear--inner"></div>
</div>
<div class="head">
<div class="head__eye head__eye-left"></div>
<div class="head__eye head__eye-right"></div>
</div>
</div>
<div class="layer-3">
<div class="capaVerde"></div>
</div>
<div class="layer-4">
<div class="left-ear--outer">
<div class="left-ear--inner"></div>
</div>
<div class="right-ear--outer">
<div class="right-ear--inner"></div>
</div>
<div class="head">
<div class="head__eye head__eye-left"></div>
<div class="head__eye head__eye-right"></div>
</div>
</div>
<div class="layer-5">
<div class="capaVerde"></div>
</div>
<div class="layer-6">
<div class="left-ear--outer">
<div class="left-ear--inner"></div>
</div>
<div class="right-ear--outer">
<div class="right-ear--inner"></div>
</div>
<div class="head">
<div class="head__eye head__eye-left"></div>
<div class="head__eye head__eye-right"></div>
</div>
</div>
<div class="layer-7">
<div class="capaVerde"></div>
</div>
<div class="layer-8">
<div class="grass"></div>
</div>
<div class="layer-9"></div>
<div class="layer-10"></div>
</div>
</body>
</html>
Css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
body{
background: #fff;
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
}
.phone{
position: relative;
border: 8px solid black;
border-radius: 20px;
width: 80%;
height: 80%;
background: rgb(159, 185, 252);
box-shadow: 10px 12px 10px 0px rgba(0,0,0,0.5);
}
.layer-1{
position: absolute;
z-index: 1;
width: 70px;
height: 80%;
/* background: grey; */
bottom: 0;
left: 20%;
}
.layer-2{
position: absolute;
z-index: 2;
position: absolute;
z-index: 1;
width: 70px;
height: 80%;
/* background: grey; */
bottom: 0;
right: 20%;
}
.layer-3{
position: absolute;
z-index: 3;
width: 80%;
height: 70%;
background: #BB6D50;
border-radius: 20px;
/* 67A167
A2533A*/
bottom: 0;
left: 10%;
}
.capaVerde:after{
content: "";
width: 100%;
height: 20px;
position: absolute;
top: 0;
height: 30px;
background: linear-gradient(135deg, #67A167 25%, transparent 25%) -50px 0,
linear-gradient(-135deg, #67A167 25%, transparent 25%) -50px 0,
linear-gradient(45deg, #67A167 25%, transparent 25%),
linear-gradient(-45deg, #67A167 25%, transparent 25%);
background-size: 30px 80px;
border-radius: 20px;
}
.capaVerde::before {
content: "";
position: absolute;
/* left: -0px; */
top: 15px;
width: 100%;
height: 40px;
background: linear-gradient(135deg, #a6543d 25%, transparent 25%) -50px 0,
linear-gradient(-135deg, #a6543d 25%, transparent 25%) -50px 0,
linear-gradient(45deg, #a6543d 25%, transparent 25%),
linear-gradient(-45deg, #a6543d 25%, transparent 25%);
background-size: 30px 100px;
background-position: 140px 0 0 30px 0;
}
.layer-4{
position: absolute;
z-index: 4;
width: 70px;
height: 60%;
/* background: grey; */
bottom: 0;
left: 5%;
}
.layer-5{
position: absolute;
z-index: 5;
width: 70%;
height: 50%;
background: #BB6D50;
border-radius: 20px;
box-shadow: 5px 0px 10px 0 rgba(0,0,0,0.5);
bottom: 0;
left: 0;
}
.layer-6{
position: absolute;
z-index: 6;
width: 70px;
height: 40%;
/* background: grey; */
bottom: 0;
right: 8%;
}
.layer-7{
position: absolute;
z-index: 7;
width: 55%;
height: 30%;
background: #BB6D50;
border-radius: 20px;
box-shadow: -5px 0px 10px 0 rgba(0,0,0,0.5);
bottom: 0;
right: 0;
}
.layer-8{
position: absolute;
z-index: 8;
width: 60%;
height: 20%;
bottom: 0;
right: 20%;
}
.layer-8::before{
position: absolute;
content: "";
width: 40%;
height: 70%;
bottom: 0;
left: 0;
background: #67A167;
border-radius: 100px 100px 10px 20px;
}
.layer-8::after{
position: absolute;
content: "";
width: 40%;
height: 70%;
bottom: 0;
right: 0;
background: #67A167;
border-radius: 100px 100px 10px 20px;
}
.grass{
position: absolute;
width: 40%;
height: 90%;
bottom: 0;
left: 30%;
background: #67A167;
border-radius: 100px 100px 10px 20px;
}
.layer-9{
position: absolute;
z-index: 9;
width: 40%;
height: 17%;
/* background: rosybrown; */
bottom: 0;
left: 0%;
}
.layer-9::before{
position: absolute;
content: "";
width: 75%;
height: 100%;
background: white;
border-radius: 100px 100px 10px 20px;
}
.layer-9::after{
position: absolute;
content: "";
width: 80%;
height: 60%;
bottom: 0;
right: 0;
background: white;
border-radius: 100px;
}
.layer-10{
position: absolute;
z-index: 10;
width: 40%;
height: 17%;
bottom: 0;
right: 0;
}
.layer-10::before{
position: absolute;
content: "";
width: 75%;
height: 100%;
right: 0;
background: white;
border-radius: 100px 100px 30px 20px;
}
.layer-10::after{
position: absolute;
content: "";
width: 80%;
height: 60%;
bottom: 0;
left: 0;
background: white;
border-radius: 100px;
}
.left-ear--outer{
position: absolute;
display: inline-block;
background: white;
border-radius: 90%;
width: 20px;
height: 50px;
left: 15%;
}
.left-ear--inner{
position: absolute;
background: rosybrown;
border-radius: 90%;
width: 10px;
height: 25px;
left: 5px;
top: 5px;
}
.right-ear--outer{
position: absolute;
display: inline-block;
background: white;
border-radius: 90%;
width: 20px;
height: 50px;
right: 15%;
}
.right-ear--inner{
position: absolute;
background: rosybrown;
border-radius: 90%;
width: 10px;
height: 25px;
left: 5px;
top: 5px;
}
.head{
position: absolute;
background: white;
border-radius: 90%;
width: 100%;
height: 50px;
top: 25px;
}
.head__eye{
position: absolute;
border-radius: 100%;
width: 8px;
height: 8px;
background: lightblue;
box-shadow: inset 0 0 0 2px black;
top: 25%;
}
.head__eye-left{
left: 30%;
}
.head__eye-right{
right: 30%;
}
No se que me pasó pero quise hacer otro tipo de animalito según el escenario que me saliera y como quedó en las nubes yo quise hacer cerditos voladores como por practicar jeje
Usando los pseudo elementos ::after y ::before
HTML
<div class="phone">
<div class="layer_1">
<div class="ear_left"></div>
<div class="ear_right"></div>
<div class="head"></div>
</div>
<div class="layer_2">
<div class="ear_left"></div>
<div class="ear_right"></div>
<div class="head"></div>
</div>
<div class="layer_3"></div>
<div class="layer_4">
<div class="ear_left"></div>
<div class="ear_right"></div>
<div class="head"></div>
</div>
<div class="layer_5"></div>
<div class="layer_6">
<div class="ear_left"></div>
<div class="ear_right"></div>
<div class="head"></div>
</div>
<div class="layer_7"></div>
<div class="layer_8">
<div class="grass"></div>
</div>
<div class="layer_9"></div>
<div class="layer_10"></div>
</div>
CSS
.phone {
position: relative;
width: 375px;
height: 700px;
border: solid black 8px;
border-radius: 50px;
box-shadow: 7px 8px 20px 0 #868686;
background-color: #ccefff;
overflow: hidden;
}
.layer_1 {
position: absolute;
z-index: 1;
width: 80px;
height: 520px;
bottom: 0;
left: 70px;
}
.layer_2 {
position: absolute;
z-index: 2;
width: 80px;
height: 520px;
bottom: 0;
right: 70px;
}
.layer_3 {
position: absolute;
z-index: 3;
width: 280px;
height: 460px;
background: #bb6d50;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
border-radius: 20px;
box-shadow: 7px 8px 20px 0 #868686;
overflow: hidden;
}
.layer_4 {
position: absolute;
z-index: 4;
width: 80px;
height: 380px;
bottom: 0;
left: 50px;
}
.layer_5 {
position: absolute;
z-index: 5;
width: 280px;
height: 320px;
background: #bb6d50;
bottom: 0;
border-radius: 20px;
box-shadow: 7px 8px 20px 0 #000000af;
overflow: hidden;
}
.layer_6 {
position: absolute;
z-index: 6;
width: 80px;
height: 250px;
bottom: 0;
right: 50px;
}
.layer_7 {
position: absolute;
z-index: 7;
width: 180px;
height: 190px;
background: #bb6d50;
bottom: 0;
right: 0;
border-radius: 20px;
box-shadow: 7px 8px 20px 0 #000000af;
overflow: hidden;
}
.layer_8 {
position: absolute;
z-index: 8;
width: 240px;
height: 130px;
background: #66a167;
bottom: -30px;
left: 0;
right: 0;
margin: 0 auto;
border-radius: 50px;
}
.grass {
width: 120px;
height: 120px;
background-color: #66a167;
border-radius: 50%;
position: absolute;
left: 70px;
top: -40px;
}
.grass::after {
content: "";
width: 90px;
height: 90px;
background-color: #66a167;
border-radius: 50%;
position: absolute;
left: 90px;
top: 30px;
}
.grass::before {
content: "";
width: 90px;
height: 90px;
background-color: #66a167;
border-radius: 50%;
position: absolute;
left: -70px;
top: 30px;
}
.layer_9 {
position: absolute;
z-index: 9;
width: 180px;
height: 80px;
border-radius: 50px;
background: white;
bottom: 0;
left: -50px;
}
.layer_10 {
position: absolute;
z-index: 10;
width: 180px;
height: 80px;
border-radius: 50px;
background: white;
bottom: 0;
right: -50px;
}
.layer_9::before,
.layer_10::before {
content: "";
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: white;
top: -40px;
left: 50px;
}
/* //////////////////////////////////////////////////////// */
.layer_3::after,
.layer_5::after,
.layer_7::after {
content: "";
position: absolute;
left: -0px;
top: 0px;
width: 100%;
height: 40px;
background: linear-gradient(135deg, #6aa067 25%, transparent 25%) -50px 0,
linear-gradient(-135deg, #6aa067 25%, transparent 25%) -50px 0,
linear-gradient(45deg, #6aa067 25%, transparent 25%),
linear-gradient(-45deg, #6aa067 25%, transparent 25%);
background-size: 40px 100px;
background-position: 140px 0 0 30px 0;
}
.layer_3::before,
.layer_5::before,
.layer_7::before {
content: "";
position: absolute;
left: -0px;
top: 15px;
width: 100%;
height: 40px;
background: linear-gradient(135deg, #a6543d 25%, transparent 25%) -50px 0,
linear-gradient(-135deg, #a6543d 25%, transparent 25%) -50px 0,
linear-gradient(45deg, #a6543d 25%, transparent 25%),
linear-gradient(-45deg, #a6543d 25%, transparent 25%);
background-size: 40px 100px;
background-position: 140px 0 0 30px 0;
}
/* //////////////////////////////////////////////////////// */
.ear_left {
position: absolute;
background-color: white;
border-radius: 90%;
width: 25px;
height: 60px;
left: 5px;
}
.ear_left::before {
content: "";
position: absolute;
background-color: #f9c7d1;
width: 15px;
height: 50px;
left: 5px;
top: 4px;
border-radius: 90%;
}
.ear_right {
position: absolute;
background-color: white;
border-radius: 90%;
width: 25px;
height: 60px;
right: 5px;
}
.ear_right::before {
content: "";
position: absolute;
background-color: #f9c7d1;
width: 15px;
height: 50px;
left: 5px;
top: 4px;
border-radius: 90%;
}
.head {
position: absolute;
background-color: white;
width: 80px;
height: 80px;
border-radius: 50%;
top: 30px;
}
.head::before {
content: "";
position: absolute;
background-color: black;
border-radius: 50%;
width: 5px;
height: 5px;
left: 25px;
top: 20px;
}
.head::after {
content: "";
position: absolute;
background-color: black;
border-radius: 50%;
width: 5px;
height: 5px;
right: 25px;
top: 20px;
}
Como algunos compañeros, yo también tomé inspiración de Mario para hacer mi diseño. Hice las imágenes pixel por pixel y luego las exporte como SVG
Así va quedando por el momento
Hay va tomando algo de forma!
Este fue mi resultado, hice un intento del Pato Lucas, fue bastante complicado darle forma al pico, pero dio resultado al final.
https://codepen.io/garzonsergio/pen/yLXxvNo
Asi esta quedando el proyecto, les comparto el codigo por si alguien quiere chequearlo GitHub.
recibo Feedback
mi reto:
se podria agrupar las clases ear para tener las porpiedades que tienen en comun y luego solo aplicar las propiedades de posicion a cada clase, para ahorrarse un par de lineas de css
Demore un poco pero lo logré.
Aqui les dejo mi diseño, yo quise agregarle pandas 😁
Aqui se puede visualizar mejor:
https://stivenbautista1998.github.io/pandaland/
I think it’s looking great
Aquí les dejo al forma de como hice la parte de las capas triangulares 😃
<!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);
box-sizing: border-box;
}
.layer-1{
position: absolute;
z-index: 1;
height: 450px;
width: 80px;
/* background: papayawhip; */
bottom: 0;
right: 60px;
}
.layer-2{
position: absolute;
z-index: 2;
height: 450px;
width: 80px;
/* background: papayawhip; */
bottom: 0;
left: 60px;
}
.layer-3{
position: absolute;
z-index: 3;
left: 0;
right: 0;
margin: 0 auto;
width: 220px;
height: 400px;
background: #804000;
bottom: 0;
}
.capaVerde{
width: 100%;
height: 20px;
position: absolute;
top: 0;
height: 30px;
background: linear-gradient(135deg, rgb(0, 255, 30) 25%, transparent 25%) -50px 0,
linear-gradient(-135deg, rgb(0, 255, 30) 25%, transparent 25%) -50px 0,
linear-gradient(45deg, teal 25%, transparent 25%),
linear-gradient(-45deg, teal 25%, transparent 25%);
background-size: 30px 50px;
}
.layer-4{
position: absolute;
z-index: 4;
height: 340px;
width: 80px;
/* background: papayawhip; */
bottom: 0;
left: 50px;
}
.layer-5{
position: absolute;
z-index: 5;
left: 0;
width: 220px;
height: 290px;
background: #804000;
padding-left: ;
border-bottom-left-radius: 30px;
bottom: 0;
}
.layer-6{
position: absolute;
z-index: 6;
height: 230px;
width: 80px;
/* background: papayawhip; */
bottom: 0;
right: 40px;
}
.layer-7{
position: absolute;
z-index: 7;
right: 0;
width: 170px;
height: 180px;
background: #804000;
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, 255, 30);
bottom: 0;
}
.layer-9{
position: absolute;
z-index: 9;
left: 0;
width: 100px;
height: 100px;
background: white;
border-bottom-left-radius: 30px;
bottom: 0;
}
.layer-10{
position: absolute;
z-index: 10;
right: 0;
width: 100px;
height: 70px;
background: white;
border-bottom-right-radius: 30px;
bottom: 0;
}
.left-ear--outer{
background: white;
border-radius: 90%;
width: 20px;
height: 50px;
position: absolute;
left: 10px;
}
.left-ear--inner{
background: rgb(91, 91, 91);
border-radius: 90%;
width: 10px;
height: 50px;
position: absolute;
left: 15px;
top: 8px;
}
.right-ear--outer{
background: white;
border-radius: 90%;
width: 20px;
height: 50px;
position: absolute;
right: 10px;
}
.right-ear--inner{
background: rgb(91, 91, 91);
border-radius: 90%;
width: 10px;
height: 50px;
position: absolute;
right: 15px;
top: 8px;
}
.head{
position: absolute;
width: 70px;
height: 70px;
left: 7px;
border-radius: 100px;
background: white;
top: 25px;
}
.head__eye{
background: gray;
border-radius: 50%;
width: 4px;
height: 4px;
position: absolute;
top: 15px;
}
.head__eye--left{
left: 40px;
}
.head__eye--right{
right: 35px;
}
</style>
</head>
<body>
<div class="phone">
<div class="layer-1">
<div class="left-ear--outer"></div>
<div class="left-ear--inner"></div>
<div class="right-ear--outer"></div>
<div class="right-ear--inner"></div>
<div class="head">
<div class="head__eye head__eye--left">
</div>
<div class="head__eye head__eye--right">
</div>
</div>
</div>
<div class="layer-2">
<div class="left-ear--outer"></div>
<div class="left-ear--inner"></div>
<div class="right-ear--outer"></div>
<div class="right-ear--inner"></div>
<div class="head">
<div class="head__eye head__eye--left">
</div>
<div class="head__eye head__eye--right">
</div>
</div>
</div>
<div class="layer-3">
<div class="capaVerde">
</div>
</div>
<div class="layer-4">
<div class="left-ear--outer"></div>
<div class="left-ear--inner"></div>
<div class="right-ear--outer"></div>
<div class="right-ear--inner"></div>
<div class="head">
<div class="head__eye head__eye--left">
</div>
<div class="head__eye head__eye--right">
</div>
</div>
</div>
<div class="layer-5">
<div class="capaVerde">
</div>
</div>
<div class="layer-6">
<div class="left-ear--outer"></div>
<div class="left-ear--inner"></div>
<div class="right-ear--outer"></div>
<div class="right-ear--inner"></div>
<div class="head">
<div class="head__eye head__eye--left">
</div>
<div class="head__eye head__eye--right">
</div>
</div>
</div>
<div class="layer-7">
<div class="capaVerde">
</div>
</div>
<div class="layer-8">
</div>
<div class="layer-9"></div>
<div class="layer-10"></div>
</div>
</body>
</html>
Peko
termine haciendo un Nousagi XD me encanto si quieren checarlo o agregarlo a sus proyectos se los dejo aqui además es responsive
Mi reto, aunque no soy muy bueno con la creatividad, pero para eso está la practica (son lobos, tengo que hacerle mejoras)
Hola, comparto mi proyecto.
POR EL MOMENTO PINTA BIEN 🙋🏻♂️
Lo hice casi igual solo que en vez de conejos utilice monos.
Dibujando a nuestros conejitos con CSS en Animationland
Lo que hice fue tratar de imitar lo que la profesora hizo,
con el background y el diseño del pasto.
Link: https://codepen.io/paolojoaquin/pen/PopOjxd
Muy buena la clase , aqui les dejo mis conejos
Termine mis conejitos en las montañas!!!, solo me quede con una duda ¿Cómo hago para que no se salga la nubecita del cuadro del teléfono?
Justo estoy mirando esta serie. Intente reutilizar muchas piezas…
Git
Asi va por ahora
Así va mi proyecto. Acabo de hacer los Digletts en CSS. Más adelante va a ir cogiendo más forma. 😃
Mi resultado
Hice unas cabritas bravas, me demore pero me gusto hacerlo, una locura dibujar en Css.
Yo en las clases anteriores: de seguro en la próximas clases están subidos en la sección de recursos los sprites en SVG.
La profe Estefany: no hay pedo, los dibujamos con CSS
Cada día amo más a esta profe !!
Enseña cosas que te hacen boom ! en la cabeza.
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>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);
}
.layer-1 {
position: absolute;
z-index: 1;
height: 450px;
width: 80px;
background: rgba(225, 255, 255, 0.5);
bottom: 0;
right: 60px;
}
.layer-2 {
position: absolute;
z-index: 2;
height: 450px;
width: 80px;
background: rgba(225, 255, 255, 0.5);
bottom: 0;
left: 60px;
}
.layer-3 {
position: absolute;
z-index: 3;
left: 0;
right: 0;
margin: 0 auto;
width: 220px;
height: 400px;
background: chocolate;
bottom: 0;
border-radius: 30px;
border: 1px solid rgb(103, 60, 60);
}
.layer-4 {
position: absolute;
z-index: 4;
height: 350px;
width: 80px;
background: rgba(225, 255, 255, 0.5);
bottom: 0;
left: 20px;
}
.layer-5 {
position: absolute;
z-index: 5;
width: 220px;
height: 300px;
background: chocolate;
border-radius: 30px;
bottom: 0;
border: 1px solid rgb(103, 60, 60);
}
.layer-6 {
position: absolute;
z-index: 6;
height: 250px;
width: 80px;
background: rgba(225, 255, 255, 0.5);;
bottom: 0;
right: 30px;
}
.layer-7 {
position: absolute;
z-index: 7;
width: 150px;
height: 200px;
background: chocolate;
right: 0px;
bottom: 0;
border: 1px solid rgb(103, 60, 60);
border-radius: 30px;
}
.layer-8 {
position: absolute;
z-index: 8;
left: 0;
right: 0;
margin: 0 auto;
width: 220px;
height: 100px;
background: green;
bottom: 0;
}
.layer-9 {
position: absolute;
z-index: 9;
height: 100px;
width: 100px;
background: white;
bottom: 0;
right: 0px;
}
.layer-10 {
position: absolute;
z-index: 10;
height: 100px;
width: 100px;
background: white;
bottom: 0;
left: 0px;
}
.left-ear--outer {
background: white;
border-radius: 90%;
width: 20px;
height: 50px;
position: absolute;
left: 10px;
}
.left-ear--inner {
background: pink;
border-radius: 90%;
width: 10px;
height: 50px;
position: absolute;
left: 15px;
top: 10px;
}
.right-ear--outer {
background: white;
border-radius: 90%;
width: 20px;
height: 50px;
position: absolute;
right: 10px;
}
.right-ear--inner {
background: pink;
border-radius: 90%;
width: 10px;
height: 50px;
position: absolute;
right: 15px;
top: 10px;
}
.head {
background: white;
border-radius: 50px;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
width: 80px;
height: 80px;
top: 30px;
}
.head__eye {
background: gray;
border-radius: 50%;
width: 4px;
height: 4px;
position: absolute;
top: 12px;
}
.head__eye--left {
left: 30px;
}
.head__eye--right {
right: 30px;
}
.left-ear--outer2 {
background: white;
border-radius: 90%;
width: 20px;
height: 50px;
position: absolute;
left: 10px;
}
.left-ear--inner2 {
background: pink;
border-radius: 90%;
width: 10px;
height: 50px;
position: absolute;
left: 15px;
top: 10px;
}
.right-ear--outer2 {
background: white;
border-radius: 90%;
width: 20px;
height: 50px;
position: absolute;
right: 10px;
}
.right-ear--inner2 {
background: pink;
border-radius: 90%;
width: 10px;
height: 50px;
position: absolute;
right: 15px;
top: 10px;
}
.head2 {
background: white;
border-radius: 50px;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
width: 80px;
height: 80px;
top: 30px;
}
.head__eye2 {
background: gray;
border-radius: 50%;
width: 4px;
height: 4px;
position: absolute;
top: 12px;
}
.head__eye--left2 {
left: 30px;
}
.head__eye--right2 {
right: 30px;
}
.left-ear--outer4 {
background: white;
border-radius: 90%;
width: 20px;
height: 50px;
position: absolute;
left: 10px;
}
.left-ear--inner4 {
background: pink;
border-radius: 90%;
width: 10px;
height: 50px;
position: absolute;
left: 15px;
top: 10px;
}
.right-ear--outer4 {
background: white;
border-radius: 90%;
width: 20px;
height: 50px;
position: absolute;
right: 10px;
}
.right-ear--inner4 {
background: pink;
border-radius: 90%;
width: 10px;
height: 50px;
position: absolute;
right: 15px;
top: 10px;
}
.head4 {
background: white;
border-radius: 50px;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
width: 80px;
height: 80px;
top: 30px;
}
.head__eye4 {
background: gray;
border-radius: 50%;
width: 4px;
height: 4px;
position: absolute;
top: 12px;
}
.head__eye--left4 {
left: 30px;
}
.head__eye--right4 {
right: 30px;
}
.left-ear--outer6 {
background: white;
border-radius: 90%;
width: 20px;
height: 50px;
position: absolute;
left: 10px;
}
.left-ear--inner6 {
background: pink;
border-radius: 90%;
width: 10px;
height: 50px;
position: absolute;
left: 15px;
top: 10px;
}
.right-ear--outer6 {
background: white;
border-radius: 90%;
width: 20px;
height: 50px;
position: absolute;
right: 10px;
}
.right-ear--inner6 {
background: pink;
border-radius: 90%;
width: 10px;
height: 50px;
position: absolute;
right: 15px;
top: 10px;
}
.head6 {
background: white;
border-radius: 50px;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
width: 80px;
height: 80px;
top: 30px;
}
.head__eye6 {
background: gray;
border-radius: 50%;
width: 4px;
height: 4px;
position: absolute;
top: 12px;
}
.head__eye--left6 {
left: 30px;
}
.head__eye--right6 {
right: 30px;
}
.ground-3 {
width: 220px;
height: 40px;
border-radius: 30px 30px 0 0;
top: 0px;
position: absolute;
background: #51af5e;
}
.ground-5 {
width: 220px;
height: 40px;
border-radius: 30px 30px 0 0;
top: 0px;
position: absolute;
background: #51af5e;
}
.ground-7 {
width: 150px;
height: 40px;
border-radius: 30px 30px 0 0;
top: 0px;
position: absolute;
background: #51af5e;
}
.zigzag-3 {
position: absolute;
background: linear-gradient(
135deg
, #51af5e 25%, transparent 25%) -50px 0, linear-gradient(
-135deg
, #51af5e 25%, transparent 25%) -50px 0, linear-gradient(
45deg
, chocolate 25%, transparent 25%), linear-gradient(
-45deg
, transparent 25%, #a54a38 25%);
background-size: 33px 30px;
height: 30px;
width: 100%;
top: 29px
}
.zigzag-5 {
position: absolute;
background: linear-gradient(
135deg
, #51af5e 25%, transparent 25%) -50px 0, linear-gradient(
-135deg
, #51af5e 25%, transparent 25%) -50px 0, linear-gradient(
45deg
, chocolate 25%, transparent 25%), linear-gradient(
-45deg
, transparent 25%, #a54a38 25%);
background-size: 33px 30px;
height: 30px;
width: 100%;
top: 29px
}
.zigzag-7 {
position: absolute;
background: linear-gradient(
135deg
, #51af5e 25%, transparent 25%) -50px 0, linear-gradient(
-135deg
, #51af5e 25%, transparent 25%) -50px 0, linear-gradient(
45deg
, chocolate 25%, transparent 25%), linear-gradient(
-45deg
, transparent 25%, #a54a38 25%);
background-size: 33px 30px;
height: 30px;
width: 100%;
top: 29px
}
</style>
</head>
<body>
<div class="phone">
<div class="layer-1">
<div>
<div class="left-ear--outer"></div>
<div class="left-ear--inner"></div>
<div class="right-ear--outer"></div>
<div class="right-ear--inner"></div>
<div class="head">
<div class="head__eye head__eye--left"></div>
<div class="head__eye head__eye--right"></div>
</div>
</div>
</div>
<div class="layer-2">
<div>
<div class="left-ear--outer2"></div>
<div class="left-ear--inner2"></div>
<div class="right-ear--outer2"></div>
<div class="right-ear--inner2"></div>
<div class="head2">
<div class="head__eye2 head__eye--left2"></div>
<div class="head__eye2 head__eye--right2"></div>
</div>
</div>
</div>
<div class="layer-3">
<div>
<div class="ground-3"></div>
<div class="zigzag-3"></div>
</div>
</div>
<div class="layer-4">
<div>
<div class="left-ear--outer4"></div>
<div class="left-ear--inner4"></div>
<div class="right-ear--outer4"></div>
<div class="right-ear--inner4"></div>
<div class="head4">
<div class="head__eye4 head__eye--left4"></div>
<div class="head__eye4 head__eye--right4"></div>
</div>
</div>
</div>
<div class="layer-5">
<div>
<div class="ground-5"></div>
<div class="zigzag-5"></div>
</div>
</div>
<div class="layer-6">
<div>
<div class="left-ear--outer6"></div>
<div class="left-ear--inner6"></div>
<div class="right-ear--outer6"></div>
<div class="right-ear--inner6"></div>
<div class="head6">
<div class="head__eye4 head__eye--left6"></div>
<div class="head__eye4 head__eye--right6"></div>
</div>
</div>
</div>
<div class="layer-7">
<div>
<div class="ground-7"></div>
<div class="zigzag-7"></div>
</div>
</div>
<div class="layer-8"></div>
<div class="layer-9"></div>
<div class="layer-10"></div>
</div>
</body>
</html>
Tengo mucho por mejorar pero quiero mostrar mi avance
.
HTML
<!DOCTYPE html>
<html lang="es">
<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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<main>
<div class="phone">
<div class="layer-1 conejo">
<div class="left-ear--outer ear--outer"></div>
<div class="left-ear--inner ear--inner"></div>
<div class="right-ear--outer ear--outer"></div>
<div class="right-ear--inner ear--inner"></div>
<div class="head">
<div class="head__eye head__eye--left"></div>
<div class="head__eye head__eye--right"></div>
</div>
</div>
<div class="layer-2 conejo">
<div class="left-ear--outer ear--outer"></div>
<div class="left-ear--inner ear--inner"></div>
<div class="right-ear--outer ear--outer"></div>
<div class="right-ear--inner ear--inner"></div>
<div class="head">
<div class="head__eye head__eye--left"></div>
<div class="head__eye head__eye--right"></div>
</div>
</div>
<div class="layer-3 terreno">
<div class="cesped">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="layer-4 conejo">
<div class="left-ear--outer ear--outer"></div>
<div class="left-ear--inner ear--inner"></div>
<div class="right-ear--outer ear--outer"></div>
<div class="right-ear--inner ear--inner"></div>
<div class="head">
<div class="head__eye head__eye--left"></div>
<div class="head__eye head__eye--right"></div>
</div>
</div>
<div class="layer-5 terreno">
<div class="cesped">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="layer-6 conejo">
<div class="left-ear--outer ear--outer"></div>
<div class="left-ear--inner ear--inner"></div>
<div class="right-ear--outer ear--outer"></div>
<div class="right-ear--inner ear--inner"></div>
<div class="head">
<div class="head__eye head__eye--left"></div>
<div class="head__eye head__eye--right"></div>
</div>
</div>
<div class="layer-7 terreno">
<div class="cesped">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="layer-8 ">
<div class="cesped-central">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="layer-9">
<div class="nube nube-left">
<div></div>
<div></div>
</div>
</div>
<div class="layer-10">
<div class="nube nube-right">
<div></div>
<div></div>
</div>
</div>
</div>
</main>
</body>
</html>
CSS
/*
1. Posicionamiento
2. Modelo de caja
3. Tipografia
4. Visuales
5. Otros
*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
html{
font-size: 62.2%;
font-family: "Roboto", sans-serif;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100vh;
display: grid;
place-content: center;
font-size: 1.5rem;
}
body{
background: gray;
}
/* REUTILIZACION GENERACION DE CONEJO */
.conejo{
width: 80px;
}
.ear--outer{
position: absolute;
width: 20px;
height: 50px;
border-radius: 90%;
background: white;
}
.ear--inner{
position: absolute;
width: 10px;
height: 40px;
border-radius: 90%;
background: pink;
}
.left-ear--outer{
left: 10px;
}
.left-ear--inner{
top: 8px;
left: 15px;
}
.right-ear--outer{
right: 10px;
}
.right-ear--inner{
top: 8px;
right: 15px;
}
.head{
position: absolute;
width: 70px;
height: 60px;
border-radius: 55%;
background: white;
left: 5px;
top: 30px;
}
.head__eye{
position: relative;
width: 10px;
height: 10px;
border-radius: 50%;
border: 3px solid black;
background: white;
}
.head__eye--left{
left: 18px;
top: 20px;
}
.head__eye--right{
left: 40px;
top: 10px;
}
/* REUTILIZACION GENERACION DE TERRENO */
.terreno{
bottom: 0;
border: 1px solid black;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
overflow: hidden;
background: #a52a2a;
}
/* REUTILIZACION GENERACION DE CESPED */
.cesped{
display: flex;
flex-direction: row;
width: 100%;
height: 55px;
}
.cesped div{
width: 100%;
height: 100%;
background: linear-gradient(-135deg, #008000 25%, transparent 25%) -15px 0,
linear-gradient(135deg, #008000 25%, transparent 25%) -15px 0;
}
/* .cesped div:nth-child(2n+1){
width: 100%;
height: 100%;
background: linear-gradient(120deg, #008000 25%,#a52a2a 25%);
} */
/* FORMA DEL PHONE */
.phone{
width: 300px;
height: 600px;
position: relative;
border: 8px solid black;
border-radius: 40px;
/* background: #CCEEFF; */
background: linear-gradient(100deg, #405DE6, #5B51D8, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80);
box-shadow: 0 19px 38px rgb(255, 255, 255, 0.4),0 15px 12px rgb(255, 255, 255, 0.4);
}
/* POSICIONAMIENTO DE ELEMENTOS */
.layer-1,.layer-2,.layer-3,.layer-4,.layer-5,.layer-6,.layer-7,.layer-8,.layer-9,.layer-10{
position: absolute;
}
.layer-1{
height: 470px;
bottom: 0;
right: 55px;
z-index: 2;
}
.layer-2{
height: 470px;
bottom: 0;
left: 55px;
z-index: 2;
}
.layer-3{
width: 220px;
height: 400px;
margin: 0 auto;
left: 0;
right: 0;
z-index: 4;
}
.layer-4{
height: 370px;
bottom: 0;
left: 35px;
z-index: 6;
}
.layer-5{
width: 150px;
height: 300px;
left: 0;
border-bottom-left-radius: 30px;
z-index: 8;
}
.layer-6{
height: 270px;
bottom: 0;
right: 35px;
z-index: 10;
}
.layer-7{
width: 150px;
height: 200px;
right: 0;
border-bottom-right-radius: 30px;
z-index: 12;
}
.layer-8{
width: 284px;
height: 100px;
bottom: 0;
z-index: 14;
}
.layer-9{
bottom: 0;
z-index: 16;
}
.layer-10{
right: 0;
bottom: 0;
z-index: 16;
}
/* GENERACION DE CESPED CENTRAL */
.cesped-central{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
.cesped-central div:nth-child(1){
width: 70px;
height: 70px;
position: absolute;
background: #008000;
border-radius: 50%;
bottom: 0;
left: 50px;
}
.cesped-central div:nth-child(2){
width: 100px;
height: 100px;
position: absolute;
background: #008000;
border-radius: 50%;
bottom: 0;
left: 90px;
}
.cesped-central div:nth-child(3){
width: 70px;
height: 70px;
position: absolute;
background: #008000;
border-radius: 50%;
bottom: 0;
right: 50px;
}
.cesped-central div:nth-child(4){
width: 284px;
height: 30px;
position: absolute;
background: #008000;
bottom: 0;
}
/* GENERACION DE NUBES */
.nube{
width: 100px;
height: 80px;
position: relative;
overflow: hidden;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
.nube div:nth-child(1){
position: absolute;
width: 70px;
height: 60px;
border-radius: 50%;
background: #CCEEFF;
}
.nube div:nth-child(2){
position: absolute;
width: 100%;
height: 55px;
border-radius: 40px;
background: #CCEEFF;
bottom: 0;
}
/* UBICACION DE NUBES */
.nube-left div:nth-child(1){
left: 4px;
}
.nube-right div:nth-child(1){
right: 0;
}
Bueno, yo quería que de cada hoyo saliera un topo, pero parece mas un botón
.
.
HTML
<body>
<main class="phone">
Animationland
<div class="row">
<div class="hole">
<div></div>
</div>
<div class="hole">
<div></div>
</div>
<div class="hole">
<div></div>
</div>
</div>
<div class="row">
<div class="hole">
<div></div>
</div>
<div class="hole">
<div></div>
</div>
<div class="hole">
<div></div>
</div>
</div>
<div class="row">
<div class="hole">
<div></div>
</div>
<div class="hole">
<div></div>
</div>
<div class="hole">
<div></div>
</div>
</div>
<div class="row">
<div class="hole">
<div></div>
</div>
<div class="hole">
<div></div>
</div>
<div class="hole">
<div></div>
</div>
</div>
</main>
</body>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 600px;
}
.phone{
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
position: relative;
left: calc(50% - 205px);
top: calc(50% - 225px);
width: 410px;
height: 450px;
border: 3px solid black;
border-radius: 25px;
box-shadow: 0 10px 15px rgba(0,0,0,0.8);
text-align: center;
font-size: 22px;
}
.row{
display: flex;
align-items: center;
justify-content: space-around;
width: 90%;
height: 60px;
box-shadow: 0 17px 20px rgba(0,0,0,0.5);
border-radius: 15px;
}
.hole{
position: relative;
width: 65px;
height: 65px;
border-radius: 30px;
transform: rotateX(250deg);
box-shadow: inset 1px 1px 10px;
}
.hole div{
position:absolute;
left: 5%;
width: 58.5px;
height: 117px;
background-color: rgb(52, 152, 219);
border-radius: 30px;
box-shadow: inset 5px -7px 20px rgba(255, 255, 255, 0.8);
}
Reto cumplido:)
Así va quedando mi maquetación.
<https://codepen.io/jesuskinto/pen/yLZrayE>
Comparto mi avance
Para no repetir tanto código opté por tener las clases de la orejita exterior e interior, y reutilizarla para crear la otra orejita, y a la hora de posicionarlas crear una clase que se dedique solo al posicionamiento, derecho e izquierdo, espero sirva:)
HTML
```js
```CSS
```js
.ear-outer{
position: absolute;
width: 20px;
height: 50px;
border-radius: 90%;
background-color: white;
}
.ear-inner{
position: absolute;
width: 10px;
height: 50px;
background-color: pink;
border-radius: 90%;
left: 5px;
top: 8px;
}
.ear-left{
left: 10px;
}
.ear-right{
right: 10px;
}
```
Ha costado, pero ahí vamos
Las Dev Tools de Internet explorer son muy buenas para debuggear el contexto de apilamiento.
.
.
So far
Aquí dejo el mío
Ejemplo 1.-
Para los ojos del conejo, en CSS, solo usé el tamaño del border para darle el tamaño sin width ni height.
Ejemplo 2.-
Ahí vamos gente ✌️🐰
Listisimo el pollo ❤️
Hola le agregue unos assets para darle un estilo mas retro.
En vez de .left-ear–inner .left-ear–outer y poner diseño a cada uno se puede hacer solo con border white de este modo:
.ear-l {
position: relative;
top: -28px;
height: 60px;
width: 20px;
border: 6px solid #fdfdfd;
border-radius: 44%;
background: #f2b7e6;
transform: rotate(-8deg);
z-index: -2;
}
.ear-r {
position: relative;
top: -28px;
height: 60px;
width: 20px;
border: 6px solid #fdfdfd;
border-radius: 44%;
background: #f2b7e6;
transform: rotate(8deg);
z-index: -2;
}
Así va mi avance
Por ahora tengo esto. ¿Alguien me podría decir como hacer las nubes o arbustos que están debajo en donde me quedaron los cuadrados verdes y blanco? Es lo único que no me sale.
Reto completado, yo decidi hacer mi juego con fantasmas
Les comparto lo que llevo hasta ahora.
Mi diseño hasta el momento
Me parece que el ejercicio está bueno pero siento que no tiene una buena explicación. Va muy rápido para mi, y aqui debería explicar cómo hizo el ejercicio. Continuar no creo que esté bien cuando no explicó como llegó a lo que hizo.
Así va quedando el mio, toma inspiracion en esos juegos de pegarle al topo y por eso el aspecto de el entorno
hasta el momento me a funcionado bien
Así me quedó mi maquetación!!
.
.
.
Mi humilde aporte, quise hacer algo mejor, pero creo que me falta resto por aprender
En esta clase me quise adelantar a la jugada y quise ver si podia llegar al resultado final de la maquetacion, no me quedo igualita pero creo que para ser mi primera vez dibujando en css quedo bastante bien jajaj.
asi me quedo despues de probar muchos estilos
despues le agrego nubes en la parte de atras 😄
Despues de un gran esfuerzo haciendo los gatos y los hongos este es mi resultado hasta el momento.
https://codepen.io/camisilvita/pen/rNdbOwd
Así va el mío !
Bueno, aquí va mi aporte, jugando un poquito con los patrones de background
De esta forma realice los arbustos.
<code>
html
<div class="layer-8">
<div class="plant__green-1 plant__green plant"></div>
<div class="plant__green-2 plant__green plant"></div>
<div class="plant__green-3 plant__green plant"></div>
<div class="plant__green-4 plant__green plant"></div>
<div class="plant__white-1 plant__white plant"></div>
<div class="plant__white-2 plant__white plant"></div>
<div class="plant__white-3 plant__white plant"></div>
<div class="plant__white-4 plant__white plant"></div>
<div class="plant__white-5 plant__white plant"></div>
<div class="plant__white-6 plant__white plant"></div>
</div>
css
.layer-8 .plant{
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
}
.layer-8 .plant__green{
background-color: var(--light--green);
}
.layer-8 .plant__white{
background-color: whitesmoke;
}
.layer-8 .plant__green-1{
left: 110px;
}
.layer-8 .plant__green-2{
left: 45px;
top: 35px;
}
.layer-8 .plant__green-3{
right: 45px;
top: 25px;
}
.layer-8 .plant__green-4{
left: 100px;
bottom: 0;
border-radius: 0;
width: 100px;
}
.layer-8 .plant__white-1{
top: 15;
}
.layer-8 .plant__white-2{
bottom: 0;
left: 61;
width: 60px;
height: 60px;
border-radius: 50% 50% 50% 0;
}
.layer-8 .plant__white-3{
bottom: 0;
border-radius: 0 50% 0 0;
height: 70px;
width: 70px;
}
.layer-8 .plant__white-4{
top: 20;
right: 0;
}
.layer-8 .plant__white-5{
right: 61;
bottom: 0;
width: 60px;
height: 60px;
border-radius: 50% 50% 0 50%;
}
.layer-8 .plant__white-6{
bottom: 0;
right: 0;
height: 70px;
width: 70px;
border-radius: 50% 8px 0 0;
Aquí 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>Document</title>
<style>
body{
margin: 0;
height: 100vh;
width: 100vw;
display: grid;
place-items: center;
}
.phone{
width: 300px;
height: 600px;
position: relative;
border: 8px solid black;
border-radius: 40px;
background: #CCEFFF;
overflow: hidden;
box-shadow: 0px 19px 38px rgba(0, 0, 0, 0.3), 0px 15px 12px rgba(0, 0, 0, 0.22);
}
.layer{
position: absolute;
}
.wall{
border: 1px solid black;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
background: #bb6d50;
overflow: hidden;
}
.zig-zag{
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 100%;
height: 25px;
background: linear-gradient(135deg, #66a167 25%, transparent 25%) -17px 0,
linear-gradient(-135deg, #66a167 25%, transparent 25%) -17px 0,
linear-gradient(45deg, #66a16700 25%, #a1553c 25%),
linear-gradient(-45deg, #66a16700 25%, #a1553c 25%);
background-size: 35px 35px;
}
.rabbit{
/* background: peachpuff; */
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.left-ear--outer{
background: white;
border-radius: 90%;
width: 20px;
height: 50px;
position: absolute;
left: 10px;
}
.left-ear--inner{
background: pink;
border-radius: 90%;
width: 10px;
height: 50px;
position: absolute;
left: 15px;
top: 8px;
}
.right-ear--outer{
background: white;
border-radius: 90%;
width: 20px;
height: 50px;
position: absolute;
right: 10px;
}
.right-ear--inner{
background: pink;
border-radius: 90%;
width: 10px;
height: 50px;
position: absolute;
right: 15px;
top: 8px;
}
.head{
width: 100%;
height: 80px;
border-radius: 50%;
background: white;
position: absolute;
top: 30px;
left: 0;
right: 0;
margin: 0 auto;
}
.head__eye{
background: gray;
width: 4px;
height: 4px;
border-radius: 2px;
position: absolute;
top: 12px
}
.head__eye--left{
left: 30px;
}
.head__eye--right{
right: 30px;
}
.layer-1{
z-index: 1;
height: 450px;
width: 80px;
bottom: 0;
right: 60px;
}
.layer-2{
z-index: 2;
height: 450px;
width: 80px;;
bottom: 0;
left: 60px;
}
.layer-3{
z-index: 3;
width: 200px;
height: 400px;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
}
.layer-4{
z-index: 4;
height: 330px;
width: 80px;
bottom: 0;
left: 40px;
}
.layer-5{
z-index: 5;
width: 180px;
height: 280px;
bottom: 0;
}
.layer-6{
z-index: 6;
height: 230px;
width: 80px;
bottom: 0;
right: 40px;
}
.layer-7{
z-index: 7;
width: 180px;
height: 180px;
bottom: 0;
right: 0;
}
.layer-8{
z-index: 8;
width: 180px;
height: 120px;
/* background: whitesmoke; */
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
overflow: hidden;
}
.layer-9{
z-index: 9;
width: 100px;
height: 100px;
/* background: palevioletred; */
bottom: 0;
left: 0;
overflow: hidden;
}
.layer-10{
z-index: 10;
width: 100px;
height: 100px;
/* background: palevioletred; */
bottom: 0;
right: 0;
overflow: hidden;
}
.tree{
height: 100%;
width: 75px;
background: #66a167;
position: absolute;
bottom: 0;
border-top-left-radius: 64px;
border-top-right-radius: 64px;
left: 0;
right: 0;
margin: 0 auto;
}
.tree1{
height: 100%;
}
.tree2{
height: 70%;
transform-origin: bottom;
transform: rotate(-45deg);
bottom: 10px;
}
.tree3{
height: 70%;
transform-origin: bottom;
transform: rotate(45deg);
bottom: 10px;
}
.tree4{
height: 70%;
transform-origin: bottom;
transform: rotate(-90deg);
bottom: 0px;
}
.tree5{
height: 70%;
transform-origin: bottom;
transform: rotate(90deg);
bottom: 0px;
}
.nube{
background-color: white;
position: absolute;
border-top-left-radius: 64px;
border-top-right-radius: 64px;
}
.nube1{
height: 100%;
width: 75px;
}
.nube2{
height: 64px;
width: 64px;
transform: rotate(45deg);
left: 35px;
bottom: 0;
}
.nube3{
height: 100%;
width: 75px;
right: 0;
}
.nube4{
height: 64px;
width: 64px;
transform: rotate(-45deg);
left: 0px;
bottom: 0;
}
</style>
</head>
<body>
<div class="phone">
<div class="layer rabbit layer-1">
<div class="left-ear--outer"></div>
<div class="left-ear--inner"></div>
<div class="right-ear--outer"></div>
<div class="right-ear--inner"></div>
<div class="head">
<div class="head__eye head__eye--left"></div>
<div class="head__eye head__eye--right"></div>
</div>
</div>
<div class="layer rabbit layer-2">
<div class="left-ear--outer"></div>
<div class="left-ear--inner"></div>
<div class="right-ear--outer"></div>
<div class="right-ear--inner"></div>
<div class="head">
<div class="head__eye head__eye--left"></div>
<div class="head__eye head__eye--right"></div>
</div>
</div>
<div class="layer wall layer-3">
<div class="zig-zag"></div>
</div>
<div class="layer rabbit layer-4">
<div class="left-ear--outer"></div>
<div class="left-ear--inner"></div>
<div class="right-ear--outer"></div>
<div class="right-ear--inner"></div>
<div class="head">
<div class="head__eye head__eye--left"></div>
<div class="head__eye head__eye--right"></div>
</div>
</div>
<div class="layer wall layer-5">
<div class="zig-zag"></div>
</div>
<div class="layer rabbit layer-6">
<div class="left-ear--outer"></div>
<div class="left-ear--inner"></div>
<div class="right-ear--outer"></div>
<div class="right-ear--inner"></div>
<div class="head">
<div class="head__eye head__eye--left"></div>
<div class="head__eye head__eye--right"></div>
</div>
</div>
<div class="layer wall layer-7">
<div class="zig-zag"></div>
</div>
<div class="layer arbusto layer-8">
<div class="tree tree1"></div>
<div class="tree tree2"></div>
<div class="tree tree3"></div>
<div class="tree tree4"></div>
<div class="tree tree5"></div>
</div>
<div class="layer layer-9">
<div class="nube nube1"></div>
<div class="nube nube2"></div>
</div>
<div class="layer layer-10">
<div class="nube nube3"></div>
<div class="nube nube4"></div>
</div>
</div>
</body>
</html>
Asi quedo el mio 😃
No es el mejor pero creo que me salió bien, le quise meter un poco del curso de transiciones
No se por que aparecen esas lineas extrañas al usar el background para el zigzag.
Me va gustando como va quedando el resultado 🤩
PD: Los conejos no los diseñé, los conseguí en Flaticon 🐰
Me costó un poco, pero lo logré.
Tengo que estudiar más lo de los patrones, porque no entiendo muy bien aún lo de los porcentajes del linear gradient
Reto…
Me ha gustado mucho hacer este dibujo :3
%209.01.36%20p.%C2%A0m…png)
Ojímetro
Coloquial
Palabra que se utiliza en la locución adverbial a ojímetro, que significa ‘de manera aproximada, sin realizar ningún cálculo ni medición exactos’.
Súper!!, así vamos
Les recomiendo esto. Use 3 etiquetas para hacer la cabeza, orejas y ojos del conejo. Dos etiquetas para cada parte interna de las orejas del conejo y le di un box-shadow de color blanco para que simulara el exterior de la oreja, para otra etiqueta la use para la cabeza, con los pseudoelementos before y after realice los ojos.
Código HTML:
<!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>Animationland</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="phone">
<div class="layer layer-1">
<div class="ear ear--left"></div>
<div class="ear ear--right"></div>
<div class="head"></div>
</div>
<div class="layer layer-2">
<div class="ear ear--left"></div>
<div class="ear ear--right"></div>
<div class="head"></div>
</div>
<div class="layer layer-3"></div>
<div class="layer layer-4">
<div class="ear ear--left"></div>
<div class="ear ear--right"></div>
<div class="head"></div>
</div>
<div class="layer layer-5"></div>
<div class="layer layer-6">
<div class="ear ear--left"></div>
<div class="ear ear--right"></div>
<div class="head"></div>
</div>
<div class="layer layer-7"></div>
<div class="layer layer-8"></div>
<div class="layer layer-9"></div>
<div class="layer layer-10"></div>
</div>
</body>
</html>
Codigo CSS:
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
width: 100%;
height: 100vh;
display: grid;
place-items: center;
background: aliceblue;
}
.phone {
width: 300px;
height: 600px;
border: 8px solid #000;
border-radius: 40px;
position: relative;
background-color: #CCEFFF;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5), 0 0 30px 5px rgba(0, 0, 0, .3);
overflow: hidden;
}
.layer {
position: absolute;
}
.layer-1 {
width: 80px;
height: 450px;
right: 60px;
bottom: 0;
z-index: 1;
}
.layer-2 {
width: 80px;
height: 450px;
left: 60px;
bottom: 0;
z-index: 2;
}
.layer-3 {
width: 220px;
height: 400px;
border-radius: 20px 20px 0;
margin: 0 auto;
right: 0;
bottom: 0;
left: 0;
z-index: 3;
background: brown;
}
.layer-4 {
width: 80px;
height: 350px;
bottom: 0;
left: 20px;
z-index: 4;
}
.layer-5 {
width: 200px;
height: 300px;
border-radius: 0 20px 0;
bottom: 0;
left: 0;
z-index: 5;
background-color: chocolate;
}
.layer-6 {
width: 80px;
height: 250px;
right: 29px;
bottom: 0;
z-index: 6;
}
.layer-7 {
width: 150px;
height: 200px;
border-radius: 20px 0 0;
right: 0;
bottom: 0;
z-index: 7;
background-color: burlywood;
}
.layer-8 {
width: 200px;
height: 110px;
margin: 0 auto;
right: 0;
bottom: 0;
left: 0;
z-index: 8;
background-color: yellowgreen;
}
.layer-9 {
width: 120px;
height: 90px;
left: 0;
bottom: 0;
z-index: 9;
background-color: aliceblue;
}
.layer-10 {
width: 120px;
height: 90px;
right: 0;
bottom: 0;
z-index: 10;
background-color: aliceblue;
}
.ear {
width: 10px;
height: 50px;
border-radius: 90%;
position: absolute;
top: 10px;
background: pink;
box-shadow: 0 -5px 0 5px #FFF;
}
.ear--left {
left: 15px;
}
.ear--right {
right: 15px;
}
.head {
width: 100%;
height: 80px;
border-radius: 50%;
position: absolute;
top: 30px;
background-color: #FFF;
}
.head::before,
.head::after {
content: "";
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
position: absolute;
top: 15px;
background-color: gray;
}
.head::before {
right: 30px;
}
.head::after {
left: 30px;
}
Utilizando pseudo-elementos 😄
Les comparto mi avance.
Así va mi proyecto:
Y así vamos…
.
HTML
<body>
<div class="phone">
<!-- bunny 1 -->
<div class="layer-1">
<div class="left-ear--outer"></div>
<div class="left-ear--inner"></div>
<div class="right-ear--outer"></div>
<div class="right-ear--inner"></div>
<div class="head">
<div class="head__eye head__eye--left"></div>
<div class="head__eye head__eye--right"></div>
</div>
</div>
<!-- bunny 2 -->
<div class="layer-2">
<div class="left-ear--outer"></div>
<div class="left-ear--inner"></div>
<div class="right-ear--outer"></div>
<div class="right-ear--inner"></div>
<div class="head">
<div class="head__eye head__eye--left"></div>
<div class="head__eye head__eye--right"></div>
</div>
</div>
<!-- wall 1 -->
<div class="layer-3 wall">
<div class="wall-surface"></div>
<div class="border-patter"></div>
</div>
<!-- bunny 3 -->
<div class="layer-4">
<div class="left-ear--outer"></div>
<div class="left-ear--inner"></div>
<div class="right-ear--outer"></div>
<div class="right-ear--inner"></div>
<div class="head">
<div class="head__eye head__eye--left"></div>
<div class="head__eye head__eye--right"></div>
</div>
</div>
<!-- wall 2 -->
<div class="layer-5 wall">
<div class="wall-surface"></div>
<div class="border-patter"></div>
</div>
<!-- bunny 4 -->
<div class="layer-6">
<div class="left-ear--outer"></div>
<div class="left-ear--inner"></div>
<div class="right-ear--outer"></div>
<div class="right-ear--inner"></div>
<div class="head">
<div class="head__eye head__eye--left"></div>
<div class="head__eye head__eye--right"></div>
</div>
</div>
<!-- wall 3 -->
<div class="layer-7 wall">
<div class="wall-surface"></div>
<div class="border-patter"></div>
</div>
<!-- lawn 1 -->
<div class="layer-8">
<div class="lawn-center lawn-center--1"></div>
<div class="lawn-center lawn-center--2"></div>
<div class="lawn-center lawn-center--3"></div>
<div class="lawn-center lawn-center--base"></div>
</div>
<!-- lawn 2 -->
<div class="layer-9">
<div class="lawn-rl lawn-rl--top-left"></div>
<div class="lawn-rl lawn-rl--botton-right"></div>
<div class="lawn-rl lawn-rl--base-left"></div>
</div>
<!-- lawn 3 -->
<div class="layer-10">
<div class="layer-9">
<div class="lawn-rl lawn-rl--top-right"></div>
<div class="lawn-rl lawn-rl--botton-left"></div>
<div class="lawn-rl lawn-rl--base-right"></div>
</div>
</div>
</div>
</body>
.
CSS
<style>
body {
margin: 0;
width: 100%;
height: 100vh;
display: grid;
place-content: center;
}
.phone {
position: relative;
border: 8px solid black;
border-radius: 40px;
width: 300px;
height: 600px;
background-color: #CCEFFF;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
}
.layer-1 {
position: absolute;
z-index: 1;
width: 80px;
height: 450px;
bottom: 0;
right: 60px;
}
.layer-2 {
position: absolute;
z-index: 2;
width: 80px;
height: 450px;
bottom: 0;
left: 60px;
}
.layer-3 {
position: absolute;
z-index: 3;
width: 220px;
height: 400px;
background-color: wheat;
left: 0;
right: 0;
margin: 0 auto;
bottom: 0;
}
.layer-4 {
position: absolute;
z-index: 4;
height: 350px;
bottom: 0;
left: 15px;
width: 80px;
}
.layer-5 {
position: absolute;
z-index: 5;
background: papayawhip;
width: 200px;
height: 300px;
bottom: 0;
}
.layer-6 {
position: absolute;
z-index: 6;
width: 80px;
height: 250px;
bottom: 0;
right: 30px;
}
.layer-7 {
position: absolute;
z-index: 7;
background: pink;
width: 150px;
height: 200px;
bottom: 0;
right: 0;
}
.layer-8 {
position: absolute;
z-index: 8;
width: 200px;
height: 120px;
bottom: 0;
left: 0;
margin: 0 auto;
right: 0;
}
.layer-9 {
position: absolute;
z-index: 9;
width: 120px;
height: 100px;
bottom: 0;
}
.layer-10 {
position: absolute;
z-index: 10;
width: 120px;
height: 100px;
bottom: 0;
right: 0;
}
.left-ear--outer {
background-color: white;
border-radius: 90%;
width: 20px;
height: 50px;
position: absolute;
left: 10px;
}
.left-ear--inner {
background-color: pink;
border-radius: 90%;
width: 10px;
height: 50px;
position: absolute;
left: 15px;
top: 8px;
}
.right-ear--outer {
background-color: white;
border-radius: 90%;
width: 20px;
height: 50px;
position: absolute;
right: 10px;
}
.right-ear--inner {
background-color: pink;
border-radius: 90%;
width: 10px;
height: 50px;
position: absolute;
right: 15px;
top: 8px;
}
.head {
background-color: white;
border-radius: 50%;
width: 100%;
height: 80px;
position: absolute;
top: 30px;
left: 0;
right: 0;
margin: 0 auto;
}
.head__eye {
background-color: gray;
border-radius: 50%;
width: 6px;
height: 6px;
position: absolute;
top: 12px;
}
.head__eye--left {
left: 25px;
}
.head__eye--right {
right: 25px;
}
.wall {
background-color: #ac4459;
border-radius: 20px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3), 0px 5px 15px rgba(0, 0, 0, 0.3);
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
.wall-surface {
background-color: #539e53;
width: 100%;
height: 25px;
position: absolute;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.border-patter {
width: 100%;
height: 30px;
position: absolute;
top: 25px;
/* Patrón del borde superior */
background-color: #ac4459;
opacity: 0.8;
background-image: linear-gradient(135deg, #531320 25%, transparent 25%), linear-gradient(225deg, #531320 25%, transparent 25%), linear-gradient(45deg, #531320 25%, transparent 25%), linear-gradient(315deg, #531320 25%, #ac4459 25%);
background-position: 14px 0, 14px 0, 0 0, 0 0;
background-size: 14px 14px;
background-repeat: repeat;
}
.lawn-center {
background-color: #539e53;
position: absolute;
}
.lawn-center--1 {
width: 80px;
height: 100px;
border-radius: 80%;
left: 0;
right: 0;
margin: 0 auto;
}
.lawn-center--2 {
width: 100px;
height: 90px;
border-radius: 50%;
top: 30px;
right: 0;
}
.lawn-center--3 {
width: 100px;
height: 90px;
border-radius: 50%;
top: 30px;
left: 0;
}
.lawn-center--base {
width: 100%;
height: 40%;
bottom: 0;
}
.lawn-rl {
background-color: white;
position: absolute;
}
.lawn-rl--top-left {
width: 80px;
height: 90px;
border-radius: 50%;
top: 0;
left: 0;
}
.lawn-rl--botton-right {
width: 80px;
height: 80px;
border-radius: 50%;
right: 0;
bottom: 0;
}
.lawn-rl--base-left {
width: 70%;
height: 50%;
border-bottom-left-radius: 30px;
left: 0;
bottom: 0;
}
.lawn-rl--top-right {
width: 80px;
height: 90px;
border-radius: 50%;
top: 0;
right: 0;
}
.lawn-rl--botton-left {
width: 80px;
height: 80px;
border-radius: 50%;
left: 0;
bottom: 0;
}
.lawn-rl--base-right {
width: 70%;
height: 50%;
border-bottom-right-radius: 30px;
right: 0;
bottom: 0;
}
</style>
Mi pequeño proyecto
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?