2014年5月17日に発売された Web Designing 6月号（vol.155）の特集1、『エモーショナルなCSS表現』の執筆に参加させていただきました。
私は、transitionやtransformプロパティを使ったホバーアクション系を2つと、maskプロパティを使ったサンプルについて書いています。
他にも各著者さんのCSSで表現するかわいいアイデアが満載ですので、是非お手にとってみてください！
気持ちを伝えるCSS…
今回、特集のコンセプトが「気持ちが伝わるエモーショナルな表現」ということで、頭を悩ませながらも楽しんでサンプル作りをさせていただきました。
今はCSS3やWebフォントで多彩な表現が可能となり、よりWebらしいデザインを作りやすい環境になってきたのではないでしょうか。こうした中、技術にアイデアを掛けあわせて、効果的なデザインをする力が求められているように感じます。
ということで、この特集がそんなアイデアのヒントになったら嬉しいです。
ついでにブログもリデザインしました
このブログも前々からデザインを変えたいと思いつつ、なかなか手を付けられないでいたのですが、これを機に「えいっ！」と作り替えてみました（IE8以下は非対応）。
先日、とある案件でボツになった配色がコレ（グレー + #F9344C）なんですが、個人的に気に入っていたのでここに採用しました（笑）。
英字のフォントはGoogle Fontsで「Open Sans」を採用。サイトタイトルやナビゲーション部分は、letter-spacingで文字の間隔をあけています。
アイコンフォントは「Font Awesome」、レスポンシブなアコーディオンメニューには「MeanMenu」を使っています。いやー、便利な世の中ですねぇ。
細かいところは酷いので…追々修正してまいります。
2014.5.20 追記
このブログで使用しているWebフォントについて、こもりさんから、Google FontsよりBrickを使ったほうが綺麗に見えると教えていただいて変更しました！ありがとうございますー。
OpenSansとかならGoogle Font経由じゃなく、こっち使うとより綺麗に見える。 Brick. Webfonts that actually look good. – http://t.co/33I0dXLzgx
— komori, masaaki (@cipher) 2014, 5月 19
