[CSS]上級者向け、スタイルシートのテクニック集
Post on:2009年3月26日
スタイルシートで実装する実用的なものからちょっと変わったものまで、25のテクニックをDesizn Techから紹介します。
1. CSS Gradient Text and Background
テキストや背景をグラデーション表示。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-01.png)
2.Image Overlay Using Z-Index
z-indexでオーバーレイ。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-02.png)
3. Using the CSS Boder Creatively
クリエイティブにborderを使用。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-03.png)
- Border-image: using images for your border
- Side Border Images
- Scalable Star
- Information on Border Slants
4. A Cool CSS Effect - Dashboard
クールなエフェクトを使用したパネル。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-04.png)
5. Creating 2D/3D buttons using CSS
2D/3Dのボタン。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-05.png)
How to make sexy buttons with CSS
6. Text Embossing/Shadow Technique With CSS
テキストにエンボスやシャドウを適用。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-06.png)
Text Embossing Technique With CSS
7. Iconize Text links/Hyperlink with CSS
リンクにアイコンで情報を付与。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-07.png)
Showing Hyperlink Cues with CSS
8. CSS Curly Quotes
引用をスタイリング。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-08.png)
9. Using CSS Opacity for Various Cool Effects
不透明度を効果的に使用。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-09.png)
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
ぼやけた感じのエフェクトを適用。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-10.png)
11. CSS Parallax Effect
奥行きを感じるパララックス(視差)効果。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-11.png)
Examples of and How to Create the CSS Parallax Effect
12.Create a Lightbox effect only with CSS
Lightbox風エフェクトを実装。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-12.png)
Create a Lightbox effect only with CSS - no javascript needed
13.CSS-Only Accordion Effect
アコーディオン。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-13.png)
14. Add grunge Effect to Text Using Simple CSS
テキストをグランジ風にスタイリング。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-14.png)
Add grunge effect to text using simple CSS
15.Create a Block Hover /Element Hover Effect
ホットスポットを広く。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-15.png)
How to Create a Block Hover Effect for a List of Links
16. Simple Dither Effect using CSS
ディザー効果。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-16.png)
Simple Dither Effect using CSS
17. Create a liDock Menu
ドック風のナビゲーション。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-17.png)
Horizontal Menus That Grow on You
18. CSS Hover Swap Effect
ホバーでスワップ。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-18.png)
19. Polaroid effect using CSS
ポラロイド風のエフェクト。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-19.png)
Polaroid-izing photos with CSS
20. CSS Magazine Style Layout
マガジンスタイルのレイアウト。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-20.png)
21. CSS Hoverbox Menu
ホバーでびっくり表示。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-21.png)
22.CSS TABS - CSS Only "DOM TABS"
タブで操作するパネル。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-22.png)
CSS TABS - CSS Only "DOM TABS"
23.CSS Magic with Fixed Background-attachment
背景画像を使った、おもしろテクニック。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-23.png)
a scrolling trick with background images
24.CSS tooltips
ツールチップ。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-24.png)
25. Pure CSS Preloader
画像などのプリローダー。
![デモのキャプチャ](/wp-content/uploads-2009/2009032608-25.gif)
sponsors