kojika17イラレのアピアランスで作れたアイコンが凄かったので、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の仕様だけを記述しており、ベンダープレフィックスも外しています。
早くベンダープレフィックスのない世界が来てほしいですね。