LINEで送る
Pocket

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



Similar Posts:

LINEで送る
Pocket


13 Thoughts on “Scriptを使わないCSSエフェクト、Tipsいろいろ”

コメントを残す

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