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をかぶせて、光沢のあるテキストエフェクトを。
|
|
|
4月 16th, 2008 at 5:22 AM
お世話になっております。
How to Create Flick Animations with CSSの
リンクが下のCSS Image Mapsとかぶってしまっているようです。
4月 16th, 2008 at 10:24 AM
実写版「攻殻機動隊」とか。…
…
4月 16th, 2008 at 12:05 PM
[...] original article « YouTubeの動画を高画質なMP4でダウンロードするブックマークレット [JS]かわいい感じに画像を拡大表示するスクリプト -prettyPhoto | コリス » [...]
4月 17th, 2008 at 1:16 AM
はじめまして、もう１年以上前から 欠かさず読ませていただいています。NZで細々とWeb Designerをやっているものです。
いつも参考になることばかりで、Design Walkerさんのおかげで だいぶ腕が上がりました。
といってもまだまだですが・・・
PhotoshopやIllustratorも こちらで紹介していただいたチュートリアルで勉強しています。
まずはお礼まで
応援しております。
4月 17th, 2008 at 2:30 AM
スタイルシートで実装するプルダウンメニュー…
前回の[CSS]スタイルシートで実装するアコーディオンエフェクト:IE6対応ところ紹介したGoogle コードを利用して、
DesignWalkerさんで紹介されていました
Scriptを使わないCSSエフェクト、Tipsい……
4月 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 [...]
4月 17th, 2008 at 7:01 AM
[...] Pure CSS Animated Progress Bar アニメーションGIFとCSSを使… original article « 3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ [...]
4月 19th, 2008 at 6:29 AM
Scriptを使わないCSSエフェクト、Tipsいろいろ – DesignWalker…
できるだけCSSで表現したいので、参考にしたい内容です。…
4月 21st, 2008 at 2:57 AM
target疑似クラスを用いて、CSSのみでLightBox風UIを実現する方法…
DesignWalkerさんのScriptを使わないCSSエフェクト、Tipsいろいろというエントリーの中に、「Scriptを使わないLightbox」というのがありました。本当にCSSのみで実現させていて、すごいなぁと思っ……
4月 22nd, 2008 at 11:45 PM
[...] 前回は、『Scriptを使わないCSSエフェクト、Tipsいろいろ』をご紹介いたしました。 [...]
6月 21st, 2008 at 5:00 AM
[…] 前回は、『Scriptを使わないCSSエフェクト、Tipsいろいろ』をご紹介いたしました。 […]
4月 11th, 2009 at 9:50 AM
Thanks
11月 15th, 2009 at 11:36 PM
[...] コードを利用して、 DesignWalkerさんで紹介されていました Scriptを使わないCSSエフェクト、Tipsいろいろの中のCSS-only Drop-down MenusをIE6対応で作ってみました。 [...]
2月 11th, 2010 at 6:15 PM
[...] コードを利用して、 DesignWalkerさんで紹介されていました Scriptを使わないCSSエフェクト、Tipsいろいろの中のCSS-only Drop-down MenusをIE6対応で作ってみました。 [...]