洋楽好きなら誰でも知ってるというレベルの名盤ジャケを、裏側から見るとどうなっているのかを描いた作品。アルバムやバンドの事を良く知っていれば知っているほど、ところどころニヤっとさせられる仕掛けがあります。例えばRage Against the MachineのEvil Empireは、少年の見ている先にはこの次の作品となるThe Battle of Los Angelesが描かれている最中だったりします。ジャンルも偏ってなく、メタル、オルタナ、クロスオーバー、プログレ等様々なジャンルの名盤がチョイスされてます。ロック野郎にオススメです。
スクロールイベントをきっかけに、アニメーションしながら要素を出現させるという、いわゆるスクロール芸のライブラリー。JSとCSSを導入して、あとはブロック要素にゴニョゴニョ書けば実装できるようです。フェイドやフリップ、ズームなどの各種アニメーションが用意されています。こういうの流行ってるしちょっとやってみたい、的なノリでもサクっと導入できそうでナイスです。
Chromeで表示したWebサイト内のCSS指定を確認できるChrome用機能拡張。Chrome純正のデベロッパーツールに比べて、よりデザイナー寄りのシンプルな作りになってます。例えばサイト全体で指定されているカラーパレット一覧とか。あとクリックした場所に適用されているCSS一覧なんかも出せます。ただしそれがどのCSSファイルの何行目にあるかって所までは掘り下げられないので、コーディングする際にはちょっと役不足かもしんない。コーディングをしないデザイナー向けといった感じでした。
CSSだけで実装できるパララックススクロール。2014年に書かれて15年に追記されたようなのでそれほど新しい記事ではないけれど、こんな手法もあるんやなー思ったので紹介。transform: translateZを使ってZ軸方向にオブジェクトを移動させてパララックススクロールさせているようです。これなら対応ブラウザの条件さえクリアすれば、わりとサクっと導入できそうです。
Webアクセシビリティーに配慮したカラーパレットを生成してくれて、さらに投票もできるサイト。一定のコントラストが確保された、背景色と文字色を出力してくれます。あとパレット生成の度にCSSコードも吐き出してくれます。よくあるカラーパレットオススメツールではあるんだけど、出て来る配色がイイ感じのものが多かったのが個人的にグっときました。ちなみに「a11y」ってなんのこっちゃ、って最初思ったんですが、この言葉って「accessibility」の略語なんですね。「単語なげーから途中の11文字略したわ！」的な流れで出来たそうで。こういう乱暴な略し方嫌いじゃないです。
たまに目にする、コンテンツの境目の背景色を斜めにするデザイン、アレをサクっと導入できるSCSS。導入は簡単で、ダウンロードした「_angled-edges.scss」をメインのSCSSファイルから読み込むだけ。mixinを使って斜めってる角度の調整なんかもできます。斜めになっている部分はSVGで描画されるので、様々な形や色に対応できるようです。境界線を斜めにすると動きを出せるのでイイですね。導入も簡単だし早速何かに使おうと思ってます。
用意されているテンプレートからパーツを組み合わせて顔文字AAを作るジェネレーター。Body, Eyes, Mouthの3つのパーツをプルダウンから選ぶだけ。その際手動で文字の変更もできます。ページ下部には他の人が作ったAAも表示されているので、気に入ったものがあればコピペして使えます。オリジナルの顔文字作りたい時に使えそうです。ちなみに俺は( ´・ω・)と(｀・ω・´)があればだいたい事足りるタイプです。
