イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。

数カ月前に@suzukisan__が投稿された「Illustrator Unlimited Appearance - suzuki | JAYPEG」は、Illustratorのアピアランスを駆使して、1つのオブジェクトからカメラのアイコンを作るという、面白い試みをされていました。
アピアランスの可能性を示す、インパクトのある内容であったため、記憶に残っている方もいることでしょう。

このアイコンが投稿されてから時間がたっていますが、HTMLとCSSに分解されるイメージが自然に湧いてきたので、少しばかりのHTMLとCSSでアイコンを模写してみました。

HTML と CSS で作ったカメラアイコン

模写したカメラアイコンは、Internet Explorer 10以上 や、最新のChrome, Firefoxなどであれば表示されるはずです。

こちらがHTMLとCSSで書いたものになります。
ソースを見るまでが、ネタです。


画像のキャプチャーは、IE10

カメラアイコンの簡単な解説

HTML

イラレの「1つのオブジェクト」を、HTMLに置き換える時に、少し趣向を凝らしてみました。
やっていることは「1つのdiv」と変わらないので、これ系の遊びをしている方々は、すぐに実践できるでしょう。

HTMLはライトな感じに仕上げていますが、The W3C Markup Validation Serviceに投げても、一応通ります。

CSS

CSSが分解されたイメージは浮かんでいたものの面倒臭かったので、楽をするために疑似要素(::before, ::after)を使っています。

技術的には疑似要素を使わなくても、アイコンの再現が可能です。
@suzukisan__ が行っているような、本当の「1つのオブジェクト」を目指すのであれば、Gradients と Multipe Backgrounds を使用して、カオスな感じにすることをおすすめします。

なお、Gradientsの構文は、2012年4月17日付の CSS Image Values and Replaced Content Module Level 3の仕様だけを記述しており、ベンダープレフィックスも外しています。

早くベンダープレフィックスのない世界が来てほしいですね。