トップ > > CSS3でミッキーマウス

CSS3でミッキーマウス

こちらの記事を読んでいたら「やってみたい!」と突如思い立って、CSS3のみで画像を使わずミッキーマウスを描いてみました。Google ChromeとSafariはキレイなミッキーですが、Firefoxはボーダー周りが微妙にきれいにならないスタイルがあって、IE8はロボミッキーです(笑) それでもIE6みたいに崩れたりしない分いいですね。みなさん最新のブラウザを使いましょう!

webpark:画像を使わずCSS3だけで作ったあのロゴやあのキャラクター

3ブラウザでのレンダリング

HTML

とりあえずパーツを作って重ねています。きれいな構造にはなっていないので、ちゃんと整理すると輪郭のなかに目を入れたりできるかも。

CSS

基本はborder-radiusを使った楕円の組み合わせで、耳や目を transform: rotate で少し傾けています。えくぼや目にかぶさる鼻も border で描いています。できあがったパーツは順番に position:absolute で重ねています。

#css3mickey{
	width:580px;
	margin:20px auto;
	padding:40px;
}

#css3mickey .ear_left{
	float:left;
	width:220px;
	height:240px;
	background-color:#333333;
	background: -moz-linear-gradient(top, #333333, #000000);
	background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#000000));
	border:1px solid #000000;
	-moz-border-radius:	110px 110px 110px 110px/120px 120px 120px 120px;
	-webkit-border-radius:	110px 110px 110px 110px/120px 120px 120px 120px;
	border-radius:		110px 110px 110px 110px/120px 120px 120px 120px;
	transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	}
#css3mickey .ear_right{
	float:right;
	width:220px;
	height:240px;
	background-color:#333333;
	background: -moz-linear-gradient(top, #333333, #000000);
	background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#000000));
	border:1px solid #000000;
	-moz-border-radius:	110px 110px 110px 110px/120px 120px 120px 120px;
	-webkit-border-radius:	110px 110px 110px 110px/120px 120px 120px 120px;
	border-radius:		110px 110px 110px 110px/120px 120px 120px 120px;
	transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-webkit-transform: rotate(-30deg);
	}

#css3mickey .head{
	position:relative;
	top:-90px;
	clear:both;
	margin:0 auto;
	width:380px;
	height:360px;
	background-color:#333333;
	background: -moz-linear-gradient(top, #333333, #000000);
	background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#000000));
	border:1px solid #000000;
	-moz-border-radius: 300px/300px/200px/200px;
	-webkit-border-radius: 300px 300px 200px 200px;
	border-radius: 300px/300px/200px/200px;
}
#css3mickey .face_bottom{
	position:absolute;
	left:-4px;
	top:210px;
	width:382px;
	height:170px;
	background-color:#fedfb3;
	border:3px solid #000000;
	-moz-border-radius:	50px 50px 180px 180px	/30px 30px 130px 130px;
	-webkit-border-radius:	50px 50px 180px 180px	/30px 30px 130px 130px;
	border-radius:		50px 50px 180px 180px	/30px 30px 130px 130px;
}
#css3mickey .face_left{
	float:left;
	width:170px;
	height:240px;
	margin:22px 0 0 34px;
	background-color:#fedfb3;
	-moz-border-radius: 	120px 60px 0px 40px	/160px 60px 0px 100px;
	-webkit-border-radius: 	120px 60px 0px 40px	/160px 60px 0px 100px;
	border-radius: 		120px 60px 0px 40px	/160px 60px 0px 100px;
	transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);
}
#css3mickey .face_right{
	float:left;
	width:170px;
	height:240px;
	margin:22px 0 34px -32px;
	background-color:#fedfb3;
	-moz-border-radius: 	60px 120px 40px 0px	/60px 160px 100px 0px;
	-webkit-border-radius: 	60px 120px 40px 0px	/60px 160px 100px 0px;
	border-radius: 		60px 120px 40px 0px	/60px 160px 100px 0px;
	transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
}

