Scriptを使わないCSSエフェクト、Tipsいろいろ
Scriptが使えないブログを利用されている方や、これ以上Scriptを増やしたくない。
でも、いろいろ挑戦してみたい。って方には、便利かもしれません。
以前『ちょっと便利なCSS Tips いろいろ』で、既にご紹介したものもありますが…
今回は、Scriptを使わないCSSエフェクトやTipsをいろいろとまとめてみました。
Scriptを使わなくても、結構いろいろ出来てしまうんですね。
Pure CSS Animated Progress Bar
アニメーションGIFとCSSを使って作るプログレスバーです。とってもきれいですね。
add a loading icon to your larger images
大きな画像を読み込む前に、背景にローディングの画像を配置しておくTipsです。
How to Create Flick Animations with CSS
JavaScriptを使わずに、CSSと複数の画像でアニメーションが作れます。
CSS Image Maps
CSSを使って、イメージマップが作れます。
Resizing Thumbnails Using Overflow Property
サムネイル画像にマウスオーバーすると、画像が大きく表示されます。
Pure CSS LightBox
Scriptを使わないLightboxです。
CSS-Only Accordion Effect: Vertical Accordian
CSSだけでアコーディオンのエフェクトが作れます。
lixlpixel CSS tooltips
マウスオーバーするとツールチップが表示されます。
Create a Lightbox effect only with CSS - no javascript needed
こちらもLightboxエフェクト。テキストなどもポップアップさせることが出来ます。
CSS-only Drop-down Menus
ドロップダウンメニューもCSSだけで。
Menus - Multi-Level CSS Only
CSSplayはとっても有名ですね。。
Pure Css Data Chart
グラフも作れます。
http://applestooranges.com/blog/post/css-for-bar-graphs/
こちらもバーグラフ。
Vertical scrolling tables
ヘッダー部分を固定して、データ部分をスクロールさせる事が出来ます。
footerStickAlt
Footerをページの最下部に固定させる方法。
CSS sticky footer
こちらもFooterをページの最下部に固定させる方法。
CSS Gradient Text Effect
テキストに、透過PNGをかぶせて、光沢のあるテキストエフェクトを。
この記事に関連する記事
![Web Designing (ウェブデザイニング) 2008年 07月号 [雑誌]](http://images-jp.amazon.com/images/P/B001APYMOY.09.TZZZZZZZ.jpg)
April 16th, 2008 at 5:22 am
お世話になっております。
How to Create Flick Animations with CSSの
リンクが下のCSS Image Mapsとかぶってしまっているようです。
April 16th, 2008 at 10:24 am
実写版「攻殻機動隊」とか。…
…
April 16th, 2008 at 12:05 pm
[…] original article « YouTubeの動画を高画質なMP4でダウンロードするブックマークレット [JS]かわいい感じに画像を拡大表示するスクリプト -prettyPhoto | コリス » […]
April 17th, 2008 at 1:16 am
はじめまして、もう１年以上前から 欠かさず読ませていただいています。NZで細々とWeb Designerをやっているものです。
いつも参考になることばかりで、Design Walkerさんのおかげで だいぶ腕が上がりました。
といってもまだまだですが・・・
PhotoshopやIllustratorも こちらで紹介していただいたチュートリアルで勉強しています。
まずはお礼まで
応援しております。
April 17th, 2008 at 2:30 am
スタイルシートで実装するプルダウンメニュー…
前回の[CSS]スタイルシートで実装するアコーディオンエフェクト:IE6対応ところ紹介したGoogle コードを利用して、
DesignWalkerさんで紹介されていました
Scriptを使わないCSSエフェクト、Tipsい……
April 17th, 2008 at 4:29 am
[…] 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 […]
April 17th, 2008 at 7:01 am
[…] Pure CSS Animated Progress Bar アニメーションGIFとCSSを使… original article « 3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ […]
April 19th, 2008 at 6:29 am
Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker…
できるだけCSSで表現したいので、参考にしたい内容です。…
April 21st, 2008 at 2:57 am
target疑似クラスを用いて、CSSのみでLightBox風UIを実現する方法…
DesignWalkerさんのScriptを使わないCSSエフェクト、Tipsいろいろというエントリーの中に、「Scriptを使わないLightbox」というのがありました。本当にCSSのみで実現させていて、すごいなぁと思っ……
April 22nd, 2008 at 11:45 pm
[…] 前回は、『Scriptを使わないCSSエフェクト、Tipsいろいろ』をご紹介いたしました。 […]
June 21st, 2008 at 5:00 am
[…] 前回は、『Scriptを使わないCSSエフェクト、Tipsいろいろ』をご紹介いたしました。 […]