Star Warsのライトセーバー風のハンバーガーメニュー。画像はイメージです。悪ふざけで作りました。ちなみにCodepenはこちら。ハンバーガーメニューがライトセーバーになっているというものです。出てくるメニューがジェダイは緑、シスは赤、サミュエル・Ｌ・ジャクソン（メイス・ウィンドゥ）は専用の紫になっているという点が気が利いていますね。フォースに導かれ気味の素晴らしいナビゲーションだと思います。May the Force be with you。
ブロック要素を垂直方向にセンタリングするのってアレですよね、メンドくさいですよね。たまにそうレイアウトしなきゃいけない時があるんだけど、「あれどうやるんだっけ・・・？」とか思って毎回ググってます。今回もそんな感じでググってたところ、すごいシンプルな方法を見つけたので備忘録として載っけておきます。センタリングしたいブロック要素にCSS3行書くだけなのでサクっと使えます。ただし親要素にheight指定が必要という点は、他の手法と変わらないので多少の注意は必要です。
FlexboxベースのCSSフレームワークだそうです。CSSフレームワークってだいたいFloat使ったグリッドレイアウトのものが多いけど、最近じゃレイアウト組む手法も徐々にFlexboxになりつつあるので、慣れた人には便利そうです。実際Flexboxでレイアウト組むの楽ですからね。レスポンシブレイアウトや、フルスクリーン、垂直軸のセンタリング、ボタンやフォームパーツなども揃っているようです。
クールなWebデザイン作例のギャラリーサイト。スクリーンショットを使って紹介されており、一覧から直接対象のサイトに行く事もできます。各作例は場面ごとに整理されているので、「All Patterns」から特定の場面だけを抽出して閲覧する事もできます。コレ系のギャラリーサイトってモバイルUI系が多いけど、久しぶりにWeb系のものを見つけた気がします。サイトデザインのネタ調として使えそうです。
ボタンの上にマウスオーバーした時に、吹き出し状にヒント表示をしてくれるCSSライブラリ。独立した1つのCSSファイルとしてGithubに上がっているので、導入するにはこれをダウンロードしてCSSを読み込むだけ。あとはspanタグか何かにclass指定してヒント内容を記入するだけ。手軽に導入もできそうです。吹き出しを出す方向も上下左右色々選べるので使いやすそうです。
CSSだけでデザインされた、クールなマウスホバーアクション。複数のデザインのテキストボタンが紹介されていて、どれもマウスホバーでアニメーションします。このアニメーションがどれもかっこいい。CSSだけで導入できる点もナイスです。ちなみに元記事はこちら。こういうちょっと凝った演出があると、ページそのものが一気にモダンな印象になりますな。使い勝手良さそうです。
水平方向に並んだ複数要素のHeight（高さ）を揃えてくれるjQueryプラグイン。こちらでデモを確認することができます。ソースダウンロードして挙動を確認してみたんですが、横方向に同じ位置にある要素の内、最も大きいHeightを参照しているようです。かゆところに手が届くとはまさにこの事で、たまーにこうしたいって時あるんですよね。レスポンシブレイアウトにも対応しているようで、使い勝手が良さそうです。
Webサービスのユーザープロフィール画面などに使える、ダミー用のユーザーアイコン一式がJsonファイル形式で配布されています。サイト見ると分かるんですが、80年代〜90年代のアメリカ映画、ドラマの登場人物ばかりで、かなりこう、趣味的に偏った内容でダミーアイコン一式を揃える事ができます。グーニーズやスターウォーズ、ビバリーヒルズ青春白書、ロボコップなど、おっさん世代が懐かしむキャラクターばかりです。センスの良いおっさんプログラマーの方にオヌヌメです。
