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%;
}

