[CSS] Balloon.css – CSSだけで動作するバルーンヘルプ
Javascriptを使わず、CSSだけで動作するバルーンヘルプ。コードはGithubで公開されていて、CSSだけなのでサクっと導入する事ができます。なのにわりと多機能で、バルーンを出す方向や、中に入るコンテンツの量次第で自動で大きくなるなど、使い勝手も良さそうです。
Category Archives: Web Design
[Bootstrap] TWBSColor – Bootstrapのnavbarをカスタムできるジェネレーター
Bootstrapのnabber専用のカスタマイザー。背景色や文字色などを個別にカラーピッカーを使って色指定する事ができます。指定した内容はSCSS, SASS, LESS, CSSの形式でリアルタイムに生成されるので、あとはその中から好きなものをコピペして使うだけ。また指定した内容はパーマリンクが常に生成されるので、後になって再修正したい時なんかに便利です。
[CSS] Tasty CSS-animated hamburgers – アニメーションするハンバーガーアイコン
マウスオーバーでアニメーションするハンバーガーアイコンの作例が多数紹介されています。それぞれアニメーションや、マウスオーバー後の形が異なるので、用途によって使い分ける事ができます。導入方法についても詳しく解説されており、class名を変更するだけでアニメーションを変更できるようです。スマホ版のナビゲーション作る時に使えそうです。
[Web Design] Startup Timelines – スタートアップ企業のWebデザインの変遷
世の中に星の数ほどあるWeb系企業が、サイトの立ち上げから今日に至るまでをスクリーンショットで見る事のできるサイト。トップ画面ではアニメーションを使った一覧で見る事ができ、詳細ページに入ると立ち上げから今までの変遷を時系列で見る事ができます。今じゃクールなデザインのサイトも、立ち上げ時はクッソダサかったんだなぁ・・・とか思いながら見ると感慨深いものがあります（それでも当時はそれがクールだったんだけどね）。個人的に特に興味深かったのが今はなきMacromedia。FlashとかDreamweaverを引っさげて、思いっきりAdobeに中指立ててたあの攻撃的な時代のWebサイトを見ると、なんだかWebの世界の移り変わりの速さというか、諸行無常みたいなものを感じます。
[Web Design] Google Design Resizer – レスポンシブレイアウトの動作確認に使えるサイト
レスポンシブにレイアウトされたサイトで、PC、タブレット、スマホそれぞれの解像度で表示した時の確認がまとめて行えるGoogleのサービス。よく使われる3つの異なる種類のデバイスでどのように表示されるのか、1度に確認できるので便利です。画面上部のURL入力欄に確認したいサイトのURLを突っ込むだけで確認が行えます。また画面右上にあるアイコンをクリックする事で、PC or タッチデバイスでのWidth設定を細かく切り替える事もできます。設定したブレイクポイントごとにちゃんと表示がされるかの動作確認に使えそうです。
[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側で行えるようになると、より非破壊加工が進んで素材の汎用性が高まりますな。