[CSS] Flexbox Patterns – Flexboxを使ったレイアウト作例まとめ
Flexboxを使ったコードスニペットをまとめたサイト。ナビゲーションやタブメニューなどのよく使われるレイアウト作例が、Flexboxを使ってレイアウトされたコードと併せて紹介されています。数はそれほど多くないけど、どれもWebデザインでよく使われるレイアウトなので、コード書く時の素体として使ったりできそうです。Flexboxなら要素数の増減にも柔軟に対応できますしね。
Tag Archives: Snipet
[CSS] imagehover.css – ホバーアクションを多数収録したCSSライブラリー
マウスホバーによるアクションを40種類も収録したCSSライブラリー。サイト内で各Classごとのホバーアクションを確認できます。サイズも19kbと軽く、またLESSやSCSS版も同梱されています。いやこれ便利ですね。早速何かに使おうかなと思っております。
[CSS] Balloon.css – CSSだけで動作するバルーンヘルプ
Javascriptを使わず、CSSだけで動作するバルーンヘルプ。コードはGithubで公開されていて、CSSだけなのでサクっと導入する事ができます。なのにわりと多機能で、バルーンを出す方向や、中に入るコンテンツの量次第で自動で大きくなるなど、使い勝手も良さそうです。
[CSS] Tasty CSS-animated hamburgers – アニメーションするハンバーガーアイコン
マウスオーバーでアニメーションするハンバーガーアイコンの作例が多数紹介されています。それぞれアニメーションや、マウスオーバー後の形が異なるので、用途によって使い分ける事ができます。導入方法についても詳しく解説されており、class名を変更するだけでアニメーションを変更できるようです。スマホ版のナビゲーション作る時に使えそうです。
[CSS] CSS triangle generator – CSSだけで描画する三角形のジェネレーター
CSSだけで描画できる三角形のジェネレーター。方向とタイプ（Equilateralは縦横比固定、Isoscelesは高さと幅を個々に指定、Scaleneは3点を個々に指定）、サイズ、色を入力する事でリアルタイムに三角形の形が変わります。その下にCSSが生成されるので、あとはコピペするだけ。サイト内でコード生成されるのはCSSだけなので、あとはこれを適当なボックス要素にClass指定すれば完了です。CSSで描いちゃえば画像使わなくて済むので便利です。
[Code Snipet] Star Wars Menu Icon – スターウォーズのライトセーバー風ハンバーガーメニュー
Star Warsのライトセーバー風のハンバーガーメニュー。画像はイメージです。悪ふざけで作りました。ちなみにCodepenはこちら。ハンバーガーメニューがライトセーバーになっているというものです。出てくるメニューがジェダイは緑、シスは赤、サミュエル・Ｌ・ジャクソン（メイス・ウィンドゥ）は専用の紫になっているという点が気が利いていますね。フォースに導かれ気味の素晴らしいナビゲーションだと思います。May the Force be with you。
[CSS] Vertical align anything with just 3 lines of CSS – 垂直方向に要素をセンタリングする3行のCSSコード
ブロック要素を垂直方向にセンタリングするのってアレですよね、メンドくさいですよね。たまにそうレイアウトしなきゃいけない時があるんだけど、「あれどうやるんだっけ・・・？」とか思って毎回ググってます。今回もそんな感じでググってたところ、すごいシンプルな方法を見つけたので備忘録として載っけておきます。センタリングしたいブロック要素にCSS3行書くだけなのでサクっと使えます。ただし親要素にheight指定が必要という点は、他の手法と変わらないので多少の注意は必要です。
[CSS] Creative CSS link hover styles – クールなマウスホバーアクション
CSSだけでデザインされた、クールなマウスホバーアクション。複数のデザインのテキストボタンが紹介されていて、どれもマウスホバーでアニメーションします。このアニメーションがどれもかっこいい。CSSだけで導入できる点もナイスです。ちなみに元記事はこちら。こういうちょっと凝った演出があると、ページそのものが一気にモダンな印象になりますな。使い勝手良さそうです。