[CSS] Stylesheets – CSSに関するリソースまとめサイト
スタイルシートに関するリソースを紹介するサイト。Tipsやスニペット、CSSフレームワークなどが紹介されています。サイト内検索やソートを使ってリソースを探す事もできます。紹介されてるサイトそのものが趣味の良いものが多いので、ネタ帳としても使えそうです。リソース集めや、日々の情報収集に役立ちそうなサイト。
Tag Archives: CSS
[CSS] Flexy Boxes – Flexboxのコードジェネレーター
Flexbox使ってますか？ 俺はほとんど使った事がありません！ けどこのジェネレーター触ってみて使ってみようって気になりました。Flexbox便利なんですが、今までのfloat使ったレイアウトと全然違うのでとっかかりが難しい部分があると思うのです。あと対応ブラウザも選びますし。このジェネレーター使うと対応ブラウザはどうしようもないにしても、コード記述の敷居はグっと下がる気がします。ボックスの数、順番、並べ方等を数値入力したりプルダウンから選ぶだけで、リアルタイムにCSSコードを生成してくれます。いやこれ便利ですね。レスポンシブレイアウトのサイトコーディングする時なんかに使えそうです。
[Web Design] Vegas Background SlideShow – 美しい背景スライドショーのjQueryプラグイン
ページ背景でスライドショーを行うためのjQueryプラグイン。Bodyとか大きめDivに背景指定する事を目的としたものです。表示エリアが大きい場合、背景に指定する画像サイズを大きくする事が多いけど、その場合サイトロードの際のファイルサイズが大きくなってしまいます。そこで使われるのがオーバーレイ用の透過PNG。背景画像の上にドットとかストライプの透過画像が乗ると、なぜか画像の粗さがごまかされるんですね。プラグイン一式をダウンロードすると、ソレ用の透過画像も数種類含まれています。また可変エリア内で動画再生を行う時にもこの手法はよく使われますが、これらの透過画像はそうした目的への応用もできそうです。トランジションの種類も多く、使い勝手良さそうです。
[CSS3] AniCollection – CSSを使ったアニメーションのコードスニペット紹介サイト
CSS3を使った様々なアニメーションのコードスニペットを紹介するサイト。サイト内の角丸四角にマウスオーバーするとアニメーションをプレビューでき、目玉のアイコンをクリックでコードを見る事ができます。また「＋」マークを使って複数のアニメーションを選択する事で、アニメーションのコードをまとめて生成する事もできます。アニメーション関連のCSSフレームワークとしても使えますね。
[Web Design] CodeMyUI.com – Web制作に便利なコードスニペットを集めたサイト
Webデザインで使える様々なコードスニペットを集めたサイト。チェックボックス装飾やModalウィンドウ、マウスオーバーアニメーション、イメージスライダー、グリッドレイアウト、CSSボタン、イメージギャラリーなど、色々な場面で使えるコードが紹介されています。各作例はアニメーションGifを使って一覧されているので、動きの確認まで確認できる点がとってもナイスです。
[Generator] Instant Sprite – CSS Sprite Generator – CSSスプライトコードと画像のジェネレーター
CSSスプライトのコードと画像のジェネレーター。複数の画像ファイルをサイト内に放り込むだけで、それらを1つの画像ファイルに結合して、かつCSSスプライトのいわゆる座標コードをまとめて吐き出してくれます。1つの画像ファイルをマッピングしてコード生成するジェネレーターはいくつかあるけど、複数の画像を結合するタイプのものは珍しい気がします。個別に画像が保存されたサイトにおいて、ロード時間のスピードアップなどを目的にCSSスプライト化する際などに便利そうです。
[CSS] CSS conic-gradient() polyfill – CSSで描画する円錐グラデーション
CSSで円錐グラデを描画する方法についての解説。conic-gradientって聞いた事ないなーと思っていくつかのブラウザで確認してみたら、FirefoxとChromeはOK、Safariでは描画できませんでした。これ使えば例えばこんな描画なんかもCSSだけでできるようです。工夫次第では円グラフや放射線なんかも描けるみたい。
[Web Design] Tools for Structuring & Optimizing Your CSS Code – CSSを最適化できるオンラインツール
CSSコードを最適化できるオンラインツールを集めた記事。最適化と言うても実際には色々ありまして、コードフォーマットを適用するもの、余計な空白やインデント、改行などを消してコードサイズを抑えるもの、重複指定などを1つにまとめて圧縮するものなど色々揃っております。また1度圧縮されたコードを、再度読みやすいコードフォーマットが適用された形に戻すものなんかもあります。汚いCSSコードを書いてしまった時の懺悔にも使えるかもしれません。