カテゴリー「css」の10件の投稿

2011年6月13日 (月)

CSS3とjQueryを使った背景画像をアニメーションするボタン

CSS3のアニメーション機能と背景画像を動かせるjQueryプラグインを使ったアニメーションするボタン「Using jQuery for Background Image Animations」の紹介と「Background-Position Animation Plugin」の導入方法を解説します。

アニメーションするボタンのデモページ
Flashを使わなければできなかったようなボタンがCSSとjQueryで出来るようになっていますね。
色々と応用もできそうな感じです。

Background-Position Animation Pluginのデモページ

続きを読む "CSS3とjQueryを使った背景画像をアニメーションするボタン"

| | コメント (0) | トラックバック (0)

2011年3月 7日 (月)

CSSとjQuery利用したスライドショー

スライドショーは色々あるのですが、今回はプラグインを利用せずにcssも利用したスライドショーをご紹介します。

CSSとjQuery利用したスライドショー「Automatic Image Slider w/ CSS & jQuery

デモページ

続きを読む "CSSとjQuery利用したスライドショー"

| | コメント (0) | トラックバック (0)

2011年1月31日 (月)

画像を使用しないで、ボックスの影をcss表現する方法 その2解説

前々回の「画像を使用しないで、ボックスの影を表現する方法 その2」でご紹介しました「CSS drop-shadows without images」設定方法の解説となります。

デモページ

続きを読む "画像を使用しないで、ボックスの影をcss表現する方法 その2解説"

| | コメント (0) | トラックバック (0)

2011年1月17日 (月)

画像を使用しないで、ボックスの影をcss表現する方法 その2

前回のCSS3記事に引き続き、画像を使用しないでボックスに影を表現する方法のご紹介です

Css_shadow_002

デモページ

続きを読む "画像を使用しないで、ボックスの影をcss表現する方法 その2"

| | コメント (0) | トラックバック (0)

2010年12月27日 (月)

画像を使用しないで、ボックスの影をcssで表現する方法

Tommy03
こういった影のついたボックスを、画像を使わずに表現する方法のご紹介です。

デモページ

続きを読む "画像を使用しないで、ボックスの影をcssで表現する方法"

| | コメント (0) | トラックバック (0)

2010年12月13日 (月)

3方向を囲まれた箱をCSS3を利用して記述する方法

Tommy02
図のような箱を記述する際に、どういった方法で記述しているでしょうか?
色々な方法があるかと思いますが、CSS3を利用して記述してみます


続きを読む "3方向を囲まれた箱をCSS3を利用して記述する方法"

| | コメント (0) | トラックバック (0)

2010年11月22日 (月)

CSS3で作る 下からスライドしてくるボックス

今回はカーソルを合わせると下から中身が上がってくるボックスのご紹介です。
デモページ

続きを読む "CSS3で作る 下からスライドしてくるボックス"

| | コメント (0) | トラックバック (0)

2010年11月 8日 (月)

気持ちよくアニメーションするCSS3のナビ

今回は、css3で作られた、カーソルを載せると気持ちよく伸びていくナビゲーションのご紹介です。
デモページはこちらに、なります。

続きを読む "気持ちよくアニメーションするCSS3のナビ"

| | コメント (0) | トラックバック (0)

2010年10月25日 (月)

CSS3での表示を確認するツール

今回はCSS3の各プロパティが一目でわかるツール「CSS3 Generator」のご紹介です。

実際にプレビューを通して、どういった表示になるのか直感的に分かり、ソースコードのコピーをすることもできます。CSS3に慣れないうちはどういうプロパティでどういった表示になるのかが分かりづらいかと思いますので、こういったツールで確認してみるのもいいかもしれませんね。
各ブラウザの対応状況は、ブラウザのアイコンの上にカーソルを合わせると確認できます。

| | コメント (0) | トラックバック (0)

2010年10月 4日 (月)

CSS3とFlashの比較

今回はCSS3に関しての話題です。

FlashとCSS3の比較をしていた記事がありました。
リンク先はCSS3に対応したブラウザでないと動きません。スイマセン・・・。
CSS3 Ads Versus Flash Ads

2つのオブジェクトが並んでいてそれぞれFlashとCSS3で構成されています。
しかしどっちがどっちだか一見しただけでは区別がつかないですね。

Flashで出来る事の一部はCSS3でも出来てしまうのですね。
これは興味をひかれるなぁ。
IE9にもCSS3は実装されますし、スマートフォンの一部ではFlash未対応なので
CSS3対応ブラウザの普及が待ち遠しくなります。

| | コメント (0) | トラックバック (0)