Scriptを使わないCSSエフェクト、Tipsいろいろ

Scriptが使えないブログを利用されている方や、これ以上Scriptを増やしたくない。 でも、いろいろ挑戦してみたい。って方には、便利かもしれません。 以前『ちょっと便利なCSS Tips いろいろ』で、既にご紹介したものもありますが… 今回は、Scriptを使わないCSSエフェクトやTipsをいろいろとまとめてみました。 Scriptを使わなくても、結構いろいろ出来てしまうんですね。

Pure CSS Animated Progress Bar

アニメーションGIFとCSSを使って作るプログレスバーです。とってもきれいですね。

Pure CSS Animated Progress Bar

add a loading icon to your larger images

大きな画像を読み込む前に、背景にローディングの画像を配置しておくTipsです。

How to Create Flick Animations with CSS

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

How to Create Flick Animations with CSS

CSS Image Maps

CSSを使って、イメージマップが作れます。

CSS Image Maps

Resizing Thumbnails Using Overflow Property

サムネイル画像にマウスオーバーすると、画像が大きく表示されます。

Resizing Thumbnails Using Overflow Property

Pure CSS LightBox

Scriptを使わないLightboxです。

Pure CSS LightBox

CSS-Only Accordion Effect: Vertical Accordian

CSSだけでアコーディオンのエフェクトが作れます。

lixlpixel CSS tooltips

マウスオーバーするとツールチップが表示されます。

lixlpixel CSS tooltips

Create a Lightbox effect only with CSS – no javascript needed

こちらもLightboxエフェクト。テキストなどもポップアップさせることが出来ます。

Create a Lightbox effect only with CSS - no javascript needed

CSS-only Drop-down Menus

ドロップダウンメニューもCSSだけで。

Menus – Multi-Level CSS Only

CSSplayはとっても有名ですね。。

Menus - Multi-Level CSS Only

Pure Css Data Chart

グラフも作れます。

Pure Css Data Chart

http://applestooranges.com/blog/post/css-for-bar-graphs/

こちらもバーグラフ。

Vertical scrolling tables

ヘッダー部分を固定して、データ部分をスクロールさせる事が出来ます。

Vertical scrolling tables

footerStickAlt

Footerをページの最下部に固定させる方法。

footerStickAlt

CSS sticky footer

こちらもFooterをページの最下部に固定させる方法。

CSS sticky footer

CSS Gradient Text Effect

テキストに、透過PNGをかぶせて、光沢のあるテキストエフェクトを。

関連記事

13件のコメント

  1. お世話になっております。
    How to Create Flick Animations with CSSの
    リンクが下のCSS Image Mapsとかぶってしまっているようです。

  2. はじめまして、もう1年以上前から 欠かさず読ませていただいています。NZで細々とWeb Designerをやっているものです。
    いつも参考になることばかりで、Design Walkerさんのおかげで だいぶ腕が上がりました。
    といってもまだまだですが・・・
    PhotoshopやIllustratorも こちらで紹介していただいたチュートリアルで勉強しています。
    まずはお礼まで
    応援しております。

  3. ピンバック: Webnist Blog
  4. ピンバック: websocial.jp
  5. ピンバック: Webtech Walker

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です