PERRY CSS3
Para complacer a mi hermanita me puse en la tarea de hacer a perry en css3 y aprovechando unas horitas libre lo hice muy facil nada del otro mundo mucha creatividad solamnete espero les guste. Aqui el codigo.
CÓDIGO HTML
Hayder EspinozaCÓDIGO CSS3
*{ margin:0; padding:0; font-family: 'Berlin Sans FB'; } .contenedor{ background-color: rgba(0, 149, 162, 0.3); width: 300px; height:300px; margin:auto; margin:top; -webkit-border-radius:20%; position:relative; z-index:-2; } #nombre{ widht:180px; height: 20px; padding:0.3px; font-weight: bold; font-size:140%; color:rgb(151, 211, 208); text-shadow:1px 1px #fff , -1px -1px #333; position:absolute; top:10px; left:60px; } #cuerpo{ width:100px; height:170px; background-color: rgb(0, 170, 153); -webkit-border-radius:30px 35px 0 0 ; border:4px solid #000; position:absolute; bottom:50px; left:95px; } .antena{ width:4px; height: 30px; background-color: #000; position:absolute; z-index:5; -webkit-border-radius:5px; } .ant_right{ left:55px; top:-30px; -webkit-transform:rotate(30deg); } .ant_left{ height: 15px; left:45px; top:-15px; -webkit-transform:rotate(-30deg); } .ojos{ width:18px; height: 25px; background-color:#000; -webkit-border-radius:50%; position: absolute; } .ojo_left{ left:17px; top:30px; } .ojo_right{ right: 17px; top:30px; } .ojo_left:after, .ojo_right:after{ content:" "; width:9px; height: 13px; background-color: #fff; -webkit-border-radius:50%; position:absolute; left:4px; top:1px; } .mejilla{ width: 15px; height: 15px; background-color: rgba(218, 52, 204, 0.41); -webkit-border-radius:50%; position: absolute; } .mejilla_left{ top:53px; left:5px; } .mejilla_right{ top:53px; right:5px; } .pico{ width:120px; height: 16px; background-color: rgb(255, 163, 47); -webkit-border-radius:10px; border:3px solid #000; position:absolute; left:-14px; top:70px; } .pico:after{ content:" "; width:65px; height: 13px; background-color: rgb(255, 163, 47); -webkit-border-radius:0 0 15px 15px; border-bottom:3px solid #000; border-left:3px solid #000; border-right:3px solid #000; position:absolute; left:25px; bottom:-19px; }
0 comentarios:
Publicar un comentario