– R2-D2 - cssのみで「R2-D2」アイコンを描いてみた

R2D2 その他

cssのみで「R2-D2」アイコンを作成してみました。
自分の絵心の無さにビックリしています。ご了承ください。
ず~~~っと、「アストロドロイド」だと思っていたら、「アストロメク・ドロイド」だそうです。
「メク」って付くのしりませんでした。
「R2-D2」といったら相棒の「C-3PO」ですが、こちらも自分の絵心の無さからかなり難航しております。
なかなかひどい状況です・・・
もう少しまともになったらUPしようと思いますが、まだまだかかりそうです。

ソース

html

<div id="r2-d2">
 <div id="r2-d2_lens"></div>
 <div id="r2-d2_lens2"></div>
 <div id="r2-d2_lens3"></div>
</div>

css

/* 頭背景 */
#r2-d2 {
	font-size: 100px;
	position: relative;
	margin: 0.4em auto;
	width: 1.4em;
	height: 0.8em;
	background-color: #ddd;
	border-radius: 1.8em 1.8em 0 0;
	overflow: hidden;
}
#r2-d2::before {
	position: absolute;
	content: "";
	top: -0.35em;
	left: 0.3em;
	width: 0.8em;
	height: 0.5em;
	background-color: #3959a4;
	border-radius: 100%;
}
#r2-d2::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0.675em;
	width: 0.05em;
	height: 0.2em;
	background-color: #ddd;
}
/* レンズ */
#r2-d2_lens {
	position: absolute;
	top: 0.2em;
	left: 0.45em;
	width: 0.5em;
	height: 0.4em;
	background-color: #3959a4;
	border-radius: 0.1em;
	z-index: 1;
}
#r2-d2_lens::before {
	position: absolute;
	content: "";
	top: 0.05em;
	left: 0.1em;
	width: 0.3em;
	height: 0.3em;
	background-color: #333;
	border-radius: 100%;
}
/* レンズ2 */
#r2-d2_lens2 {
	position: absolute;
	top: 0.65em;
	left: 0.65em;
	width: 0.25em;
	height: 0.15em;
	background-color: #3959a4;
	z-index: 1;
}
#r2-d2_lens2::before {
	position: absolute;
	content: "";
	top: 0.025em;
	left: 0.075em;
	width: 0.1em;
	height: 0.1em;
	background-color: #f00;
	border-radius: 100%;
}
#r2-d2_lens2::after {
	position: absolute;
	content: "";
	top: 0;
	left: -0.15em;
	width: 0.1em;
	height: 0.15em;
	background-color: #3959a4;
}
/* レンズ3 */
#r2-d2_lens3 {
	position: absolute;
	top: 0.65em;
	left: 0em;
	width: 0.2em;
	height: 0.15em;
	background-color: #3959a4;
	box-shadow: 0.25em 0 0 0 #3959a4, 1.2em 0 0 0 #3959a4;
	z-index: 1;
}
#r2-d2_lens3::before {
	position: absolute;
	content: "";
	top: -0.05em;
	left: 0.95em;
	width: 0.2em;
	height: 0.2em;
	background-color: #999;
	border-radius: 100%;
}