Uno de los personajes de DC que ha tomado fuerza gracias a las bromas entre Batman y Superman ha sido Flash y para homenajear dicho boom (por así yo llamarlo) a continuación se muestra la codificación en #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
---------------------------------------
---------------------------------------
<div id="head">
<div id="face"></div>
<div id="jaw"></div>
<div id="iface"></div>
<div id="ijaw"></div>
<div id="lcover"></div>
<div id="rcover"></div>
<div id="l_eye"></div>
<div id="r_eye"></div>
<div id="lip"></div>
<div id="lsig">
<div id="lfi"></div>
<div id="lfo"></div>
</div>
<div id="rsig">
<div id="rfi"></div>
<div id="rfo"></div>
</div>
<div id="glare"></div>
<div id="chin"></div>
<div id="neck"></div>
<div id="shoulders"></div>
<div id="arms"></div>
<div id="logo">
<div id="mid"></div>
<div id="top"></div>
<div id="bot"></div>
</div>
<div id="rchest"><div>
<div id="lchest"><div>
<div id="rob"></div>
</div>
<div id="flash"> FLASH </div>
---------------------------------------
*CSS3
---------------------------------------
---------------------------------------
body{
background:radial-gradient(#fd0 0%, #B92A2E 100%);
height:1200px;
overflow:hidden;
}
#head{
width:200px; height:200px;
background:#B92A2E;
border-radius:50%;
margin:50px auto;
}
#face{
height:0px; width: 140px;
position:relative;
top:100px;
border-top: 140px solid #B92A2E;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}
#jaw{
height:0px; width: 40px;
position:relative;
top:100px; left:30px;
border-top: 30px solid #B92A2E;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
#iface{
height:0px; width: 120px;
position:relative;
top:-15px; left:20px;
border-top: 80px solid #F1D6A5;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
#ijaw{
height:0px; width: 40px;
position:relative;
top:-15px; left:40px;
border-top: 30px solid #F1D6A5;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
#lcover{
width:100px; height:60px;
background: #B92A2E;
transform:rotate(35deg);
position:relative;
top:-170px; left:80px;
}
#rcover{
width:100px; height:60px;
background: #B92A2E;
transform:rotate(-35deg);
position:relative;
top:-230px; left:20px;
}
#l_eye{
width: 0;
height: 0;
position:relative;
top:-260px; left:10px;
border-top: 20px solid #fff;
border-left: 55px solid transparent;
border-right: 15px solid transparent;
transform: rotate(10deg);
z-index:1000;
}
#r_eye{
width: 0;
height: 0;
position:relative;
top:-280px; left:120px;
border-top: 20px solid #fff;
border-left: 15px solid transparent;
border-right: 55px solid transparent;
transform: rotate(-10deg);
z-index:1000;
}
#lip{
width:80px;
height:50px;
background:transparent;
border-bottom:3px solid #d1b685;
border-radius:0px 0px 5px 20px;
position:relative;
top:-270px; left:50px;
}
#lsig{
width:50px; height:80px;
border-radius:50%;
background:radial-gradient(#FFE545 0%, #FFE545 40%, #FBB829 100%);
transform:rotate(10deg);
position:relative;
top:-400px;
left:160px;
z-index:-10;
}
#rsig{
width:50px; height:80px;
border-radius:50%;
background:radial-gradient(#FFE545 0%, #FFE545 40%, #FBB829 100%);
transform:rotate(-10deg);
position:relative;
top:-480px;
left:-10px;
z-index:-10;
}
#lfi{
width:10px; height:50px;
background:#FFE545;
position:relative;
top:-10px; left:40px;
z-index:-200;
}
#lfo{
width:10px; height:50px;
background:transparent;
position:relative;
top:-100px; left:40px;
border-right:10px solid #FFE545;
border-radius:0px 30px 0px 0px;
z-index:-20;
}
#rfi{
width:10px; height:50px;
background:#FFE545;
position:relative;
top:-10px; left:0px;
z-index:-200;
transform:rotateY(180deg);
}
#rfo{
width:10px; height:50px;
background:transparent;
position:relative;
top:-100px; left:-10px;
border-right:10px solid #FFE545;
border-radius:0px 30px 0px 0px;
z-index:-20;
transform:rotateY(180deg);
}
#glare{
width:190px; height:190px;
background:radial-gradient(ellipse at top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 75%);
border-radius:50%;
position:relative;
top:-650px; left:5px;
}
#chin{
width:40px; height:15px;
border-radius:100px 100px 0px 0px;
background:#B92A2E;
position:relative;
top:-590px; left:80px;
}
#neck{
height:0px; width: 160px;
position:relative;
top:-700px; left:0px;
border-bottom: 170px solid #A92A2E;
border-left:20px solid transparent;
border-right:20px solid transparent;
z-index:-100;
}
#shoulders{
height:200px; width: 400px;
position:relative;
top:-780px; left:-100px;
background:#A92A2E;
border-radius:30% 30% 0 0 ;
z-index:-100;
}
#arms{
height:200px; width: 600px;
position:relative;
top:-960px; left:-200px;
background:#A92A2E;
border-radius:40% 40% 0 0 ;
z-index:-100;
}
#rob{
height:2000px; width: 600px;
position:relative;
top:140px; left:-300px;
background:#A92A2E;
z-index:-100;
}
#logo{
width:120px; height:120px;
border:15px solid #ff0;
background:radial-gradient(#fff 0%, #fff 65%, #fd0 65%, #dd0 100%);
border-radius:50%;
position:relative;
top:-1050px; left:25px;
}
#mid{
width:40px; height:40px;
background:#ff0;
transform:skew(-50deg);
position:relative;
top:40px; left:40px;
}
#top{
width: 0;
height: 0;
border-bottom: 50px solid #ff0;
border-left: 35px solid transparent;
border-right: 0px solid transparent;
transform:skew(-50deg);
position:relative;
top:-40px; left:50px;
}
#bot{
width: 0;
height: 0;
border-top: 50px solid #ff0;
border-left: 0px solid transparent;
border-right: 35px solid transparent;
transform:skew(-50deg);
position:relative;
top:-20px; left:20px;
}
#rchest{
width:200px; height:150px;
background:linear-gradient(rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
border-radius: 40% 55% 30% 50%;
position:relative;
top:-1250px; left:-100px;
}
#lchest{
width:200px; height:150px;
background:linear-gradient(rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
border-radius: 60% 55% 50% 30%;
position:relative;
left:200px;
}
#flash{
color:#ff0;
font-family:sans-serif;
font-size:200px;
font-weight:bolder;
font-style:italic;
position:absolute;
top:-200px; left:1500px;
z-index:-2200;
animation: slash 1s 5 ease-in-out;
animation-delay: 3s;
}
@keyframes slash{
0% {left:1500px;}
100% {left:-2000px;}
}
---------------------------------------
No hay comentarios:
Publicar un comentario