ちょっと便利なCSS Tips いろいろ

本日は、ちょっぴり便利かな~っと思うCSS Tipsをいろいろご紹介。

既に、ご存知のものも多いかもしれませんが・・・

1. Image map for detailed information

FlickrみたいなImageMapが作れます。


Image map for detailed information

2. How to Create Flick Animations with CSS

JavaScriptを使わずに、CSSと画像でアニメーションが作れます。


How to Create Flick Animations with CSS

3. FACE: Faruk’s Animated CSS Enhancements

JavaScript と CSSを使って、とってもきれいなアニメーションが作れます。


FACE: Faruk's Animated CSS Enhancements

4. CSS Gradient Text Effect

コリスさんの記事でも紹介されていた、テキストにグラデーション効果をつけるスタイルシートです。


CSS Gradient Text Effect

5. css: add a loading icon to your larger images

重たい画像を貼り付けるときは、ローディングイメージを背景に設定しておくと便利かも。


css: add a loading icon to your larger images

6. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

Crazy Eggで使われているような、ひとつのカラムを強調したように見せるチュートリアル。


Creating a table with dynamically highlighted columns like Crazy Egg's pricing table

7. How to make sexy buttons with CSS

とってもセクシーなボタンが作れます。


How to make sexy buttons with CSS

8. Checkmark Your Visited Links with Pure CSS

訪問済みリンクにチェックマークがつきます。IE6ではサポートされていませんが・・・


Checkmark Your Visited Links with Pure CSS

9. footerStick

フッターを常にページの最下部にくっつけることができます。


footerStick

10. CSS Dock Menu

jQueryとCSSを使って、MacのDockMenuっぽい効果が出せます。


CSS Dock Menu

11. Create a Lightbox effect only with CSS – no javascript needed

JavaScriptを使わずにLightboxっぽいエフェクトが出せます。


Create a Lightbox effect only with CSS - no javascript needed

気に入ったものがあれば、お試しください~。

デザインblogランキング

コメント 2 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



2 Responses to “ちょっと便利なCSS Tips いろいろ”

  1. VirgoBoy Says:

    CSSとJavaScriptだけでこれだけの事が出来るのはすばらしいですね。勉強材料にします!

  2. Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker Says:

    […] 以前『ちょっと便利なCSS Tips いろいろ』で、既にご紹介したものもありますが… […]

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