『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
先日書いたCSS小ネタまとめのようにCSS3も使えば使うほど味が出て、応用次第で色んなことできて楽しいですよね。私も大好きです、CSS3。 IE非対応云々のためハックがどーこーとかめんどくさいことはありますけど。 というわけでここらで初心者からパワーユーザーまでぜひおさえておきたいチートシートページやリファレンスサイトをまとめておきますので参考にどうぞ。 CSS3の困った/アレが知りたい、はここで調べよう 筆者選で7つほど。他にもいろいろあるんですが、読みやすいのメインに挙げてみました。 1.E BISUCOM TECH LAB : CSS3プロパティ&ブラウザ対応一覧 恐ろしくまとまり過ぎているページ。もともと書籍の巻末付録だったものをWebで公開しているらしいです。各プロパティの対応ブラウザが一目でわかるのがありがたい。 ベンダープレフィックスの要・不要とかまで書いてます。時々更新され
css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。 css3のtransitionプロパティは変化を与えるプロパティです。アニメーションを実装できるプロパティはtransitionとanimetionがあり、後者のほうが「アニメーション」としての位置付けっぽいのですが、今回は何となくtransitionを使用しました。 プロパティ:-webkit-transition 対応ブラウザ:webkit系(GoogleChrome、Safari等) JavaScript:未使用 (※ソース閲覧の部分はjsを使っています) 一応アニメーション以外(角丸など)は-mozも入れています。 サンプルなので「-webkit-transition: *s ease-
How to create a kick-ass CSS3 progress bar - CatsWhoCode.com イカしたデザインのプログレスバーをCSS3で作成する例 次のようなデザインのプログレスバーをCSS3とJSを使って実装する例です。 バーの背景がアニメーションする上に進捗によって滑らかにアニメーションしてくれます。 そのまま応用して使うことも出来ますし、解説を見て勉強することも出来ます。 CSS3なブラウザで動きを見てみましょう。 実装ページ 関連エントリ CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 IE6-8でもCSS3が使えるようになる「CSS3 PIE」 便利なCSS3ツール6つ+α CSS3のジェネレーター14種
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く