El personaje más famoso de DC es sin duda Batman, por lo tanto no podíamos dejarlo de un lado y le llegó el turno de ser dibujado por #CSS.
El código que se muestra a continuación ha sido elaborado por Genjuro. En el siguiente link pueden revisar el sitio oficial.
*HTML
---------------------------------------
---------------------------------------
<body bgcolor="#111">
<div id="bat">
<div id="mask">
<div id="l_ear"></div>
<div id="r_ear"></div>
<div id="l_eye"></div>
<div id="r_eye"></div>
<div id="u_jaw"></div>
<div id="l_jaw"></div>
<div id="glare"></div>
<div id="lip"></div>
<div id="shoulders"></div>
<div id="torso"></div>
</div>
</div>
</body>
---------------------------------------
*CSS3
---------------------------------------
---------------------------------------
#mask{
width:180px;
height:300px;
background:#223;
position:absolute;
top:100px; left:40%;
border-radius:90px 90px 0px 0px;
}
#l_ear{
width: 0;
height: 0;
border-bottom: 120px solid #223;
border-left: 10px solid transparent;
border-right: 40px solid transparent;
position:relative;
top:-40px; left:0px;
}
#r_ear{
width: 0;
height: 0;
border-bottom: 120px solid #223;
border-left: 40px solid transparent;
border-right: 10px solid transparent;
position:relative;
top:-160px; left:130px;
}
#u_jaw{
width: 140px;
height: 60px;
position:relative;
left:20px; top:-130px;
background:rgb(255, 229, 184);
border-radius:02px 02px 0px 0px;
}
#l_jaw{
height: 0px;
width: 80px;
position:relative;
top:-130px; left:20px;
border-top: 40px solid rgb(255, 229, 184);
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}
#l_eye{
width: 0;
height: 0;
position:relative;
top:-140px; left:10px;
border-top: 20px solid #eee;
border-left: 55px solid transparent;
border-right: 15px solid transparent;
transform: rotate(20deg);
z-index:1000;
}
#r_eye{
width: 0;
height: 0;
position:relative;
top:-160px; left:100px;
border-top: 20px solid #eee;
border-left: 15px solid transparent;
border-right: 55px solid transparent;
transform: rotate(-20deg);
z-index:1000;
}
#glare{
width:120px; height:90px;
background:radial-gradient(ellipse at top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 75%);;
border-radius:100%;
position:relative;
top:-375px; left:30px;
}
#lip{
width:50px; height:2px;
background:#7B4C34;
position:relative;
top:-290px; left:65px;
}
#shoulders{
height: 0;
width: 180px;
border-bottom: 80px solid #223;
border-left: 240px solid transparent;
border-right: 240px solid transparent;
position:relative;
top:-230px; left:-240px;
z-index:-100;
}
#torso{
height: 1000px;
width: 660px;
background:linear-gradient(to bottom, #222233 0%,#121223 100%);
position:relative;
top:-230px; left:-240px;
z-index:-100;
}
body{
overflow:hidden;
}
---------------------------------------
No hay comentarios:
Publicar un comentario