[CSS]上級者向け、スタイルシートのテクニック集
Post on:2009年3月26日
sponsors
スタイルシートで実装する実用的なものからちょっと変わったものまで、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
