Lleva tus conocimientos de CSS a otro nivel

1

Tips para llevar tu conocimiento de CSS a otro nivel + Quices

驴De d贸nde venimos y en d贸nde estamos?

2

驴C贸mo fue pensado CSS cuando se cre贸?

3

Limitaciones de CSS y el problema de los elementos flotantes

4

Herramientas que nos han facilitado el camino

驴C贸mo se lleg贸 al concepto de CSS Grid?

5

驴CSS Grid es una idea nueva? La evoluci贸n de la especificaci贸n

6

驴Qu茅 significa Grid para CSS?

Control de alineamiento

7

T茅cnicas de alineamiento antes de CSS Grid: margin y line-height

8

T茅cnicas de alineamiento antes de CSS Grid: table-cell y positions

9

T茅cnicas de alineamiento de CSS Grid: pros y contras

10

Modos de escritura y ejes de alineamiento + Reto

11

Propiedades f铆sicas y l贸gicas en CSS + Quiz

12

T茅cnicas de alineamiento con Flexbox

13

Dibujemos con CSS + Reto

Conceptos generales para comenzar a trabajar con CSS Grid

14

Grid y las relaciones padre e hijos inmediatos + Qu铆z

15

Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto

16

隆Iniciemos nuestro proyecto! Fase de creatividad e identificaci贸n de elementos

Propiedades y valores para el elemento padre

17

Creando nuestro contenedor: 驴display: grid o display: inline-grid?

18

Creando filas, columnas y espaciado + Reto

19

Alineamiento en el elemento contenedor + Quiz

20

Generaci贸n autom谩tica de tracks + Qu铆z

21

Funciones: repeat(), minmax() y fit-content()

Propiedades y valores para los elementos hijos

22

隆Manos al c贸digo! Fase de construcci贸n de la grid principal de nuestro proyecto

23

Ubicaci贸n + Reto

24

Alineamiento en los elementos hijos + Quiz

25

隆Manos al c贸digo! Fase de ubicaci贸n y alineamiento

26

Continuando con la fase de ubicaci贸n y alineamiento

Lo que podemos lograr adicionalmente con CSS Grid

27

Responsive y CSS Grid

28

Contin煤a con el Curso de Dise帽o Web con CSS Grid y Flexbox

A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Dibujemos con CSS + Reto

13/28
Recursos

Aportes 225

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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
.

Realice esta imagen con puro CSS.

隆Yo hice un Homero Simpson con pelo y todo! Estoy muy orgulloso.

Para no alargar les dejo mi c贸digo en GitHub https://github.com/JoEduardoReyes/grid-layout-2021/tree/main/dibujo

Lo sufr铆, pero se siente bien cuando lo ves terminado

https://codepen.io/adranuz/pen/YzwQbry

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 馃槃

Aqu铆 les dejo el resultado de mi dibujo con css de Mafalda

Mi peque帽o aporte.

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!

Realice esta imagen. Es algo sencillo, pero me gusto.
Ac谩 pueden verlo en vivo y aqu铆 pueden encontrar el c贸digo completo.

Me tomo un buen rato, pero lo logre!! 馃榿馃榿馃榿

Para desestresarse un poco

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;
}

Este es el resultado de mi pr谩ctica, esta muy bueno dibujar con css!

Mi primer Draw con css

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>馃槄

Elvis Presley, mediante el movimiento artistico conocido como Arte Moderno Contemporaneo 馃帹


Si no saben de arte no critiquen 馃槑馃槀馃槀馃槀

Intente otro dibujo. He aqu铆 el resultado. Mi primer dibujo con CSS
![](
CSS

:root{
   --fondo: #33CBCC;
   --pecho: #009ED6;
   --piel: #FBC8AD;

}
body{
    margin: 0;
    padding: 0;
}
.paper{
    background-color: var(--fondo);
    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);
}```

Sin duda creo que a Platzi le vendr铆a bien un curso de dibujo con CSS

Me costo mucho, pero logre terminarlo

Les comparto mi dibujo, un pokedex!
Funciona este es el link https://jose-garzon.github.io/pokedex/

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;

Aqu铆 esta mi resultado:

Hice un Bender con CSS 馃槂
馃憠 Aqu铆 el c贸digo: Bender CSS

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鈥

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

Lo consegu铆 馃槃

Mi aporte! Me c贸st贸 pero lo logr茅!
Basado en mi primer Axie #17051
#AxieInfinity

https://codepen.io/ca7seven/pen/abyXKex

Luchado, que interesante. Leccion aprendida de z-index; position, border-bottom-left-radius.

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:

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鈥檚 Cube - CSS

hice de reto una piramide

No es mucho, pero es trabajo honesto 馃槄
Persona Animado con CSS

隆Se hizo lo que se pudo! 馃槕

https://codepen.io/castrodurl/pen/LYbQdRR

y finalmente as铆 me qued贸 en CSS : https://photographya.github.io/Dibujarte-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

buenas 鈥 solo queria participar XD

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.

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

https://github.com/SantiMarinPoli/dibujo-CSS

![](
30 minutos y varios videos en youtube despu茅s鈥

Mire que un estudiante hizo lo mismo y me gusto para replicar y practicar.

Yo hice un cocodrilo bien chido

Bueno reto terminado:)

@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;
}

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

Hice el mismo pero un poco enojado jaja, estuvo divertido.

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>
<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>
<h4>CSS:</h4>
: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%;
}
<h4> Link al CodePen</h4>

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;
}```

