En esta oportubnidad te enseñaré como hacer un elegante proyecto en HTML5 y CSS3 que podrás implementar en tus páginas web, ya sea en el HEADER o en el FOOTER del documento HTML.
Con este proyectos podrás mostrar tus redes sociales de forma animada y fluida, pero de una forma muy elegante y llamativa.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Social Media 3D</title>
<!-- Menú Redes Sociales -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- Inicio Redes Sociales || Start Soacial Networks -->
<div class="SocialMedia3D">
<ul>
<li style="--i: -4; --clr: #1877F2" data-text="Facebook"><a href="#"><span><i class="fa-brands fa-facebook-f"></i></span>Facebook</a></li>
<li style="--i: -3; --clr: #C32AA3" data-text="Instagram"><a href="#"><span><i class="fa-brands fa-instagram"></i></span>Instagram</a></li>
<li style="--i: -2; --clr: #25D366" data-text="WhatsApp"><a href="#"><span><i class="fa-brands fa-whatsapp"></i></span>WhatsApp</a></li>
<li style="--i: -1; --clr: #1DA1F2" data-text="Twitter"><a href="#"><span><i class="fa-brands fa-twitter"></i></span>Twitter</a></li>
<li style="--i: 0; --clr: #FF5722" data-text="Blogger"><a href="#"><span><i class="fa-brands fa-blogger"></i></i></span>Blogger</a></li>
<li style="--i: 1; --clr: #FF0000" data-text="YouTube"><a href="#"><span><i class="fa-brands fa-youtube"></i></span>YouTube</a></li>
<li style="--i: 2; --clr: #000000" data-text="GitHub"><a href="#"><span><i class="fa-brands fa-github"></i></span>GitHub</a></li>
<li style="--i: 3; --clr: #FC6D26" data-text="GitLab"><a href="#"><span><i class="fa-brands fa-gitlab"></i></span>GitLab</a></li>
</ul>
</div>
<!-- Fin Redes Sociales || End Soacial Networks -->
</body>
</html>CSS
/* Mini Normalize CSS */
{
background-color: #E3E3E3;
border: none;
box-sizing: border-box;
font-family: arial, sans-serif;
list-style: none;
margin: 0;
padding: 0;
outline: none;
scroll-behavior: smooth;
text-decoration: none;
}
.SocialMedia3D
{
align-items: center;
background-color: #E3E3E3;
display: flex;
float: right;
justify-content: center;
min-height: 500px;
width: 100%;
}
.SocialMedia3D ul
{
position: relative;
transform: skewY(-25deg);
width: 10%;
}
.SocialMedia3D ul li
{
background-color: #383838;
padding: 15px;
position: absolute;
top: 0;
transform: translate(calc(var(--i)*40px), calc(var(--i)*40px));
transition: 0.5s;
width: 100px;
}
.SocialMedia3D ul li:hover
{
background: var(--clr);
top: -54px;
}
.SocialMedia3D ul li:before
{
background-color: #2F2F30;
content: '';
height: 100%;
left: -40px;
position: absolute;
top: 0;
transform: skewY(45deg);
transform-origin: right;
transition: 0.5s;
width: 40px;
}
.SocialMedia3D ul li:hover::before
{
background: var(--clr);
filter: brightness(0.8);
}
.SocialMedia3D ul li:after
{
align-items: center;
background-color: #3E3E3E;
box-shadow: -120px 120px 20px rgba(0, 0, 0, 0.25);
box-sizing: border-box;
color: var(--clr);
content: attr(data-text);
display: flex;
height: 40px;
left: 0;
left: 0.05em;
padding-left: 15px;
position: absolute;
text-transform: uppercase;
top: -39px;
transform: skewX(45deg);
transform-origin: bottom;
transition: 0.5s;
width: 100%;
}
.SocialMedia3D ul li:hover::after
{
background: var(--clr);
box-shadow: -170px 170px 20px rgba(0, 0, 0, 0.50);
color: #FFF;
filter: brightness(0.9);
}
.SocialMedia3D ul li a
{
color: transparent;
display: block;
letter-spacing: 0.05em;
transition: 0.5s;
text-decoration: none;
text-transform: uppercase;
}
.SocialMedia3D ul li:hover a
{
color: #FFF;
}
.SocialMedia3D ul li a span
{
align-items: center;
color: var(--clr);
display: flex;
font-size: 1.25em;
height: 100%;
justify-content: center;
left: -40px;
position: absolute;
transform: skewY(45deg);
transform-origin: right;
transition: 0.5s;
text-align: center;
top: 0;
width: 40px;
}
.SocialMedia3D ul li:hover a span
{
color: #FFF;
}Ahora veamos el resultado:
Al pasar el cursor por cada item social, se levantará de forma animada.
