Cómo crear una carita feliz usando solo CSS 😊
¡Hola! Hoy te enseñaré cómo crear una carita feliz con un diseño divertido usando HTML y CSS. Aquí te muestro una vista previa del resultado final:
1. Estructura HTML
Primero, vamos a crear un contenedor que será la base de nuestra carita feliz. Dentro de él colocaremos tres elementos div, que representarán los dos ojos y la boca. Además, dentro del tercer div (la boca) incluiremos un span, que simulará los dientes.
<divclass="container">
<divclass="item"></div>
<divclass="item"></div>
<divclass="item">
<span class="dientes"></span>
</div>
</div>
En resumen:
El contenedor principal (.container) alberga tres elementos con clase item.
Los dos primeros div.item son los ojos.
El tercer div.item representa la boca, y dentro de él, el span.dientes simula los dientes.
2. Estilos del contenedor
Ahora, vamos a aplicar estilos al contenedor. Este se diseñará con CSS Grid para facilitar la ubicación de los elementos (ojos y boca) dentro del rostro.
<style>.container{
background: pink;
width: 200px;
height: 200px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr ;
border-radius: 100%;
border-bottom: dotted 10px;
}
</style>Detalles del estilo:
Dimensiones: 200px de ancho y alto.
Diseño: Una cuadrícula de 5 columnas y 5 filas.
Forma: border-radius: 100% para que sea completamente redonda.
Detalle inferior: border-bottom punteado para simular una barba
3. Estilos de los ojos
Utilizamos nth-child para seleccionar y posicionar los ojos dentro de la cuadrícula. Les damos forma circular, un fondo negro y un borde blanco
<style>.container.item:nth-child(1){
grid-column: 2/3;
grid-row: 2/3;
background: black;
border: solid 10px white;
border-radius: 100%;
}
.container.item:nth-child(2){
grid-column: 4/5;
grid-row: 2/3;
background: black;
border: solid 10px white;
border-radius: 100%;
}
</style>4. Estilo de la boca y los dientes
La boca se ubica utilizando nth-child(3), y se representa con un borde inferior negro. Se le asigna una posición relativa para poder colocar correctamente el span de los dientes, que se posiciona de forma absoluta dentro de la boca.
<style>.container.item:nth-child(3){
grid-column: 2/5;
grid-row: 3/4;
border-bottom: solid 30px black;
border-radius: 100%;
position: relative;
}
.dientes{
border-top: solid 10px white ;
display: block;
width: 100px;
position: absolute;
top: 10px;
left: 10px;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
}
</style>La boca usa border-bottom para simular la curva.
Los dientes tienen un borde superior blanco y esquinas inferiores redondeadas para dar un efecto más realista.
¡Y listo! Con estos pasos puedes crear una carita feliz con un toque perturbador usando únicamente HTML y CSS. Espero que te haya gustado y que te diviertas experimentando con diferentes estilos y expresiones 😄
