[CSS] The Star Wars Intro Crawl in Pure CSS – スターウォーズのイントロCSS
Star Warsのあらすじ説明のイントロを再現したCSS。JSとか使わずにCSSだけで再現しているようです。あらすじについてはもちろんテキストで書かれていて、最後に出てくるダウンロードボタンはちゃんとクリックする事ができます。ネタとはいえしっかりと作られててスゲーなぁと思いました。フォースの導きがありそうな作例ですな。
Tag Archives: WebDesign
[Web Design] Resource Cards – デザインに関する様々なリソースをまとめたサイト
デザインに関する様々な情報リソースをカテゴリごとにまとめたサイト。写真やフォント、アイコン、Photoshop、Sketch、色、プロトタイピング、HTML/CSS、Wordpress、SEO、マーケティングなどが紹介されています。これら全てに精通している人というのもそうそういないと思うので、苦手分野の調査やリソース探しの際に重宝しそうです。
[Javascript] Chart.js 2.0 – データから動的にグラフ生成を行うJS
用意したデータから、Web上に動的にグラフ生成を行うJavascript、Chatr.jsの2.0がリリースされていました。2.0になって複数グラフのミックスや、新しいタイプのグラフのサポート、グラフのアニメーションなどが機能追加されたようです。導入やカスタマイズについてはこちらのページから確認することができます。
[Bootstrap] Bootstrap 4 Cheat Sheet – Bootstrap 4のチートシート
先日アルファ版がリリースされたBootstrap4のチートシートが早速公開されてます。様々な機能がカテゴリーごとに分けて紹介されており、classをクリックすると用例のHTMLが表示されます。またHTML内で簡単な説明もされているので、どういう場合に使えば良いのかなんとなく分かります。用意されているclassの勉強する際に使えそうです。
[CSS] Flexbox Patterns – Flexboxを使ったレイアウト作例まとめ
Flexboxを使ったコードスニペットをまとめたサイト。ナビゲーションやタブメニューなどのよく使われるレイアウト作例が、Flexboxを使ってレイアウトされたコードと併せて紹介されています。数はそれほど多くないけど、どれもWebデザインでよく使われるレイアウトなので、コード書く時の素体として使ったりできそうです。Flexboxなら要素数の増減にも柔軟に対応できますしね。
[Generator] Unique gradient generator – 画像からぼかしグラデーションを作成でき、CSSコードを取得できるジェネレーター
画像を極端に拡大する事でぼかし効果のように見せ、それをCSSコードで取得できるというジェネレーター。サイトの背景などに敷くブラーバックグラウンドなんかに使う事を目的としているようです。元となる画像は用意されているものから選ぶ事ができ、また任意の画像をアップロードすることもできます。画像の位置やサンプルするエリアの大きさは右上にあるコントロールパネルから操作でき、またショートカットとして移動に十字キーが、ランダム設定にはRのキーが割り当てられています。気に入った画像ができたらサイト右下にある「Generate CSS」からCSSのグラデーション指定を取得できます。画像部分はBase64でエンコードされているので、別途ファイルが必要になる事もありません。手軽にブラー効果の画像を使いやすい形で取得できるのが便利ですね。
[CSS] imagehover.css – ホバーアクションを多数収録したCSSライブラリー
マウスホバーによるアクションを40種類も収録したCSSライブラリー。サイト内で各Classごとのホバーアクションを確認できます。サイズも19kbと軽く、またLESSやSCSS版も同梱されています。いやこれ便利ですね。早速何かに使おうかなと思っております。
[Freebie] FACEBOOK TIMELINE HACK TEMPLATE – Facebookのカバーとプロフィール画像が一体化したように見えるPSDテンプレート
Facebookでちょっと前に流行った、カバー写真とプロフィール写真とがまるで一体化してるように見えるアレを作れるPSDテンプレート。ダウンロードするとPSDとアクションファイルで構成されていて、PSD内でデザインして同梱のアクションで書き出せば完成という流れ。最近このブログのFacebookページをアップデートしたんですが（タイムラインに新着記事読み込めるようにしたり色々してます）、その際にも使いました。わりとサクっと作れて便利でした。