Crear el logo de TikTok con HTML y CSS es una excelente forma de practicar cómo se construyen figuras usando posiciones absolutas, sombras, capas y combinaciones de colores. Esta práctica te ayudará a fortalecer tu dominio del FRONTEND y a entender cómo pequeños detalles visuales pueden crear composiciones complejas.
En MGPanel queremos que desarrolles habilidades sólidas como programador FRONTEND, por eso creamos ejercicios como este, donde podrás desafiarte y aprender cómo HTML y CSS pueden trabajar juntos para dar vida a elementos visuales avanzados.
🧩 Código HTML
<div class="cuadro">
<div class="tiktok"></div>
</div>🎨 Código CSS
body {
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
}
.cuadro {
background: #000;
position: relative;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 80px;
padding: 0 0 70px 60px;
}
.tiktok {
margin: 0px auto 0;
width: 37px;
height: 218px;
background: #fff;
box-shadow: 11px 10px 0 0 #fe2d52;
filter: drop-shadow(-10px -10px 0 #28ffff);
position: relative;
}
.tiktok::after {
content: "";
position: absolute;
border: 37px solid #fff;
border-top-color: transparent;
width: 100px;
height: 100px;
border-radius: 50%;
transform: rotate(45deg);
filter: drop-shadow(16px 0 0 #fe2d52);
top: 123px;
left: -137px;
}
.tiktok::before {
content: "";
position: absolute;
border: 30px solid transparent;
border-bottom-color: #fff;
width: 140px;
height: 140px;
border-radius: 100%;
transform: rotate(45deg);
filter: drop-shadow(14px 0 0 #fe2d52);
top: -100px;
right: -172px;
}Replica este código en tu proyecto o espacio de trabajo y tendrás el logo de TIKTOK completamente recreado en CSS. Observa cómo cada capa, sombra y pseudo-elemento aporta una parte esencial al resultado final.
👉 Ver logo de TIKTOK en HTML y CSS
A partir de aquí, puedes experimentar con tamaños, colores y formas para adaptarlo a tu propio estilo. ¡La creatividad es clave en el FRONTEND!
Nos vemos en un próximo artículo 🚀