martes, 28 de mayo de 2013

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 Espinoza
 
 
 
 
 
 
 
 
 
 
 
 
 

CÓ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