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をかぶせて、光沢のあるテキストエフェクトを。



デザインblogランキング

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

この記事に関連する記事



14 Responses to “Scriptを使わないCSSエフェクト、Tipsいろいろ”

  1. 龍一 Says:

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

  2. 日々、ウェブデザインとネットニュースとゲームとか。 Says:

    実写版「攻殻機動隊」とか。…

  3. 次なるもの » Blog Archive » Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker Says:

    […] original article « YouTubeの動画を高画質なMP4でダウンロードするブックマークレット [JS]かわいい感じに画像を拡大表示するスクリプト -prettyPhoto | コリス » […]

  4. Kay Says:

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

  5. Webnist Blog Says:

    スタイルシートで実装するプルダウンメニュー…

    前回の[CSS]スタイルシートで実装するアコーディオンエフェクト:IE6対応ところ紹介したGoogle コードを利用して、
    DesignWalkerさんで紹介されていました
    Scriptを使わないCSSエフェクト、Tipsい……

  6. Excelentes tutoriales sobre CSS | Punto Geek Says:

    […] del.icio.us encuentro una excelente lista recopilatoria de tutoriales de CSS muy interesantes y que sólo se hacen mediante CSS. En la lista podemos encontrar varios […]

  7. 次なるもの » Blog Archive » Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker Says:

    […] Pure CSS Animated Progress Bar アニメーションGIFとCSSを使… original article « 3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ […]

  8. websocial.jp Says:

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

    できるだけCSSで表現したいので、参考にしたい内容です。…

  9. Webtech Walker Says:

    target疑似クラスを用いて、CSSのみでLightBox風UIを実現する方法…

    DesignWalkerさんのScriptを使わないCSSエフェクト、Tipsいろいろというエントリーの中に、「Scriptを使わないLightbox」というのがありました。本当にCSSのみで実現させていて、すごいなぁと思っ……

  10. jQueryサンプル集 - DesignWalker Says:

    […] 前回は、『Scriptを使わないCSSエフェクト、Tipsいろいろ』をご紹介いたしました。 […]

  11. temizlik şirketleri Says:

    […] 前回は、『Scriptを使わないCSSエフェクト、Tipsいろいろ』をご紹介いたしました。 […]

  12. erken rezervasyon Says:

    Thanks

  13. スタイルシートで実装するプルダウンメニュー | Webnist(うぇぶにすと) Blog Says:

    […] コードを利用して、 DesignWalkerさんで紹介されていました Scriptを使わないCSSエフェクト、Tipsいろいろの中のCSS-only Drop-down MenusをIE6対応で作ってみました。 […]

  14. スタイルシートで実装するプルダウンメニュー | WebnistのCSS Says:

    […] コードを利用して、 DesignWalkerさんで紹介されていました Scriptを使わないCSSエフェクト、Tipsいろいろの中のCSS-only Drop-down MenusをIE6対応で作ってみました。 […]

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




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

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

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