![](

:root{
    --skin:#f6c09c;
    --background:#ed4042;
    --red:#ed2860;
    --dark-red:#680524;
    --black:#00243a;
    --white:#fff;
    --yellow:rgb(255, 215, 38);
}
*{
    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=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<title>Dibujito css</title>
<link rel=鈥渟tylesheet鈥 href="./css/style.css">
</head>
<body>
<div class=鈥渃ontainer鈥>
<div class=鈥渉ead鈥>
<div class=鈥渉air鈥> </div>
<div class=鈥渆ye-left鈥>
<div class=鈥減upila鈥></div> </div>
<div class=鈥渆ye-right鈥>
<div class=鈥減upila鈥></div>
</div>
<div class=鈥渘ouse鈥></div>
<div class=鈥渕outh鈥>
<div class=鈥渢eeth鈥></div>
</div>
<div class=鈥渓eft-ear鈥>
<div class=鈥渋nside-ear鈥></div>
</div>
<div class=鈥渞ight-ear鈥>
<div class=鈥渋nside-ear鈥></div>
</div>
<div class=鈥渂eard鈥></div>
</div>
</div>
</body>
</html>```

Reto completado! bueno lo mas cercano que pude

https://codepen.io/gexed/pen/dyOdrbM

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.馃敟馃敟馃敟

Reto terminado!!

El reto fue la cara de Phineas
Aqu铆 comparto el c贸digo: Repositorio

Reto completado

Codigo html

Me emociono mucho la idea de hacer dibujos con solo CSS!!!

Reto finalizado:

HTML:

<div class="container">
  <div class="head">
    <div class="neck"></div>
    <div class="bottom"></div>
    <div class="nose"></div>
    <div class="mouth"></div>
    <div class="teeth"></div>
    <div class="eye-left"></div>
    <div class="eye-ball-left"></div>
    <div class="eye-right"></div>
    <div class="eye-ball-right"></div>
    <div class="ear-left">x</div>
    <div class="ear-right">x</div>
   </div>
</div>

CSS

: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 {
  width: 200px;
  height: 350px;
  background-color: var(--skin);
  border-radius: 100px;
  position: relative;
}
.eye-ball-left {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius:10px;
  background-color: black;
  top: 118px;
  left: 73px;
}
.eye-ball-right {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 10px;
  background-color: black;
  top: 118px;
  right: 73px;
}
.eye-left {
  width: 50px;
  height: 35px;
  background-color: var(--white);
  position: absolute;
  top: 110px;
  border-radius: 0 0 50px 50px;
  left: 53px;
}
.eye-right {
  width: 50px;
  height: 35px;
  background-color: var(--white);
  position: absolute;
  top: 110px;
  border-radius: 0 0 50px 50px;
  right: 52px;
}
.nose {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50px;
  background-color: var(--skin);
  top: 145px;
  left: 70px;
}
.bottom {
  position: absolute;
  width: 200px;
  height: 240px;
  border-radius: 70px 70px 100px 100px;
  background-color: black;
  top: 160px
}
.mouth {
  position: absolute;
  width: 80px;
  height: 45px;
  background-color: white;
  top: 210px;
  left: 60px;
  border-radius: 0 0 50px 50px;
  background-color: var(--dark-red);
}
.teeth {
  position: absolute;
  width: 60px;
  height: 18px;
  background-color: var(--white);
  bottom: 121px;
  left: 60px;
  border-radius: 0 0 10px 8px
}
.neck {
  position: absolute;
  width: 130px;
  height: 130px;
  background-color: var(--skin);
  top: 300px;
  left: 30px;
}
.ear-left {
  position: absolute;
  width: 33px;
  height: 40px;
  background-color: #ed927d;
  text-align: center;
  border-radius: 25px 0 0 25px;
  line-height: 40px;
  top: 115px;
  left: -32px;
  color: #e96968;
  font-weight: ;
  font-size: 20px;
}.ear-right {
  position: absolute;
  width: 33px;
  height: 40px;
  background-color: #ed927d;
  text-align: center;
  border-radius: 0 25px 25px 0px;
  line-height: 40px;
  top: 115px;
  right: -32px;
  color: #e96968;
  font-weight: ;
  font-size: 20px;
}

Bueno la idea es esa

Codepen

El mejor reto con css 馃挌
Repo

Reto:

esta muy bueno dibujar con css.

Aqu铆 mi dibujo ^.^

El enlace aqu铆:
https://codepen.io/Francesca2304/pen/dyOKxaV

Lo hice mirando como lo hicieron (https://twitter.com/baumannzone/status/1363949040166174725).

Pr谩ctique la parte de nombrar clases y el display flex y display grid. Comprendi el z-index usandolo en la sombra de la nave. Es un buen ejercicio y divertido.

BABY YODA CSS.JPG

Hecho con CSS Grid

hola Profe y a todos

Este reto es muy vacano y nos ayuda muchisimos en el manejos de propiedades en CSS

https://codepen.io/pen?template=bGLGpOQ

Am茅 este reto 鉂ゐ煉氿煉

Aqu铆 mi repo y mi page

Listo el pollo:

Aqui va le desafio:

Aqui en codigo 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">
    <link rel="stylesheet" href="styles.css">
    <title>Hombre Barbudo</title>
</head>
<body>

    <div class="container">
        <div class="head">
                        <div class="eyebrow"></div>
            <div class="eye-left">
                <div class="iris-left"></div>
            </div>
            <div class="eye-right">
                <div class="iris-right"></div>
            </div>
            <div class="nose"></div>
            <div class="bottom">
                <div class="mouth">
                    <div class="teeth"></div>
                    <div class="tongue"></div>
                </div>
                <div class="ear-left">x</div>
            <div class="ear-right">x</div>
            </div>
            <div class="neck"></div>

            
        </div>
    </div>
   
</body>
</html>

Codigo CSS

@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:[email protected]&display=swap');

:root {
    --skin: #f6c09c;
    --background: #ed4042;
    --red: #ed2860;
    --dark-red: #680524;
    --black: #00243a;
    --white: #fff;
    --ears: #ED927D;
  }

  

  *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
    font-family: 'Comic Neue', cursive;
  }

  .container {
      display: flex;
      width: 100vw;
      height: 100vh;
      justify-content: center;
      align-items: center;
      background: #ad5389;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #3c1053, #ad5389);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #3c1053, #ad5389); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  }

  .head {
      width: 120px;
      height: 200px;
      background-color: var(--skin);
      position: relative;
      border-radius: 60px;      

  }

  .eyebrow {
      width: 70px;
      height: 18px;
      background-color: var(--skin);
      position: absolute;
      left: calc(50% - 35px);
      top: 53px;
      z-index: 1;
  }

  .eye-left {
      width: 35px;
      height: 35px;
      background: var(--white);
      border-radius: 50%;
      position: absolute;
      top: 60px;
      left: 28px;
  }

  .eye-left .iris-left {
      width: 6px;
      height: 6px;
      background-color: var(--black);
      border-radius: 50%;
      margin: 15px auto;
  }

  .eye-right {
    width: 35px;
    height: 35px;
    background: var(--white);
    border-radius: 50%;
    position: absolute;
    top: 60px;
    right: 28px;
}

.eye-right .iris-right {
    width: 6px;
    height: 6px;
    background-color: var(--black);
    border-radius: 50%;
    margin: 15px auto;
}

.nose {
    width: 30px;
    height: 30px;
    background: var(--skin);
    border-radius: 50%;
    position: absolute;
    left: calc(50% - 15px);
    top: 92px;
    z-index: 1;
}

.bottom {

    width: 120px;
    height: 120px;
    background-color: var(--black);
    position: relative;
    border-radius: 40px 40px 50% 50%;
    margin-top: 100px;   

} 

.mouth {
    width: 50px;
    height: 25px;
    background-color: var(--dark-red);
    position: absolute;
    left: calc(50% - 25px);
    top: 28px;
    border-radius: 0 0 25px 25px;
    overflow: hidden;

}

.teeth {
    width: 38px;
    height: 8px;
    background-color: var(--white);
    border-radius: 0 0 5px 0;
}

.tongue {
    width: 25px;
    height: 20px;
    display: block;
    background-color: var(--red);
    border-radius: 0 5px 0 0;
    margin-top: 5px;    
}

.ear-left {
    width: 15px;
    height: 20px;
    background-color: var(--ears);
    position: absolute;
    left: -15px;
    top: -10px;
    border-radius: 25px 0 0 25px;
    text-align: right;
    font-weight: 700;
    font-size: 16px;
    color: #E8696B;
    
    
}

.ear-right {
    width: 15px;
    height: 20px;
    background-color: var(--ears);
    position: absolute;
    right: -15px;
    top: -10px;
    border-radius: 0 25px 25px 0;
    text-align: left;
    font-weight: 700;
    font-size: 16px;
    color: #E8696B;
    
    
}

Contento con mi dibujo hecho con CSS, pens茅 que iba a ser muy dificil pero fue muy intuitivo.