[CSS] Tasty CSS-animated hamburgers – アニメーションするハンバーガーアイコン
マウスオーバーでアニメーションするハンバーガーアイコンの作例が多数紹介されています。それぞれアニメーションや、マウスオーバー後の形が異なるので、用途によって使い分ける事ができます。導入方法についても詳しく解説されており、class名を変更するだけでアニメーションを変更できるようです。スマホ版のナビゲーション作る時に使えそうです。
Tag Archives: CSS3
[Web Design] Can I use… – Webの様々な技術を、各ブラウザがサポートしているかどうかをサクっと調べられるサイト
Webの様々な時術を、各ブラウザ（iOSやAndroid端末も含む）がどの程度サポートしているのかをサクっと調べる事のできるサイト。試しに「Flex」と入力すると、Flexboxのサポート状況が表示されました。背景が黒くなっているライン以降のバージョンでサポートされている、という見方です。また国の指定をしておけば、その国においてどの程度サポートブラウザが普及しているかも知ることが出来ます。ちなみにこのサイトで得られる内容は、The (Unofficial) CanIUse Embedを使う事でEmbed出力する事もできます。アンオフィシャルな方法らしいけど、サイト内で引用したい時に使えます。新しめのCSSプロパティを使おうかどうしようか判断する時に便利ですね。
[CSS] CSS triangle generator – CSSだけで描画する三角形のジェネレーター
CSSだけで描画できる三角形のジェネレーター。方向とタイプ（Equilateralは縦横比固定、Isoscelesは高さと幅を個々に指定、Scaleneは3点を個々に指定）、サイズ、色を入力する事でリアルタイムに三角形の形が変わります。その下にCSSが生成されるので、あとはコピペするだけ。サイト内でコード生成されるのはCSSだけなので、あとはこれを適当なボックス要素にClass指定すれば完了です。CSSで描いちゃえば画像使わなくて済むので便利です。
[CSS] color filter.css – CSSブレンドモードを使ったカラーフィルター
CSSブレンドモードを使ったカラーフィルターのプリセット。CSSブレンドモードって、Photoshopとかでやる「乗算」とか「スクリーン」といった描画モードの適用をCSSで行うものなんですが、画像・背景色（ベタ or グラデ）・モードの3つを指定して初めて適用されるものなんですよね。このcolorfilter.cssを読みこめば、すでにいくつかの色指定と描画モードがプリセットされているので、適用が楽になるYO！というもの。カラーフィルター機能だけに絞ったフレームワークとも言えます。Spotifyの「DuoTone」と呼ばれるデザイン手法にインスパイアされて作ったそうです（これかな？）。用意されたプリセット描画モード、どれも趣味がイイので使い勝手が良さそうです。この手の画像加工を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] Bulma: a modern CSS framework based on Flexbox – FlexboxベースのCSSフレームワーク
FlexboxベースのCSSフレームワークだそうです。CSSフレームワークってだいたいFloat使ったグリッドレイアウトのものが多いけど、最近じゃレイアウト組む手法も徐々にFlexboxになりつつあるので、慣れた人には便利そうです。実際Flexboxでレイアウト組むの楽ですからね。レスポンシブレイアウトや、フルスクリーン、垂直軸のセンタリング、ボタンやフォームパーツなども揃っているようです。
[CSS] Hint.css – マウスオーバーで吹き出し状のヒントを表示してくれるCSS
ボタンの上にマウスオーバーした時に、吹き出し状にヒント表示をしてくれるCSSライブラリ。独立した1つのCSSファイルとしてGithubに上がっているので、導入するにはこれをダウンロードしてCSSを読み込むだけ。あとはspanタグか何かにclass指定してヒント内容を記入するだけ。手軽に導入もできそうです。吹き出しを出す方向も上下左右色々選べるので使いやすそうです。