[CSS]上級者向け、スタイルシートのテクニック集
Post on:2009年3月26日
スタイルシートで実装する実用的なものからちょっと変わったものまで、25のテクニックをDesizn Techから紹介します。
1. CSS Gradient Text and Background
テキストや背景をグラデーション表示。

2.Image Overlay Using Z-Index
z-indexでオーバーレイ。

3. Using the CSS Boder Creatively
クリエイティブにborderを使用。

- Border-image: using images for your border
- Side Border Images
- Scalable Star
- Information on Border Slants
4. A Cool CSS Effect - Dashboard
クールなエフェクトを使用したパネル。

5. Creating 2D/3D buttons using CSS
2D/3Dのボタン。

How to make sexy buttons with CSS
6. Text Embossing/Shadow Technique With CSS
テキストにエンボスやシャドウを適用。

Text Embossing Technique With CSS
7. Iconize Text links/Hyperlink with CSS
リンクにアイコンで情報を付与。

Showing Hyperlink Cues with CSS
8. CSS Curly Quotes
引用をスタイリング。

9. Using CSS Opacity for Various Cool Effects
不透明度を効果的に使用。

A CSS only fly-out menu with transparency
- Menu Two - css background image, with opacity
- CSS Opacity Background Blending Effects
- Free CSS Opacity Transparency Menu Watermark
10. Blurry Background Effect
ぼやけた感じのエフェクトを適用。

11. CSS Parallax Effect
奥行きを感じるパララックス(視差)効果。

Examples of and How to Create the CSS Parallax Effect
12.Create a Lightbox effect only with CSS
Lightbox風エフェクトを実装。

Create a Lightbox effect only with CSS - no javascript needed
13.CSS-Only Accordion Effect
アコーディオン。

14. Add grunge Effect to Text Using Simple CSS
テキストをグランジ風にスタイリング。

Add grunge effect to text using simple CSS
15.Create a Block Hover /Element Hover Effect
ホットスポットを広く。

How to Create a Block Hover Effect for a List of Links
16. Simple Dither Effect using CSS
ディザー効果。

Simple Dither Effect using CSS
17. Create a liDock Menu
ドック風のナビゲーション。

Horizontal Menus That Grow on You
18. CSS Hover Swap Effect
ホバーでスワップ。

19. Polaroid effect using CSS
ポラロイド風のエフェクト。

Polaroid-izing photos with CSS
20. CSS Magazine Style Layout
マガジンスタイルのレイアウト。

21. CSS Hoverbox Menu
ホバーでびっくり表示。

22.CSS TABS - CSS Only "DOM TABS"
タブで操作するパネル。

CSS TABS - CSS Only "DOM TABS"
23.CSS Magic with Fixed Background-attachment
背景画像を使った、おもしろテクニック。

a scrolling trick with background images
24.CSS tooltips
ツールチップ。

25. Pure CSS Preloader
画像などのプリローダー。

sponsors