[CSS] loaders.css – CSSで描画されたローディングアニメーション
画像を使わずにCSSだけで描画されたローディングアニメーション。デモページはこちら。アニメーション部分の色の変更がカスタマイズできるようです。ファイルサイズが軽いので使い勝手が良さそうです。
[Color Palette] ColorFavs – 画像からカラーパレットを生成してくれるサイト
写真などの画像ファイルからカラーパレットを生成してくれるサイト。使い方は簡単で、サイト内の点線エリア内に画像ファイルを放り込むだけ。少しだけ待たされた後、パレットを生成してくれます。パレットの色数なんかは全部自動のようです。Webサイトのスクリーンショット放り込んでパレット抽出したりするのにイイですねこれ。
[Music] Album of the Year 2015 – 2015年に聴いたアルバムベスト12
さぁやってまいりました、今年・・・いやもう去年か。10枚ちょい選んでみました。歳のせいかめっきりメタルを聴かなくなったなぁというのが個人的な印象。以前は好んで聴いてたゴシック・ドゥーム系は全く聴かなくなり、ストーナーロックも聴く回数が減った気がします。なんとなくめんどくさい音楽を好んで聴くようになった、そんな2015年でした。
[Freebie] Rad Faces – プロトタイプ制作に使える80〜90年台趣味のアバターアイコン
Webサービスのユーザープロフィール画面などに使える、ダミー用のユーザーアイコン一式がJsonファイル形式で配布されています。サイト見ると分かるんですが、80年代〜90年代のアメリカ映画、ドラマの登場人物ばかりで、かなりこう、趣味的に偏った内容でダミーアイコン一式を揃える事ができます。グーニーズやスターウォーズ、ビバリーヒルズ青春白書、ロボコップなど、おっさん世代が懐かしむキャラクターばかりです。センスの良いおっさんプログラマーの方にオヌヌメです。
[Javascript] ScrollReveal – スクロールする事でボックス要素がロードされるJS
ページをスクロールしてボックス要素が見え始める頃に、フェードインしながらロードされるアニメーションを実装できるJS。ページをスクロールすると見え始めたボックス要素から順次表示されていくのが分かります。これ系のスクリプトの多くは初回ロード時にしか対応していないんだけど、このScrollRevealの場合はページを上にスクロールして戻った際にも同様のエフェクトを行ってくれます。実装も簡単そうだし、ロードアニメーションとしては使いやすそうです。
[CSS] The Simplest Way To Center Elements Vertically And Horizontally – Flexboxを使った、縦横軸でのセンタリング
Flexboxを使った、ボックス内においてボックス要素を縦軸・横軸ともにセンタリング（中央揃え）したい時のシンプルなコードサンプルが紹介されてます。Flexboxがなかった頃のように、heightの半分の数値をアレコレして・・・という面倒な記述しなくても良くなったのは楽ですな。まぁそういう意味じゃTipsでも何でもなく、普通の記述ではあるんだけど。justify-content:centerで水平方向に、align-items:centerで垂直方向にセンタリングすればイイだけなので超ラクチンです。
The Simplest Way To Center Elements Vertically And Horizontally
[Freebie] FREE Apple TV Mockups – Apple TVのベクターモックアップ
新型Apple TVのモックアップが配布されています。ダウンロードすると.ai、.psd両方の素材が同梱されているので、PhotoshopでもIllustratorでも扱えます。様々な角度のTVの画像と、Apple TV本体やRemoteの筐体画像がベクター画像として用意されているので、Apple TV対応アプリのWebサイト作る時なんかに使えそうです。
[Web Design] Responsinator – レスポンシブレイアウトの結果をまとめて確認できるサイト
レスポンシブレイアウトしたサイトの挙動を、様々な端末でまとめて確認できる便利なサイト。画面最上部にある「Enter your site」に確認したいサイトURLを入力すれば、iPhoneやAndroid、iPadなどのタブレット端末の解像度で一気にレンダーしてくれます。縦持ち時だけでなく横持ちの際にどう表示されるかも確認できるのが便利。このサイト使って一気に確認すれば、物理的に端末持ち替えて確認するよりかなり手間が省けそうです。