[CSS]上級者向け、スタイルシートのテクニック集

スタイルシートで実装する実用的なものからちょっと変わったものまで、25のテクニックをDesizn Techから紹介します。

25 Advanced CSS Techniques

1. CSS Gradient Text and Background

テキストや背景をグラデーション表示。

CSS Gradient Text Effect

• CSS Gradients
• Background gradients and css
• Pure CSS Text Gradient

2.Image Overlay Using Z-Index

z-indexでオーバーレイ。

How z-index works!

• CSS z-index

3. Using the CSS Boder Creatively

クリエイティブにborderを使用。

CSS Box Border Test

• Border-image: using images for your border
• Side Border Images
• Scalable Star
• Information on Border Slants

4. A Cool CSS Effect - Dashboard

クールなエフェクトを使用したパネル。

A Cool CSS Effect - Dashboard

5. Creating 2D/3D buttons using CSS

2D/3Dのボタン。

How to make sexy buttons with CSS

• 4 Uber Cool Css Techniques For Links
• CSS rollover buttons

6. Text Embossing/Shadow Technique With CSS

テキストにエンボスやシャドウを適用。

Text Embossing Technique With CSS

• CSS Drop Shadows

7. Iconize Text links/Hyperlink with CSS

リンクにアイコンで情報を付与。

Showing Hyperlink Cues with CSS

• Iconize Textlinks with CSS

8. CSS Curly Quotes

引用をスタイリング。

CSS Curly Quotes

• Swooshy Curly Quotes Without Images

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

ぼやけた感じのエフェクトを適用。

Blurry Background Effect

11. CSS Parallax Effect

奥行きを感じるパララックス（視差）効果。

Examples of and How to Create the CSS Parallax Effect

• A parallax optical illusion with CSS The Horse in Motion

12.Create a Lightbox effect only with CSS

Lightbox風エフェクトを実装。

Create a Lightbox effect only with CSS - no javascript needed

13.CSS-Only Accordion Effect

アコーディオン。

The 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

• CSS element hover effect

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

ホバーでスワップ。

CSS swap hover effect

19. Polaroid effect using CSS

ポラロイド風のエフェクト。

Polaroid-izing photos with CSS

• Polaroid effect using css and reST

20. CSS Magazine Style Layout

マガジンスタイルのレイアウト。

Mandarin Design Text Tricks

21. CSS Hoverbox Menu

ホバーでびっくり表示。

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

ツールチップ。

lixlpixel CSS tooltips

25. Pure CSS Preloader

画像などのプリローダー。

css: add a "loading" icon to your larger images