Por si a alguien le interesa… ¡Hay un profe de VueJS de Platzi que dibujó un Baby Yoda animado con CSS Puro!
.
La verdad es que le quedó super genial, se echó unos buenos streams en Twitch con este dibujo jaja, les dejo el enlace a su tweet po si quieren ir a verlo:
.
https://twitter.com/baumannzone/status/1363949040166174725
.
Lleva tus conocimientos de CSS a otro nivel
Tips para llevar tu conocimiento de CSS a otro nivel + Quices
¿De dónde venimos y en dónde estamos?
¿Cómo fue pensado CSS cuando se creó?
Limitaciones de CSS y el problema de los elementos flotantes
Herramientas que nos han facilitado el camino
¿Cómo se llegó al concepto de CSS Grid?
¿CSS Grid es una idea nueva? La evolución de la especificación
¿Qué significa Grid para CSS?
Control de alineamiento
Técnicas de alineamiento antes de CSS Grid: margin y line-height
Técnicas de alineamiento antes de CSS Grid: table-cell y positions
Técnicas de alineamiento antes de CSS Grid: pros y contras
Modos de escritura y ejes de alineamiento + Reto
Propiedades físicas y lógicas en CSS + Quiz
Técnicas de alineamiento con Flexbox
Dibujemos con CSS + Reto
Conceptos generales para comenzar a trabajar con CSS Grid
Grid y las relaciones padre e hijos inmediatos + Quíz
Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto
¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos
Propiedades y valores para el elemento padre
Creando nuestro contenedor: ¿display: grid o display: inline-grid?
Creando filas, columnas y espaciado + Reto
Alineamiento en el elemento contenedor + Quiz
Generación automática de tracks + Quíz
Funciones: repeat(), minmax() y fit-content()
Propiedades y valores para los elementos hijos
¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto
Ubicación + Reto
Alineamiento en los elementos hijos + Quiz
¡Manos al código! Fase de ubicación y alineamiento
Continuando con la fase de ubicación y alineamiento
Lo que podemos lograr adicionalmente con CSS Grid
Responsive y CSS Grid
Continúa con el Curso de Diseño Web con CSS Grid y Flexbox
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Dibujemos con CSS + Reto
13/28Recursos
Aportes 304
Preguntas 5
Ordenar por:
Lo sufrí, pero se siente bien cuando lo ves terminado
Reto completado
Realice el mismo dibujo que la profe nos mostro del señor, por que la verdad se veía bien para empezar.
Quedo de la siguiente forma, recibo criticas jajaja
Un 80% similar jajajajaja
El código fue el siguiente
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="estilos.css">
</head>
<body>
<div class="container">
<div class="head">
<div class="cuello"></div>
<div class="eye-left"></div>
<div class="eye-right"></div>
<div class="barba"></div>
<div class="sonrisa"></div>
<div class="dientes"></div>
<div class="negro"></div>
<div class="ceja"></div>
<div class="nariz"></div>
<div class="ear-left"></div>
<div class="ear-right"></div>
<div class="point-eye-left"></div>
<div class="point-eye-right"></div>
</div>
</div>
</body>
</html>
CSS
:root{
--skin: #f6c09c;
--background: #ed4842;
--red: #ed2850;
--dark-red: #680254;
--black: #00243a;
--white: #fff;
}
body{
margin: 0;
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.head{
width: 100px;
height: 180px;
background-color: var(--skin);
border-radius: 50px;
position: relative;
}
.ceja{
width: 100%;
height: 10px;
background-color: var(--skin);
position: absolute;
top: 54px;
}
.eye-left{
width: 20px;
height: 20px;
background-color: var(--white);
position: absolute;
top: 60px;
border-radius: 50%;
left: 32px;
}
.eye-right{
width: 20px;
height: 20px;
background-color: var(--white);
position: absolute;
top: 60px;
border-radius: 50%;
left: 52px;
}
.nariz{
width: 25px;
height: 25px;
background-color: var(--skin);
position: absolute;
border-radius: 15px;
top: 80px;
left: 40px;
}
.barba{
width: 100px;
height: 100px;
background-color: var(--black);
position: absolute;
top: 90px;
border-radius: 30px;
}
.cuello{
width: 55px;
height: 35px;
background-color: var(--skin);
opacity: 0.7;
position: absolute;
left: 23px;
top: 180px;
}
.sonrisa{
width: 45px;
height: 28px;
background-color: var(--red);
position: absolute;
border-radius: 20px;
left: 28px;
top: 110px;
}
.dientes{
width: 30px;
height: 8px;
background-color: var(--white);
position: absolute;
left: 28px;
top: 117px;
}
.negro{
width: 50px;
height: 8px;
background-color: var(--black);
position: absolute;
left: 30px;
top: 109px;
}
.ear-left{
width: 15px;
height: 15px;
background-color: var(--skin);
position: absolute;
border-radius: 20px;
left: -10px;
top: 80px;
}
.ear-right{
width: 15px;
height: 15px;
background-color: var(--skin);
position: absolute;
border-radius: 20px;
left: 94px;
top: 80px;
}
.point-eye-left{
width: 5px;
height: 5px;
background-color: var(--black);
position: absolute;
border-radius: 20px;
left: 40px;
top: 68px;
}
.point-eye-right{
width: 5px;
height: 5px;
background-color: var(--black);
position: absolute;
border-radius: 20px;
left: 60px;
top: 68px;
}
Les dejo el la pagina de Diana A Smith esto si es ser un PRO
Hice este dibujo 😄
Mi pequeño aporte.
Aquí les dejo el resultado de mi dibujo con css de Mafalda
Realize este dibujo de hollow knight
HTML
<div class="container">
<div class="head">
<div class="eye"></div>
<div class="eye"></div>
</div>
<div class="chin"></div>
<div class="body-container">
<div class="body left"></div>
<div class="body rigth"></div>
<div class="body-in"></div>
<div class="sting">
<div class="handle"></div>
<div class="edge"></div>
</div>
</div>
<div class="feet-container">
<div class="feet left"></div>
<div class="feet rigth"></div>
</div>
</div>
CSS
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background-color: #242424;
}
.container {
width: 250px;
margin: 200px auto;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.head {
position: relative;
width: 125px;
height: 110px;
background-color: white;
border-radius: 1% 1% 15% 14% / 50% 50% 75% 75%;
display: flex;
justify-content: space-around;
align-items: flex-end;
border: 4px solid black;
border-bottom: 0;
}
.head::before {
content: "";
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 20px 10px 0 #fff;
top: -85px;
transform: rotate(-3deg);
}
.head::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 20px 10px 0 #fff;
top: -85px;
transform: rotate(130deg);
}
.chin {
width: 97px;
height: 10px;
margin-top: -2px;
background-color: white;
border-radius: 100% 0% 50% 50% / 0% 0% 100% 100%;
}
.eye {
width: 35px;
height: 35px;
background-color: black;
border-radius: 100%;
margin-bottom: 15px;
}
.body-container {
display: flex;
margin-left: 25px;
position: relative;
}
.body {
width: 80px;
height: 120px;
background-color: #39404d;
margin-top: 3px;
}
.body.left {
border: #000 solid;
position: relative;
border-radius: 91% 9% 88% 12% / 96% 5% 95% 4% ;
transform: rotate(-5deg);
overflow: hidden;
}
.body.left::before {
content: "";
width: 80px;
height: 120px;
position: absolute;
border-radius: 91% 9% 88% 12% / 96% 5% 95% 4% ;
border-bottom: solid 2.5px black;
top: -35px;
left: -5px;
transform: rotate(-5deg);
}
.body.left::after {
content: "";
width: 80px;
height: 120px;
position: absolute;
border-radius: 91% 9% 88% 12% / 96% 5% 95% 4% ;
border-bottom: solid 2.5px black;
top: -65px;
left: -5px;
transform: rotate(-5deg);
}
.body.rigth {
position: relative;
left: -25px;
border: #000 solid;
border-radius: 7% 93% 13% 87% / 4% 100% 0% 96% ;
transform: rotate(5deg);
overflow: hidden;
}
.body.rigth::before {
content: "";
width: 80px;
height: 120px;
position: absolute;
border-radius: 7% 93% 13% 87% / 4% 100% 0% 96% ;
border-bottom: solid 2.5px black;
top: -25px;
left: -5px;
transform: rotate(-15deg);
}
.body.rigth::after {
content: "";
width: 80px;
height: 120px;
position: absolute;
border-radius: 7% 93% 13% 87% / 4% 100% 0% 96% ;
border-bottom: solid 2.5px black;
top: -65px;
left: -15px;
transform: rotate(-5deg);
}
.body-in {
width: 65px;
height: 50px;
position: absolute;
background-color: black;
top: 100%;
left: 42.5%;
transform: translate(-50%, -100%);
z-index: -1;
}
.sting {
width: 50px;
height: 125px;
position: absolute;
z-index: -5;
transform: rotate(-40deg);
top: -30px;
left: 25px;
display: flex;
flex-direction: column;
align-items: center;
}
.sting .handle {
background-color: #76757d;
width: 17.5px;
height: 40px;
border: 2px solid black;
border-bottom: none;
}
.sting .edge {
clip-path: polygon(50% 100%, 0 0, 100% 0);
background-color: #76757d;
width: 35px;
height: 125px;
border: 2px solid black;
}
.feet-container {
display: flex;
gap: 15px;
}
.feet {
width: 25px;
height: 40px;
background-color: #000;
}
.feet.left {
border-radius: 59% 41% 50% 50% / 0% 0% 100% 100% ;
}
.feet.rigth {
border-radius: 59% 41% 50% 50% / 0% 0% 100% 100% ;
}
Hola hice mi primer dibujo en css, No es perfecto pero me salio Algo parecido les dejo el Codigo. Se me pasaron un poco las medidas jeje
<!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">
<link rel="stylesheet" href="main.css">
<title>Among us</title>
</head>
<body>
<div class="cntainer">
<div class="skin">
<div class="eye">
<div class="ligth-white-eye"></div>
</div>
<div class="arm"></div>
</div>
</div>
<footer>
<p class="text-end">Created by Luis ❤️<br>#NuncaParesDeAprender 💚 </p>
</footer>
</body>
html {
padding: 0;
margin: 0;
background-color: #FFDE2A;
}
.cntainer {
display: flex;
justify-content: center;
align-items: flex-end;
height: 100vh;
}
.skin {
border: solid black 50px;
border-radius: 690px 550px 0px 0px;
background-color: #F21717;
height: 1025px;
width: 792px;
box-shadow: inset -50px -130px 45px -0px #880933;
position: relative;
}
.eye {
position: absolute;
height: 269px;
width: 550px;
border-radius: 380px 380px 380px 380px;
border: 50px solid black;
background-color: #75DBF4;
box-shadow: inset -30px -102px 10px -8px #235685;
top: 150px;
right: 250px;
}
.ligth-white-eye {
position: absolute;
border-radius: 50px 30px 15px 25px;
height: 73px;
width: 220px;
background-color: white;
top: 25px;
left: 50px;
transform: rotate(-5deg);
}
.arm {
position: relative;
border-radius: 15px 190px 0px 0px;
height: 550px;
width: 150px;
border: solid black 50px;
background-color: #F21717;
left: 800px;
top: 424px;
box-shadow: inset -15px -500px 45px -102px #880933;
}
.text-end {
font-family: open sans;
text-align: center;
font-size: 30px;
}```
Pues… luego de 3 horas conseguí hacer los 3 dibujos, estuvo algo dificil, pero me gustó mucho poder cumplir con este reto, el codigo quedó larguisimo, pero… ¡reto conseguido!
Me tomo un buen rato, pero lo logre!! 😁😁😁
Es lo mejor que pude hacer de acuerdo a lo visto y lo que se de CSS. no es mucho pero es trabajo honesto.
mi HTML:
<div class="afuera">
<div class="atmosfera1">
</div>
<div class="atmosfera2">
</div>
<div class="tierra">
</div>
<div class="nubes1">
</div>
<div class="nubes2">
</div>
<div class="nubes3">
</div>
<div class="nubes4">
</div>
<div class="nubes5">
</div>
<div class="tierra1">
</div>
<div class="union">
</div>
<div class="tierra2">
</div>
<div class="tierra3">
</div>
<div class="union2">
</div>
<div class="tierra4">
</div>
<div class="tierra5">
</div>
<div class="tierra6">
</div>
<div class="sombra-tierra1">
</div>
<div class="sombra-tierra2">
</div>
<div class="sombra-tierra3">
</div>
<div class="sombra-tierra4">
</div>
<div class="sombra-tierra5">
</div>
<div class="sombra-tierra6">
</div>
</div>
mi CSS:
:root {
--purple1: #230c44;
--purple2: #450f4d;
--blue1: #1d2357;
--blue2: #10709c;
--verde:#a3ce39;
}
*{
border: 0;
margin: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
.afuera {
display:flex;
justify-content: center;
width: 100%;
height: 100vh;
background-color: #a4508b;
background-image: linear-gradient(380deg, var(--purple2) 0%, var(--purple1) 74%);
position: relative;
z-index: -1;
}
.atmosfera1{
width: 80rem;
opacity: .4;
height: 80rem;
background-color: var(--blue1);
border-radius: 50%;
z-index: -1;
}
.atmosfera2{
width: 70rem;
opacity: .4;
height: 70rem;
border-radius: 50%;
position: absolute;
background-color: #aff6cf;
background-image: linear-gradient(315deg, #aff6cf 0%, #657bf5 74%);
left: 37rem;
bottom: 12rem;
z-index: 1;
}
.nubes1{
width: 20rem;
height: 5rem;
border-radius: 10rem;
background-color: #ffffff;
position: absolute;
opacity: .7;
left: 40rem;
bottom: 50rem;
z-index: 3;
}
.nubes2{
width: 20rem;
height: 5rem;
border-radius: 10rem;
background-color: #ffffff;
position: absolute;
left: 76rem;
bottom: 22rem;
z-index: 3;
opacity: .7;
}
.nubes3{
width: 10rem;
height: 5rem;
border-radius: 10rem;
background-color: #ffffff;
position: absolute;
left: 90rem;
bottom: 40rem;
z-index: 3;
opacity: .7;
}
.nubes4{
width: 10rem;
height: 5rem;
border-radius: 10rem;
background-color: #ffffff;
position: absolute;
left: 60rem;
bottom: 40rem;
z-index: 3;
opacity: .7;
}
.nubes5{
width: 20rem;
height: 5rem;
border-radius: 10rem;
background-color: #ffffff;
position: absolute;
opacity: .7;
left: 74rem;
bottom: 63rem;
z-index: 3;
}
.tierra{
width: 60rem;
height: 60rem;
background-color: #132dbe;
border-radius: 50%;
background-color: #2a2a72;
background-image: linear-gradient(315deg, #2a2a72 0%, var(--blue2) 74%);
position: absolute;
left: 42rem;
bottom: 17rem;
z-index: 2;
}
.tierra1{
width: 20rem;
height: 6rem;
background-color: var(--verde);
border-radius: 30rem 50rem 50rem 10rem;
position: absolute;
left: 42rem;
bottom: 48rem;
z-index: 2;
}
.tierra2{
width: 20rem;
height: 6rem;
background-color: var(--verde);
border-radius: 10rem 50rem 10rem 50rem;
position: absolute;
left: 55rem;
bottom: 41rem;
z-index: 2;
}
.union{
width: 2rem;
height: 5rem;
background-color: var(--verde);
border-radius: 50rem 40rem 30rem 50rem;
position: absolute;
left: 58rem;
bottom: 45rem;
z-index: 2;
}
.tierra3{
width: 20rem;
height: 6rem;
background-color: var(--verde);
border-radius: 100rem 200rem 10rem 50rem;
position: absolute;
left: 79rem;
bottom: 60rem;
z-index: 2;
}
.tierra4{
width: 20rem;
height: 6rem;
background-color: var(--verde);
border-radius: 10rem 50rem 10rem 50rem;
position: absolute;
left: 70rem;
bottom: 53rem;
z-index: 2;
}
.union2{
width: 2rem;
height: 5rem;
background-color: var(--verde);
border-radius: 10rem 50rem 10rem 50rem;
position: absolute;
left: 85rem;
bottom: 57rem;
z-index: 2;
}
.tierra5{
width: 20rem;
height: 6rem;
background-color: var(--verde);
border-radius: 10rem 50rem 10rem 50rem;
position: absolute;
left: 49rem;
bottom: 25rem;
z-index: 2;
}
.tierra6{
width: 10rem;
height: 6rem;
background-color: var(--verde);
border-radius: 10rem 50rem 10rem 50rem;
position: absolute;
left: 87rem;
bottom: 35rem;
z-index: 2;
}
.sombra-tierra1{
width: 7rem;
height: 5rem;
border-radius: 10rem 50rem 10rem 50rem;
background-color: #2cb24f;
position: absolute;
left: 50rem;
bottom: 25.5rem;
z-index: 2;
opacity: .5;
}
.sombra-tierra2{
width: 5rem;
height: 5rem;
border-radius: 10rem 50rem 10rem 50rem;
background-color: #2cb24f;
position: absolute;
left: 84rem;
bottom: 53.5rem;
z-index: 2;
opacity: .5;
}
.sombra-tierra3{
width: 10rem;
height: 5rem;
border-radius: 10rem 50rem 10rem 50rem;
background-color: #2cb24f;
position: absolute;
left: 88rem;
bottom: 60.5rem;
z-index: 2;
opacity: .5;
}
.sombra-tierra4{
width: 8rem;
height: 5rem;
border-radius: 10rem 50rem 10rem 50rem;
background-color: #2cb24f;
position: absolute;
left: 88rem;
bottom: 35.5rem;
z-index: 2;
opacity: .5;
}
.sombra-tierra5{
width: 8rem;
height: 5rem;
border-radius: 10rem 50rem 10rem 50rem;
background-color: #2cb24f;
position: absolute;
left: 56rem;
bottom: 41.5rem;
z-index: 2;
opacity: .5;
}
.sombra-tierra6{
width: 15rem;
height: 5rem;
background-color: #2cb24f;
border-radius: 30rem 50rem 50rem 10rem;
position: absolute;
left: 42rem;
bottom: 48.5rem;
z-index: 2;
opacity: .5;
}
Para desestresarse un poco
El año pasado hice este Koffing en un reto que se llamaba PokeCSS me tarde 2 meses en terminarlo 🥵
El Link puedes verlo aquí
y este es el repositorio eso si, es la feria de los <div>😅
Mi primer Draw con css
doneee, I’m so proud of what I’ve achieved so far!
RETO SUPERADO XDXD
https://brandon328.github.io/GARU/
Intente otro dibujo. He aquí el resultado. Mi primer dibujo con CSS
;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.cabeza{
position: relative;
background: #fff;
width: 160px;
height: 120px;
border-radius: 80px 80px 0 0;
}
.ear-left{
position: absolute;
top: -15px;
width: 50px;
height: 90px;
background-color: #fff;
border-radius: 40px 40px 0 0;
}
.ear-right{
position: absolute;
width: 50px;
height: 90px;
left: 110px;
top: -15px;
background-color: #fff;
border-radius: 40px 40px 0 0;
}
.cara{
width: 120px;
height: 60px;
background-color: var(--piel);
position: absolute;
bottom: 30px;
right: 20px;
border-radius: 100px;
}
.left-eye{
position: absolute;
top: 15px;
left: 25px;
width: 10px;
height: 10px;
background-color: black;
border-radius: 100%;
}
.right-eye{
position: absolute;
top: 15px;
right: 25px;
width: 10px;
height: 10px;
background-color: black;
border-radius: 100%;
}
.mouth{
position: absolute;
bottom: 20px;
right: 45px;
width: 30px;
height: 5px;
border-radius: 50%;
border-bottom: solid 2px black;;
}
.pecho{
position: relative;
background-color: var(--pecho);
width: 160px;
height: 120px;
}
.manga-left{
position: absolute;
left: -20px;
width: 20px;
height: 40px;
background-color: var(--pecho);
border-radius: 20px 0 0 0;
}
.brazo-left{
position: absolute;
left: -20px;
top: 40px;
width: 20px;
height: 80px;
background-color: var(--piel);
}
.manga-right{
position: absolute;
right: -20px;
width: 20px;
height: 40px;
background-color: var(--pecho);
border-radius: 0 20px 0 0;
}
.brazo-right{
position: absolute;
right: -20px;
top: 40px;
width: 20px;
height: 80px;
background-color: var(--piel);
}```
Este es el resultado de mi práctica, esta muy bueno dibujar con css!
Listo el reto, link de codepen: https://codepen.io/davidra24/pen/ZELbrEX?editors=1100
Mi aporte! Me cóstó pero lo logré!
Basado en mi primer Axie #17051
#AxieInfinity
https://codepen.io/ca7seven/pen/abyXKex
y finalmente así me quedó en CSS : https://photographya.github.io/Dibujarte-css/
Por aquí mi reto, me tomó un buen rato, pero de verdad que es una excelente práctica, te hace pensar fuera de la caja con el CSS.
Acá el repositorio de Github y el Codepen.
https://github.com/ricandres98/Dibujos-con-CSS
https://codepen.io/ricandres98/pen/YzrJZYV
Sin duda creo que a Platzi le vendría bien un curso de dibujo con CSS
Dibujar con CSS ayuda tantísimo a entender y practicar tantas cosas!
El primero que hice fue este que pueden ver acá: https://codepen.io/iamdulce_/pen/eYJZmbW
Pero el que más me enorgullece hasta ahora es este de Luna 😍
Lo pueden ver mejor aquí: https://codepen.io/iamdulce_/pen/xxVZPVX
Elvis Presley, mediante el movimiento artistico conocido como Arte Moderno Contemporaneo 🎨
Si no saben de arte no critiquen 😎😂😂😂
Aquí esta mi resultado:
Me costo mucho, pero logre terminarlo
Hice un Bender con CSS 😃
👉 Aquí el código: Bender CSS
¡Reto cumplido!
link: https://codepen.io/davidop97/pen/RwQVKjx
Hola a todos
Despues de varios dias y tratar de perfecionarlo al maximo aqui esta mi reto.
Github Pages:
https://guners86.github.io/HomeroCss/
Github:
https://github.com/guners86/HomeroCss
Y este es el resultado:
…
…
Espero que les guste, me tomo mucho tiempo poder hacer el pelo y cada vez le pongo cosas nuevas jejeje
…
…
Mire que un estudiante hizo lo mismo y me gusto para replicar y practicar.
buenas … solo queria participar XD
hice de reto una piramide
Si estás teniendo problemas para hacer las X de las orejas puedes utilizar la propiedad
transform: rotate(45deg); y transform: rotate(135deg) para girar los divs.
Si se te dificulta colocar los dientes y la lengua puedes meter sus divs dentro de otro div que sirva como contenedor y aplicarle la propiedad overflow: hidden;
Hello Kitty!
XD que fastidio y belleza hacerlo 800 líneas de código en css jajajajaja la mayoría de posicionamiento pero se logro, y eso que reutilice etiquetas para así ahorrar espacio, imagínate tener 95 elementos y posicionarlos individualmente
Costó, pero lo logré 😛
Donde verlo: https://ralerv.github.io/CSS-Kirby/
Yo hice a Finn el de hora de aventura saliendo de un portal.
Hecho con CSS Grid
Me llevo un buen rato, pero excelente práctica de CSS.
Mis dos dibujos con html y css.
Aquí el repositorio: https://github.com/Brayan-Camilo-Cristancho/Drawing-in-CSS.git
Le hice la pareja a nuestro muñequito del reto jajajaja
Bueno reto terminado:)
página para ver los dibujos en gigantic
https://gigantic.store/flat_design_illustrations_tools_and_colors/
Me encanto el desafio! Dejo el reto y seguire practicando con otras figuras…
https://codepen.io/camilogav/pen/gOGVzKK
Tambien les dejo el codigo, aproveche para hacerme un usuario en CodePen…
Lo conseguí 😄
Luchado, que interesante. Leccion aprendida de z-index; position, border-bottom-left-radius.
Les comparto mi dibujo (Solo es un avance) : https://codepen.io/tetsudaux/pen/poebbpm
Hice esto, aquí mi código:
<div class="container">
<div class="head">
<div class="hair"></div>
<div class="eye-left"></div>
<div class="dot-left"></div>
<div class="eye-rigth"></div>
<div class="dot-rigth"></div>
<div class="ear-left"></div>
<div class="ear-rigth"></div>
<div class="barba"></div>
<div class="noise"></div>
<div class="mouth"></div>
<div class="teeth"></div>
<div class="bottom"></div>
</div>
</div>
CSS:
:root {
--skin: #f6c09c;
--background: #ed4042;
--red: #ed2860;
--dark-red: #680524;
--black: #00243a;
--white: #fff;
}
body {
margin: 0px
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.head {
width: 100px;
height: 200px;
background: var(--skin);
border-radius: 50px;
/* con relative todos los elementos internos se vana s posicionar con respecto a este */
position: relative
}
.hair {
width: 50px;
height: 25px;
position: absolute;
background: var(--black);
left: 25px;
border-radius: 100px/50px
}
.eye-left {
width: 20px;
height: 20px;
background: var(--white);
position: absolute;
top: 70px;
border-radius: 50%;
left: 22px;
}
.eye-rigth {
width: 20px;
height: 20px;
background: var(--white);
position: absolute;
top: 70px;
border-radius: 50%;
left: 56px;
}
.dot-left {
width: 7px;
height: 7px;
background: black;
position: absolute;
top: 77px;
left: 28px;
border-radius: 50%;
}
.dot-rigth {
width: 7px;
height: 7px;
background: black;
position: absolute;
top: 77px;
left: 63px;
border-radius: 50%;
}
.ear-left {
width: 30px;
height: 25px;
background: var(--skin);
position: absolute;
top: 72px;
left: -8px;
border-radius: 25%;
}
.ear-rigth {
width: 30px;
height: 25px;
background: var(--skin);
position: absolute;
top: 72px;
right: -8px;
border-radius: 25%;
}
.barba {
width: 100px;
height: 100px;
background: var(--black);
position: absolute;
border-radius: 25%;
top: 100px;
}
.noise {
width: 26px;
height: 26px;
position: absolute;
background: var(--skin);
border-radius: 50%;
top: 87px;
left: 38px;
border-width: 5px;
}
.teeth {
height: 10px;
width: 40px;
position: absolute;
background: white;
top: 125px;
left: 23px;
}
.mouth {
width: 60px;
height: 40px;
background: var(--red);
position: absolute;
top: 125px;
left: 23px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
Yo hice este cubo rubik que encontre en google imagenes
Aqui el codigo: Rubik’s Cube - CSS
No es mucho, pero es trabajo honesto 😅
Persona Animado con CSS
Masomenos 4 horas llevo haciendo esto…
estos son los links que llevo consultados hasta ahora y los apuntes de alinear de este curso.
https://css-tricks.com/almanac/properties/t/transform/
https://css-tricks.com/the-shapes-of-css/
https://cssgradient.io/
https://codepen.io/adranuz/pen/mdOXKXE?editors=0100
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix()
y mas pero en estos he sacado la mayoria
¡Hola!
Yo hice la calabaza del post 🎃
Blog post de la calabaza
Como queda
Código
En el reto dibujé a mi mascota 😃
- Reto cumplido
Reto 1 del Curso: completar dibujo de clase
_
Al dibujo mostrado en clase le agregué algunos detalles:
_
📌Mira el repositorio en GitHub aquí
HTML
<div class="container">
<div class="sombra"></div>
<div class="pan1">
<div class="mano1"></div>
<div class="mano1-1"></div>
</div>
<div class="salchicha">
<div class="ojo-derecho"></div>
<div class="ojo-izquierdo"></div>
<div class="boca"></div>
<div class="boca2"></div>
<div class="pie1"></div>
<div class="pie1-2"></div>
<div class="pie2"></div>
<div class="pie2-2"></div>
</div>
<div class="pan2">
<div class="mano2"></div>
<div class="mano2-1"></div>
</div>
</div>
CSS
:root {
--salchicha: #fe2d32;
--pan: #fcc705;
--black: #000;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body {
margin:0;
}
.salchicha {
background: var(--salchicha);
width: 100px;
height: 408px;
border-radius: 60px;
position: relative;
border: 9px solid;
}
.ojo-izquierdo {
background: var(--black);
width: 11px;
height: 11px;
position: relative;
top: 89px;
left: 56px;
border-radius: 50px;
}
.ojo-derecho {
background: var(--black);
width: 11px;
height: 11px;
position: relative;
top: 102px;
left: 82px;
border-radius: 50px;
}
.boca {
background: var(--black);
width: 47px;
height: 11px;
position: relative;
top: 101px;
left: 58px;
border-radius: 50px;
transform: rotate(9deg);
}
.boca2{
background: var(--black);
width: 22px;
height: 11px;
position: relative;
top: 86px;
left: 42px;
border-radius: 50px;
transform: rotate(3deg);
}
.pie1 {
background: var(--black);
width: 10px;
height: 30px;
position: relative;
top: 366px;
left: 30px;
transform: rotate(-21deg);
}
.pie1-2 {
background: var(--black);
width: 10px;
height: 50px;
position: relative;
top: 356px;
left: 21px;
border-radius:10px;
transform: rotate(40deg);
}
.pie2 {
background: var(--black);
width: 10px;
height: 30px;
position: relative;
top: 283px;
left: 70px;
transform: rotate(-21deg);
}
.pie2-2 {
background: var(--black);
width: 10px;
height: 45px;
position: relative;
top: 274px;
left: 69px;
border-radius:10px;
transform: rotate(20deg);
}
.pan1{
background: var(--pan);
width: 100px;
height: 335px;
border-radius: 60px;
position: relative;
border: 9px solid;
left: 200px;
}
.pan2{
background: var(--pan);
width: 135px;
height: 335px;
border-radius: 100px;
position: relative;
border: 9px solid;
left: -215px;
}
.mano1{
background:var(--black);
width: 40px;
height: 11px;
position: relative;
top:150px;
left:100px;
}
.mano1-1{
background:var(--black);
width: 25px;
height: 11px;
position: relative;
top:132px;
left:133px;
transform: rotate(-45deg);
}
.mano2 {
background:var(--black);
width: 40px;
height: 11px;
position: relative;
top: 130px;
left: 35px;
transform: rotate(-45deg);
}
.mano2-1 {
background:var(--black);
width: 40px;
height: 11px;
position: relative;
top: 142px;
left: 35px;
transform: rotate(45deg);
}
.sombra {
background: gray;
width: 200px;
height: 50px;
border-radius: 50%;
position: relative;
top: 270px;
left: 275px;
}
Me intimidó mucho ver los aportes de los compañeros, pero me animé y me encantó el resultado, usé las referencias del sitio, pero me hice a mi misma.
Reto Completado!
.
📑 Repo: https://github.com/LeojAnidem/Dibujos-PureCss
💎 Pagina: https://leojanidem.github.io/Dibujos-PureCss/
.
Por si a alguien le interesa, acá dejo otro IDE online para practicar nuestro codigo HTML, CSS Y JavaScript.
Aquí les dejo mi reto: Me ha parecido una forma divertida de practicar posicionamiento. Pienso que no será la última vez que dibuje con css.
Lo hice sin ver los comentarios y ahora pienso que debí hacer algo diferente XD
<section class="illustration-container">
<div class="head">
<div class="neck"></div>
<div class="beard"></div>
<div class="nose"></div>
<div class="eye-left"></div>
<div class="eye-right"></div>
<div class="iris-left"></div>
<div class="iris-right"></div>
<div class="mouth"></div>
<div class="teeth"></div>
<div class="tongue"></div>
<div class="forehead"></div>
<div class="ear-left"></div>
<div class="ear-right"></div>
</div>
</section>
.illustration-container {
width: 15rem;
height: 22rem;
background-color: #ed4042;
display: flex;
justify-content: center;
}
.head {
width: 8rem;
height: 14rem;
background-color: var(--skin);
position: relative;
border-radius: 4rem;
top: 2rem;
}
.neck {
width: 6rem;
height: 5rem;
background-color: var(--skin);
opacity: 60%;;
position: absolute;
left: 1rem;
bottom: -3.3rem;
}
.beard {
width: 8.2rem;
height: 10rem;
background-color: var(--black);
border-radius: 2rem 2rem 4rem 4rem;
position: absolute;
bottom: -2rem;
left: -0.1rem;
}
.nose {
width: 2.4rem;
height: 2.2rem;
border-radius: 50%;
background-color: var(--skin);
position: absolute;
left: calc(4rem - 1.2rem);
top: 5.3rem;
}
.eye-left, .eye-right {
width: 2.1rem;
height: 2.2rem;
background-color: var(--white);
border-radius: 50%;
position: absolute;
top: 3rem;
}
.eye-left {
left: 2rem;
}
.eye-right {
right: 2rem;
}
.iris-left, .iris-right {
width: 0.34rem;
height: 0.34rem;
background-color: var(--black);
position: absolute;
top: 3.95rem;
border-radius: 50%;
}
.iris-left {
left: 2.9rem;
}
.iris-right {
right: 2.9rem;
}
.mouth {
width: 3.5rem;
height: 1.8rem;
background-color: var(--dark-red);
border-radius: 0 0 1.8rem 1.8rem;
position: absolute;
left: 2.25rem;
top: 8rem;
}
.teeth {
width: 3.2rem;
height: 0.5rem;
background-color: var(--white);
border-radius: 0 0 0.25rem 0.25rem;
position: absolute;
left: 2.4rem;
top: 8rem;
}
.tongue {
width: 3rem;
height: 1rem;
background-color: var(--red);
border-radius: 0 0 4rem 4rem;
position: absolute;
left: 2.5rem;
top: 8.8rem;
}
.forehead {
width: 5rem;
height: 1rem;
background-color: var(--skin);
position: absolute;
border-radius: 0.4rem;
left: 1.5rem;
top: 2.6rem;
}
.ear-left {
width: 1.5rem;
height: 1.5rem;
background-color: var(--skin);
opacity: 50%;
border-radius: 50% 0 0 50%;
position: absolute;
left: -1.1rem;
top: 4.8rem;
}
.ear-right {
width: 1.5rem;
height: 1.5rem;
background-color: var(--skin);
opacity: 50%;
border-radius: 0 50% 50% 0;
position: absolute;
right: -1.1rem;
top: 4.8rem;
}
Para este tema de los dibujos recomiendo la página CSS Battle, tiene varios retos para practicar los dibujos con CSS.
con todo respeto pero es aburrido cuando a cada rato los profesores dicen algo pero no lo explican y de una te dicen que no te preocupes que en el próximo curso lo vas a ver.
Yo hice a Jake el perro 😄
https://kevinpaezg.github.io/jake-drawing/
aquí dejo el repo:
https://github.com/kevinpaezg/jake-drawing
Mi dibujo
<!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>Face</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<main>
<div class="drawing">
<div class="head">
<div class="ear left-ear">
<div class="ear-line ear-line-left"></div>
<div class="ear-line ear-line-right"></div>
</div>
<div class="face">
<div class="eyes">
<div class="eye">
<div class="eyelid"></div>
<div class="pupil"></div>
</div>
<div class="eye">
<div class="eyelid"></div>
<div class="pupil"></div>
</div>
</div>
<div class="nose"></div>
<div class="beard">
<div class="mouth">
<div class="teeth"></div>
<div class="tongue"></div>
</div>
</div>
</div>
<div class="ear right-ear">
<div class="ear-line ear-line-left"></div>
<div class="ear-line ear-line-right"></div>
</div>
</div>
<div class="neck"></div>
</div>
</main>
</body>
</html>
:root {
--skin: #f6c09c;
--darker-skin: #fab384;
--earline-skin: #f57d5e;
--background: #ed4042;
--red: #ed2860;
--dark-red: #680524;
--black: #00243a;
--white: #fff;
--ear-size: 40px;
--eye-size: 60px;
--nose-size: 60px
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
main{
background-color: var(--background);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-height: 100vh;
}
.drawing{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.head{
display: flex;
align-items: center;
}
.ear{
background-color: var(--darker-skin);
width: var(--ear-size);
height: var(--ear-size);
border-radius: 100%;
position: relative;
bottom: 50px;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ear-line{
background-color: var(--earline-skin);
height: 45%;
width: 10%;
border-radius: 100px;
position: absolute;
}
.ear-line-right{
transform: rotate(45deg);
}
.ear-line-left{
transform: rotate(-45deg);
}
.left-ear{
padding-right: 3px;
right: -10px;
}
.right-ear{
padding-left: 3px;
left: -10px;
}
.face{
background-color: var(--skin);
width: 200px;
height: 400px;
border-radius: 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.eyes{
display: flex;
position: absolute;
top: 25%;
}
.eye{
background-color: var(--white);
width: var(--eye-size);
height: var(--eye-size);
border-radius: 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.eyelid{
background-color: var(--darker-skin);
width: 100%;
height: 30%;
position: absolute;
top: 0;
}
.pupil{
background-color: black;
width: 10px;
height: 10px;
border-radius: 100%;
}
.nose{
background-color: var(--darker-skin);
width: var(--nose-size);
height: var(--nose-size);
border-radius: 100%;
z-index: 1;
position: relative;
bottom: 15px;
}
.beard{
background-color: var(--black);
height: 250px;
width: 100%;
position: absolute;
bottom: -20px;
border-radius: 80px 80px 150px 150px;
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 0;
}
.mouth{
background-color: var(--dark-red);
height: 45px;
width: 50%;
display: flex;
flex-direction: column;
align-items: left;
justify-content: space-between;
overflow: hidden;
border-radius: 10px 10px 200px 200px;
}
.teeth{
background-color: white;
height: 35%;
width: 70%;
border-radius: 0 0 18px 0;
}
.tongue{
background-color: var(--red);
height: 50%;
width: 50%;
border-radius: 0 10px 0 0;
}
.neck{
background-color: var(--darker-skin);
width: 130px;
height: 60px;
position: relative;
top: -10px;
}
Acá dejo el Mio
Logre hacer las principales piezas del domino. Es algo sencillo, pero tarde 2 horas en hacerlo 😦
Reto Terminado, me demore bastante tiempo pero merece la pena realizar un dibujo con CSS
Comparto el repositorio del dibujo hecho
Yo hice un cocodrilo bien chido
@teffcode . Aquí está mi reto, luego de un par de horitas (soy nuevo):
:root {
--skin: #f6c09c;
--background: #ed4042;
--red: #ed2860;
--dark-red: #680524;
--black: #00243a;
--white: #fff;
--color-ear: #eb8776;
--color-beard: #00243a;
--color-neck: #ed927d;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: var(--background);
}
body {
margin: 0;
}
.head {
width: 100px;
height: 200px;
background: var(--skin);
border-radius: 50px;
position: relative;
}
.border-head {
width: 140px;
height: 200px;
background: var(--background);
position: absolute;
}
.eye-left {
width: 25px;
height: 21px;
background: var(--white);
position: absolute;
border-radius: 0 0 50% 50%;
top: 52px;
left: 25px;
}
.eye-right {
width: 25px;
height: 21px;
background: var(--white);
position: absolute;
border-radius: 0 0 50% 50%;
top: 52px;
left: 50px;
}
.iris-left {
width: 4px;
height: 4px;
background: var(--black);
position: absolute;
border-radius: 50%;
top: 56px;
left: 35.5px;
}
.iris-right {
width: 4px;
height: 4px;
background: var(--black);
position: absolute;
border-radius: 50%;
top: 56px;
left: 60.5px;
}
.ear-left {
width: 16px;
height: 20px;
background: var(--color-ear);
border-radius: 50% 0 0 50%;
position: absolute;
top: 65px;
left: 4px;
}
.ear-right {
width: 16px;
height: 20px;
background: var(--color-ear);
border-radius: 0 50% 50% 0;
position: absolute;
top: 65px;
left: 120px;
}
.ear-decoration-left-1 {
width: 2px;
height: 10px;
position: absolute;
background: var(--background);
border-radius: 5px;
top: 70px;
left: 14px;
transform: rotate(45deg);
}
.ear-decoration-left-2 {
width: 2px;
height: 10px;
position: absolute;
background: var(--background);
border-radius: 5px;
top: 70px;
left: 14px;
transform: rotate(-45deg);
}
.ear-decoration-right-1 {
width: 2px;
height: 10px;
position: absolute;
background: var(--background);
border-radius: 5px;
top: 70px;
left: 123px;
transform: rotate(45deg);
}
.ear-decoration-right-2 {
width: 2px;
height: 10px;
position: absolute;
background: var(--background);
border-radius: 5px;
top: 70px;
left: 123px;
transform: rotate(-45deg);
}
.bottom {
width: 100px;
height: 120px;
background: var(--color-beard);
position: absolute;
border-radius: 28px 28px 50px 50px;
top: 80px;
}
.nose {
width: 28px;
height: 25px;
background: var(--skin);
position: absolute;
border-radius: 0 0 50% 50%;
top: 75px;
left: 37.5px;
}
.mouth {
width: 42px;
height: 20px;
background: var(--dark-red);
position: absolute;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 200px;
border-bottom-left-radius: 200px;
top: 110px;
left: 30px;
}
.teeth {
width: 32px;
height: 6px;
background: var(--white);
position: absolute;
border-radius: 0 0 200px 100px;
top: 110px;
left: 30px;
}
.tongue {
width: 22px;
height: 10px;
background: var(--red);
position: absolute;
border-radius: 0 30% 0 100%;
top: 120px;
left: 33px;
}
.neck {
width: 75px;
height: 30px;
background: var(--color-neck);
position: absolute;
top: 240px;
}
Hice el mismo pero un poco enojado jaja, estuvo divertido.
Resultado:
Código:
https://github.com/PatUgarte/My-first-CSS-draw
Quize hacer algo propio aun que fuera sencillo pero aun asi me costo hacerlo
•
•
•'
platzi no hace magia, platzi te enseña la magia que tienes dentro
esta genial ! ❤️ 😄
Así me quedó.
Códgio 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="./styles.css">
</head>
<body>
<div class="container">
<div class="oreja-left"></div>
<div class="head">
<div class="eye-left">
<div class="eye-left-point"></div>
</div>
<div class="eye-right">
<div class="eye-right-point"></div>
</div>
<div class="barba">
<div class="nariz"></div>
<div class="boca">
<div class="diente">
</div>
<div class="lengua">
</div>
</div>
</div>
</div>
<div class="oreja-right">
<div class="arete"></div>
</div>
<div class="cuello"></div>
</div>
</body>
</html>
Código Css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--skin: #f6c09c;
--background: #ed4042;
--red: #ed2868;
--dark-red: #680524;
--black: #00243a;
--white: #fff;
}
.container{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.head{
width: 200px;
height: 400px;
background: var(--skin);
border-radius: 100px;
position: relative;
}
.eye-left{
width: 40px;
height: 40px;
background: var(--white);
left: 60px;
top: 130px;
position: absolute;
border-radius: 30px 30px 50px 50px;
}
.eye-left-point{
width: 10px;
height: 10px;
background: var(--black);
top: 15px;
left: 15px;
position: absolute;
border-radius: 50px;
}
.eye-right{
width: 40px;
height: 40px;
background: var(--white);
right: 60px;
top: 130px;
position: absolute;
border-radius: 30px 30px 50px 50px;
}
.eye-right-point{
width: 10px;
height: 10px;
background: var(--black);
top: 15px;
left: 15px;
position: absolute;
border-radius: 50px;
}
.barba{
position: absolute;
width: 100%;
height: 55%;
background: var(--black);
bottom: 0px;
border-radius: 70px;
}
.nariz{
position: absolute;
width: 40px;
height: 40px;
background: var(--skin);
border-radius: 50px;
left: 40%;
top: -10px;
}
.boca{
position: absolute;
width: 80px;
height: 40px;
background: var(--dark-red);
border-radius: 0px 0px 50px 50px;
top: 50px;
left: 30%;
}
.diente{
position: absolute;
background: var(--white);
width: 60px;
height: 15px;
border-radius: 0 0px 10px 8px;
}
.lengua{
position: absolute;
background: var(--red);
width: 30px;
height: 15px;
bottom: 0%;
left: 12%;
border-radius: 0px 10px 0px 50px;
}
.cuello{
position: absolute;
width: 130px;
height: 110px;
top: 450px;
z-index: -1;
background: var(--skin);
opacity: 0.8;
}
.oreja-left{
position: absolute;
width: 40px;
height: 40px;
background: var(--skin);
border-radius: 50px;
right: 650px;
}
.oreja-right{
position: absolute;
width: 40px;
height: 40px;
background: var(--skin);
border-radius: 50px;
right: 430px;
}
.arete{
position:absolute;
width: 10px;
height: 10px;
background: var(--black);
border-radius: 0 50px 0 50px;
bottom: 4px;
right: 30%;
}
Después de unas cuantas horas. ¡Reto cumplido!
mi código en un repo de GitHub
No es perfecto, pero hice mi versión y me parece que el resultado fue decente!
<!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">
<link rel="stylesheet" href="./main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="head">
<div class="ears"></div>
<div class="neck"></div>
<div class="eye-left"></div>
<div class="eye-right"></div>
<div class="forehead"></div>
<div class="iris-left"></div>
<div class="iris-right"></div>
<div class="beard"></div>
<div class="mouth"></div>
<div class="teeth"></div>
<div class="barra"></div>
<div class="nose"></div>
</div>
</div>
</body>
</html>
:root {
--skin: #f6c09c;
--background: #ed4042;
--red: #ed2860;
--dark-red: #680524;
--black: #00243a;
--white: #fff;
}
body{
margin: 0;
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.head{
position: relative;
width: 100px;
height: 200px;
background: var(--skin);
border-radius: 50px;
}
.neck{
position: absolute;
width: 40px;
height: 70px;
top: 150px;
left: 30px;
background: var(--skin);
}
.ears{
position: absolute;
top: 70px;
left: -15px;
width: 130px;
height: 50px;
background: var(--skin);
border-radius: 60px;
}
.forehead{
position: relative;
top: 53px;
left: 25px;
width: 60px;
height: 30px;
background: var(--skin);
}
.eye-left{
position: absolute;
top: 80px;
left: 30px;
width: 20px;
height: 20px;
background: var(--white);
border-radius: 50%;
}
.iris-left{
position: absolute;
top: 87px;
left: 38px;
width: 7px;
height: 7px;
background: var(--black);
border-radius: 50%;
}
.eye-right{
position: absolute;
top: 80px;
left: 60px;
width: 20px;
height: 20px;
background: var(--white);
border-radius: 50%;
}
.iris-right{
position: absolute;
top: 87px;
left: 68px;
width: 7px;
height: 7px;
background: var(--black);
border-radius: 50%;
}
.nose{
position: absolute;
top: 100px;
left: 45px;
width: 20px;
height: 30px;
background: var(--skin);
border-radius: 50%;
}
.barra{ /*Está para ocultar la parte superior de la boca del sujeto*/
position: absolute;
top: 120px;
left: 12px;
width: 80px;
height: 30px;
background: var(--black);
}
.mouth{
position: absolute;
top: 140px;
left: 12px;
width: 80px;
height: 40px;
background: var(--red);
border-radius: 40%;
}
.teeth{
position: absolute;
top: 148px;
left: 20px;
width: 40px;
height: 10px;
background: var(--white);
}
.beard{
position: absolute;
top: 110px;
height: 90px;
width: 100px;
background: var(--black);
border-radius: 20px;
}
<h4>Reto Completado:</h4>
<h4>HTML:</h4>
<h4>HTML:</h4>
<div class="container">
<div class="head">
<div class="neck"></div>
<div class="bear">
<div class="nose"></div>
<div class="mouth">
<div class="teeth"></div>
<div class="tongue"></div>
</div>
</div>
<div class="eye-left">
<div class="eyelid"></div>
<div class="pupil"></div>
</div>
<div class="eye-right">
<div class="eyelid"></div>
<div class="pupil"></div>
</div>
<div class="ear-left">x</div>
<div class="ear-right">x</div>
</div>
</div>
:root {
--skin: #f6c09c;
--background: #ed4042;
--red: #ed2860;
--dark-red: #680524;
--black: #00243a;
--white: #fff;
}
.container {
background-color: var(--background);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.head {
background: var(--skin);
border-radius: 50px;
height: 200px;
position: relative;
width: 100px;
}
.neck {
background-color: #e49487;
height: 40px;
position: absolute;
top: 100%;
left: 50%;
transform: translate( -50%, -50%);
width: 70px;
}
.eye-left {
background: var(--white);
height: 28px;
position: absolute;
top: 25%;
left: 50%;
transform: translate(-96%, 0%);
width: 28px;
border-radius: 20px;
}
.eyelid {
background-color: var(--skin);
height: 7px;
width: 28px;
}
.pupil {
background-color: var(--black);
border-radius: 2px;
height: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50%);
width: 4px;
}
.eye-right {
background: var(--white);
height: 28px;
position: absolute;
top: 25%;
left: 50%;
transform: translate(-4%, 0%);
width: 28px;
border-radius: 20px;
}
.ear-left {
position: absolute;
background-color: #e49487;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
color: var(--background);
font-family: Arial;
font-size: 14px;
height: 20px;
line-height: 20px;
text-align: center;
top: 25%;
left: 0%;
transform: translate(-100%, 80%);
width: 18px;
}
.ear-right {
position: absolute;
background-color: #e49487;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
color: var(--background);
font-family: Arial;
font-size: 14px;
height: 20px;
line-height: 20px;
text-align: center;
top: 25%;
left: 100%;
transform: translate(0%, 80%);
width: 18px;
}
.bear {
background-color: var(--black);
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
height: 60%;
position: absolute;
top: 50%;
transform: translate( 0, -15%);
width: 100%;
}
.nose {
background-color: var(--skin);
border-radius: 15px;
height: 30px;
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, -30%);
width: 30px;
}
.mouth {
background-color: var(--dark-red);
border-bottom-left-radius: 23px;
border-bottom-right-radius: 23px;
height: 23px;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -150%);
width: 46px;
}
.teeth {
background-color: var(--white);
border-top-right-radius: 2px;
border-bottom-right-radius: 6px;
height: 8px;
width: 34px;
}
.tongue {
background-color: var(--red);
border-top-right-radius: 5px;
height: 15px;
position: absolute;
top: 50%;
width: 50%;
}
Reto de la ilustración que realizamos con la profe
:root{
--skin:#f6c09c;
--background:#ed4042;
--red:#ed2860;
--dark-red:#680524;
--black:#00243a;
--white:#fff;
}
*{
margin: 0;
padding:0;
box-sizing: border-box;
}
main{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #363636;
}
.head{
position: relative;
width: 150px;
height: 280px;
background-color: var(--skin);
border-radius: 80px;
}
.head::before{
/*ear-left*/
content: "";
position: absolute;
top: 80px;
left: -20px;
width: 30px;
height: 30px;
background-color: var(--skin);
border-radius: 50% 0 0 50%;
}
.head::after{
/*ear-right*/
content: "";
position: absolute;
top: 80px;
right: -20px;
width: 30px;
height: 30px;
background-color: var(--skin);
border-radius: 0 50% 50% 0;
}
.eye-left,.eye-right{
position: absolute;
width: 33px;
height: 28px;
background-color: var(--white);
border-radius: 0% 0% 50% 50%;
}
.eye-left{
top: 80px;
left:calc(-25px + 50%);
}
.eye-left::after{
content: "";
position: absolute;
top:13px;
left: 12px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: black;
}
.eye-right{
top: 80px;
left:calc(-3px + 50%);
}
.eye-right::after{
content: "";
position: absolute;
top:13px;
left: 12px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: black;
}
.nose{
position: absolute;
top:109px;
right: calc(128px - 50%);
width: 40px;
height: 38px;
background-color: var(--skin);
border-radius: 0% 0% 50% 50%;
z-index: 3;
}
.beard{
position: absolute;
bottom: -50px;
width: 150px;
height: 200px;
background-color: var(--black);
z-index: 2;
border-radius: 42px 42px 48% 48%;
}
.mouth{
position: absolute;
top: 155px;
transform: translate(90%,0);
width: 56px;
height: 38px;
z-index: 2;
background-color: var(--dark-red);
border-radius: 0 0 50% 50%;/*top right bottom left*/
}
.mouth::before{
/*tooth*/
content: "";
position: absolute;
width: 44px;
height: 8px;
background-color: var(--white);
border-bottom-right-radius: 40px;
}
.mouth::after{
/*tongue*/
content: "";
position: absolute;
bottom: 0px;
width: 24px;
height: 18px;
background-color: var(--red);
border-radius: 0 40% 0 50%;
}
.neck{
position: absolute;
bottom: -70px;
right: calc(90px - 50%);
width: 120px;
height: 70px;
z-index: 1;
background-color:#f1b892;
border-radius: 8px;
}
Colores:
:root {
--skin: #f6c09c;
--background: #ed4042;
--red: #ed2860;
--dark-red: #680524;
--back: #00243a;
--white: #fff;
}```
;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.head{
width: 200px;
height: 400px;
background-color: var(--skin);
border-radius: 100px;
position: relative;
}
.hair{
width: 200px;
height: 100px;
border-radius: 25px;
border-top-right-radius: 100%;
border-top-left-radius: 100%;
background: var(--yellow);
position: absolute;
top: -10px;
}
.eye-left{
width: 50px;
height: 50px;
background-color: var(--white);
border-radius: 50%;
position: absolute;
top:100px;
left: 20px;
}
.pupila{
height: 10px;
width: 10px;
border-radius:5px ;
background-color:var(--black) ;
position: absolute;
top: 25px;
left:20px ;
transform: translate(0, -25%);
}
.eye-right{
width: 50px;
height: 50px;
background-color: var(--white);
border-radius: 50%;
position: absolute;
top:100px;
left:130px ;
}
.left-ear{
width: 60px;
height: 60px;
border-radius: 45%;
background-color: var(--skin);
position: absolute;
left: -40px;
top:100px ;
}
.right-ear{
width: 60px;
height: 60px;
border-radius: 45%;
background-color: var(--skin);
position: absolute;
left: 180px;
top:100px ;
}
.inside-ear{
width: 30px;
height: 20px;
background-color: var(--red);
border-radius: 50%;
position: absolute;
left: 20px;
top: 20px;
display: flex;
justify-content: space-between;
}
.nouse{
width: 25px;
height: 50px;
background-color: var(--white);
border-radius:25%;
position: absolute;
top: 150px;
left:100px;
transform: translate(-50%, 5%);
background-color:var(--skin);
border: 2px solid var(--white);
}
.mouth{
width: 80px;
height: 50px;
background-color: var(--red);
border-radius:25%;
position: absolute;
top: 220px;
left:50px;
transform: translate(15%);
}
.teeth{
width: 80px;
height: 25px;
background-color: var(--white);
border-radius: 25%;
position: absolute;
}
.beard{
width: 200px;
height: 100px;
background-color: #680524;
position: absolute;
top: 300px;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
border-top-left-radius: 15%;
border-top-right-radius: 15%;
}```
<!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>Dibujito css</title>
<link rel=“stylesheet” href="./css/style.css">
</head>
<body>
<div class=“container”>
<div class=“head”>
<div class=“hair”> </div>
<div class=“eye-left”>
<div class=“pupila”></div> </div>
<div class=“eye-right”>
<div class=“pupila”></div>
</div>
<div class=“nouse”></div>
<div class=“mouth”>
<div class=“teeth”></div>
</div>
<div class=“left-ear”>
<div class=“inside-ear”></div>
</div>
<div class=“right-ear”>
<div class=“inside-ear”></div>
</div>
<div class=“beard”></div>
</div>
</div>
</body>
</html>```
Aquí mi aporte 😃
Super divertido y entretenido el tema, acá mi practica
https://codepen.io/cesar-augusto-silva-ruiz/pen/PobxxNy?editors=1100
Lo hice antes de ver la clase de la profesora, aquí les comparto el codigo.🔥🔥🔥
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?