#css3mickey .eye_left{
	position:absolute;
	left:105px;
	top:70px;
	width:70px;
	height:150px;
	background-color:#ffffff;
	background: -moz-linear-gradient(top, #ffffff, #f0f0f0);
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f0f0f0));
	border:3px solid #000000;
	-moz-border-radius: 30px
	-webkit-border-radius: 30px;
	border-radius: 30px;
	-moz-border-radius:	35px 35px 35px 35px	/75px 75px 75px 75px;
	-webkit-border-radius:	35px 35px 35px 35px	/75px 75px 75px 75px;
	border-radius:		35px 35px 35px 35px	/75px 75px 75px 75px;
	transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
}
#css3mickey .eye_right{
	position:absolute;
	left:193px;
	top:70px;
	width:70px;
	height:150px;
	background-color:#ffffff;
	background: -moz-linear-gradient(top, #ffffff, #f0f0f0);
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f0f0f0));
	border:3px solid #000000;
	-moz-border-radius:	35px 35px 35px 35px	/75px 75px 75px 75px;
	-webkit-border-radius:	35px 35px 35px 35px	/75px 75px 75px 75px;
	border-radius:		35px 35px 35px 35px	/75px 75px 75px 75px;
	transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-webkit-transform: rotate(3deg);
}
#css3mickey .blackeye_left{
	position:absolute;
	left:23px;
	top:78px;
	width:38px;
	height:60px;
	background-color:#333333;
	background: -moz-linear-gradient(top, #333333, #000000);
	background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#000000));
	border:3px solid #000000;
	-moz-border-radius: 30px
	-webkit-border-radius: 30px;
	border-radius: 30px;
	-moz-border-radius:	20px 20px 20px 20px	/30px 30px 30px 30px;
	-webkit-border-radius:	20px 20px 20px 20px	/30px 30px 30px 30px;
	border-radius:		20px 20px 20px 20px	/30px 30px 30px 30px;
	transform: rotate(-1deg);
	-moz-transform: rotate(-1deg);
	-webkit-transform: rotate(-1deg);
}
#css3mickey .blackeye_right{
	position:absolute;
	left:3px;
	top:78px;
	width:38px;
	height:60px;
	background-color:#333333;
	background: -moz-linear-gradient(top, #333333, #000000);
	background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#000000));
	border:3px solid #000000;
	-moz-border-radius: 30px
	-webkit-border-radius: 30px;
	border-radius: 30px;
	-moz-border-radius:	20px 20px 20px 20px	/30px 30px 30px 30px;
	-webkit-border-radius:	20px 20px 20px 20px	/30px 30px 30px 30px;
	border-radius:		20px 20px 20px 20px	/30px 30px 30px 30px;
	transform: rotate(-1deg);
	-moz-transform: rotate(-1deg);
	-webkit-transform: rotate(-1deg);
}
#css3mickey .mouth_top{
	position:absolute;
	left:34px;
	top:240px;
	width:300px;
	height:80px;
	background-color:#fedfb3;
	border:3px solid #000000;
	border-width: 0 0 3px 0;
	-moz-border-radius:	0 0 150px 150px	/0 0 80px 80px;
	-webkit-border-radius:  0 0 150px 150px	/0 0 80px 80px;
	border-radius:		0 0 150px 150px	/0 0 80px 80px;
}
#css3mickey .mouth_in{
	position:absolute;
	left:96px;
	top:260px;
	width:180px;
	height:120px;
	margin:0 auto;
	background-color:#d60103;
	background: -moz-linear-gradient(top, #000000,  
		#000000 60%,
		#d60103 70%,
		#d60103);
	background: -webkit-gradient(linear, left top, left bottom, from(#000000),  
		color-stop(0.6, #000000),  
		color-stop(0.7, #d60103),  
		to(#d60103));
	border:3px solid #000000;
	-moz-border-radius:	0 0 90px 90px	/0 0 120px 120px;
	-webkit-border-radius:  0 0 90px 90px	/0 0 120px 120px;
	border-radius:		0 0 90px 90px	/0 0 120px 120px;
}
#css3mickey .mouth_bottom{
	position:absolute;
	left:90px;
	top:264px;
	width:200px;
	height:140px;
	margin:0 auto;
	background-color:#fedfb3;
	border-bottom:3px solid #000000;
	-moz-border-radius:	0 0 100px 100px	/0 0 120px 120px;
	-webkit-border-radius:  0 0 100px 100px	/0 0 120px 120px;
	border-radius:		0 0 100px 100px	/0 0 120px 120px;
}
#css3mickey .mouth_left{
	position:absolute;
	left:-10px;
	width:30px;
	height:10px;
	border:3px solid #000000;
	border-width: 3px 0 0 0;
	-moz-border-radius:	15px 15px 0 0	/5px 5px 0 0;
	-webkit-border-radius:  15px 15px 0 0	/5px 5px 0 0;
	border-radius:		15px 15px 0 0	/5px 5px 0 0;
	transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-webkit-transform: rotate(-30deg);
}
#css3mickey .mouth_right{
	position:absolute;
	left:280px;
	width:30px;
	height:10px;
	border:3px solid #000000;
	border-width: 3px 0 0 0;
	-moz-border-radius:	15px 15px 0 0	/5px 5px 0 0;
	-webkit-border-radius:  15px 15px 0 0	/5px 5px 0 0;
	border-radius:		15px 15px 0 0	/5px 5px 0 0;
	transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
}

#css3mickey .nose_bottom{
	position:absolute;
	left:90px;
	top:200px;
	width:200px;
	height:80px;
	background-color:#fedfb3;
	border-top:3px solid #000000;
	-moz-border-radius:	100px 100px 0 0	/80px 80px 0 0;
	-webkit-border-radius:  100px 100px 0 0	/80px 80px 0 0;
	border-radius:		100px 100px 0 0	/80px 80px 0 0;
}
#css3mickey .nose{
	position:absolute;
	left:42px;
	top:6px;
	width:108px;
	height:70px;
	background-color:#333333;
	background: -moz-linear-gradient(left top, #333333, #000000);
	background: -webkit-gradient(linear, left top, right bottom, from(#333333), to(#000000));
	border:3px solid #000000;
	-moz-border-radius:	54px 54px 54px 54px	/35px 35px 35px 35px;
	-webkit-border-radius:  54px 54px 54px 54px	/35px 35px 35px 35px;
	border-radius:		54px 54px 54px 54px	/35px 35px 35px 35px;
}

関連する記事

toTop bottomMenu