[CSS] Animate.css – アニメーション定義をまとめたCSS
アニメーションの定義をまとめたCSSフレームワーク。サイト内にあるボタンを押すと、それぞれボタン名に書いてある通りの動きをします。バウンドしたりスウィングしたりします。ソースコードのダウンロードはGitHubから。まとめてダウンロードして中身を見ると、ひとつの動きがひとつのCSSファイルにまとめられているのが分かります。これなら必要な動きだけを導入するのも簡単ですな。
Tag Archives: CSS
[CSS3] Sassy Buttons – 使い勝手の良さそうなCSSボタン
画像を使わずにデザインされたCSSボタン。ソースコードのダウンロードはこちらから。5つのシェイプのボタンが用意され、簡単なclass指定で色とか変えられるっぽいです。サイト内で簡単な使い方と、あと突っ込んだ使い方の説明がされてるので、導入後のカスタマイズもサクっとできそうです。しかしこのサイト、ロゴから何からほとんどテキストで作ってますな。うーん渋い。
[CSS3] Creating iOS 7 effects with CSS3: translucency and transparency – CSSで描画するiOS 7コントロールセンターのブラー
CSS3を使って、iOS 7コントロールセンターのブラー（ぼかし）を描画する方法。動作デモはこちら。ページ下部にある「Up」「Down」のボタン押下でコントロールセンター部分を出し入れできます。CSS記述を見ると、半透明のレイヤーを1枚かぶせて、CSS3のブラーフィルタを使っているようです。これ色々と応用できそうですね。ちなみにわたくし家に余ってたiPhone 4にiOS 7 Beta2入れてみたんですが、iPhone 4だとブラーエフェクトが省かれていて(´・ω・｀)ｼｮﾎﾞｰﾝとなりました。あと3D壁紙も動作対象外？ まぁまだBetaだから本命のiPhone 5に入れるのもアレなんで、製品版まで待ちますかね。
Creating iOS 7 effects with CSS3: translucency and transparency
[CSS3] Caption Hover Effects – キャプション付き画像のクールなホバーエフェクト
キャプション付き画像にマウスオーバーした時のクールなエフェクト。7パターン紹介されてますがどれもアニメーションを使ったクールなエフェクトです。ソースコードを見るとfigureタグという見慣れないタグがあったりするので、既存コンテンツのaタグにサクっと:hover書いて・・・みたいな簡単実装は無理かもしれませんが、けどそれほど敷居も高くはなさそう。それにしてもCodropsの作例っていつもレベル高いなぁとか思いました。
[CSS] 50 Useful CSS Snippets Every Designer Should Have – 使えるCSSスニペット50個まとめ
Webデザイナーのための使えるCSSスニペットを50個まとめた記事。これイイですね。CSSリセット、Clearfixといったよく使われるものから、Blockquoteのテンプレート、メディアクエリ、フォントスタック、ロゴからh1テキストを消す方法、サムネール画像の縁取り、フルスクリーン背景、CSS3描画のグラデテンプレート、Box Shadowのテンプレート、IE6用の透過PNG対策、見出し装飾のテンプレート、CSS3を使ったノイズ描画など色々あります。普段使うCSSフレームワークに好みの物を追記しておくと、作業効率上がりそうです。
[CSS3] Convert Photoshop Drop Shadows to CSS3 Box & Text Shadows – フォトショップのドロップシャドウ指定を入力すると、CSS3での指定に変換してくれるサイト
Photoshopのレイヤースタイル内で指定したドロップシャドウの値を入力すると、CSS3での指定に変換してくれるサイト。数値は手入力なので手間といえば手間ですが、PSDでデザインしたものと同じプロパティ指定に正確に変換してくれるのは便利です。全く同じ影を描画したいんダ！という神経質なデザイナー・コーダー向きかもしれません。自分はそのへんいいかげんな正確なのでだいたいオッケーならオールオッケーという感じで、いつものらりくらりとやっておりますが。
[CSS] CSS Modal – CSSだけで行うModal
Javascritを使わずに、CSSだけでModal表示を行うというもの。ページ中央あたりにデモがあったので早速試してみました。表示内容はテキスト、画像、Embedされたビデオなど一通りイケるようです。Modalスタート時にはトランジションがあり、けど終了時にはありません。CSSだけで実装できるのが楽ですね。JS実装したりカスタムする手間がない分、サクっと導入ができそう。
[Framework] Topcoat – フラットUIのCSSフレームワーク
最近流行りのフラットUIなCSSフレームワーク。PCとMobileの双方に対応できるようです。サイトではPCとMobileそれぞれのパーツ一覧の実動デモがあり、本文、見出し、カラー指定、アイコン、ボタン、パンクズ、ドロップダウン、リンク、トグルスイッチ、フォームパーツ、スライダー、スピナーなどの各種パーツを見る事ができます。一通り揃ってる感じのアレですね。フラットUIにしてはちょっとコッテリ目で、いかにもMetroな感じではなく使いやすそうな印象を受けました。