スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
記事URL | スポンサー広告

JavaScriptでよく使われる表現をCSSのみで行うテクニックとサンプル10種

Creating 10 Most-Used Javascript Techniques Using Pure CSS Styling

Creating 10 Most-Used Javascript Techniques Using Pure CSS Styling

DevSnippetsの上記エントリーにて、JavaScriptでよく使われる表現をCSSのみで行うテクニックとサンプルが10種類まとめられているので紹介します。

How To Create a Pure CSS Polaroid Photo Gallery

10_0602css_technic01.jpg

画像をポラロイド写真風ギャラリーみたいに表示させる。元となる画像は普通の画像でポラロイド風にはなっておらず、CSSでそのようなエフェクトをつけている。

デモページ
コードと解説ページ

Bubble Effect with CSS

10_0602css_technic02.jpg

マウスロールオーバー時にその画像を大きく表示させるエフェクトを実装する。CSS Spritesを使うものと、画像の置き換えを行うものの2種類の例があげられている。

デモページ
ソースのダウンロードとコード解説ページ

Text Rotation With CSS

10_0602css_technic03.jpg

テキストを90度回転させて表示させる。コードは意外とシンプル。

デモページとコード例

Create a JQuery Content Slider Using Pure CSS

10_0602css_technic04.jpg

コンテンツをスライドさせて表示させるテクニック。

デモページ
コードと解説ページ

※コードは直接デモページのソースを見たほうが見やすいかも・・・。

Pure CSS Timeline

10_0602css_technic05.jpg

年表を作るテクニック。

デモページ
ソースと解説ページ

Pure CSS Vignette

10_0602css_technic06.jpg

画像の一部分にぼかしみたいなエフェクトを実装する(?)テクニック。

デモページ
解説ページ

デモページではjQueryも使われており、写真を動かすエフェクトはjQueryによるものっぽい。

Pure CSS Animated Progress Bar

10_0602css_technic07.jpg

アニメーションする進捗バーを実装する。CSS以外に画像も使用するが、JavaScriptは未使用。

デモページ
ソースのダウンロードと解説ページ

How to Create a Valid Non-Javascript Lightbox

10_0602css_technic08.jpg

画像表示に使われるLightboxのテキスト版みたいなもの。

デモページ
コードと解説ページ

Accordion using only CSS

10_0602css_technic09.jpg

アコーディオンを実装。CSS3を使用。IEでは動作しない。

デモページ
コードと解説ページ

Snazzy Hover Effects Using CSS

10_0602css_technic10.jpg

マウスロールオーバー時に、その画像に説明文のテキストを表示させるテクニック。

デモページ
コードと解説ページ

▼スポンサードリンク

記事URL | Trackback(0) | Comment(0) | CSS
1つ後の記事:装飾が施された、かわいくてゆるい感じのフリーの欧文フォント50選
1つ前の記事:iPad向けの美しい壁紙55枚


















管理者にだけ表示を許可する

トラックバックURL
http://webclipping.blog122.fc2.com/tb.php/109-d7e8a9fd
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。