[CSS]アイデア満載のスタイルシートのテクニック30選
Post on:2008年4月30日
Six Revisionsのエントリー「30の卓越したCSSテクニック」から、CSSとHTMLだけで実装するエクセレントなテクニックをいくつか紹介します。
30 Exceptional CSS Techniques and Examples
![Hoverbox Image Galleryのデモのキャプチャ](/wp-content/uploads/2008043003-01.png)
Hoverbox Image Gallery
画像拡大できるギャラリー。
![Sliding Photograph Galleriesのデモのキャプチャ](/wp-content/uploads/2008043003-02.png)
Sliding Photograph Galleries
水平・垂直方向に開閉するパネル。
![Supercharge your image bordersのデモのキャプチャ](/wp-content/uploads/2008043003-03.png)
Supercharge your image borders
画像の枠の装飾。
![Cross Browser Multi-Page Photograph Galleryのデモのキャプチャ](/wp-content/uploads/2008043003-04.png)
Cross Browser Multi-Page Photograph Gallery
パネル切替付きの画像ギャラリー。
![CSS Photo Zoomのデモのキャプチャ](/wp-content/uploads/2008043003-05.png)
CSS Photo Zoom
写真の拡大表示。
![The CSS-Only Accordion Effectのデモのキャプチャ](/wp-content/uploads/2008043003-06.png)
The CSS-Only Accordion Effect
水平・垂直方向に伸縮するアコーディオン。
![Scrollable Table with Fixed Headerのデモのキャプチャ](/wp-content/uploads/2008043003-07.png)
Scrollable Table with Fixed Header
テーブルのヘッダを固定。
![Content Overlay with CSSのデモのキャプチャ](/wp-content/uploads/2008043003-08.png)
Content Overlay with CSS
コンテンツをオーバーレイ表示。
![A CSS styled table version 2のデモのキャプチャ](/wp-content/uploads/2008043003-09.png)
A CSS styled table version 2
テーブルの装飾。
![Showing Hyperlink Cues with CSSのデモのキャプチャ](/wp-content/uploads/2008043003-10.png)
Showing Hyperlink Cues with CSS
リンク先の種類でアイコンを変更。
![Simple Rounded Corner CSS Boxesのデモのキャプチャ](/wp-content/uploads/2008043003-11.png)
Simple Rounded Corner CSS Boxes
角丸装飾。
![Sitemap Celebrationのデモのキャプチャ](/wp-content/uploads/2008043003-12.png)
Sitemap Celebration
サイトマップ風のデザイン。
![Easy cross-browser transparencyのデモのキャプチャ](/wp-content/uploads/2008043003-13.png)
Easy cross-browser transparency
クロスブラウザ対応の透過処理。
![CSS FOR BAR GRAPHS: EXAMPLESのデモのキャプチャ](/wp-content/uploads/2008043003-14.png)
CSS FOR BAR GRAPHS: EXAMPLES
アクセシブルなグラフ。
![Animated Rollover Arrowのデモのキャプチャ](/wp-content/uploads/2008043003-15.png)
Animated Rollover Arrow
アニメーションする矢印。
![Forms markup and CSS - Revisitedのデモのキャプチャ](/wp-content/uploads/2008043003-16.png)
Forms markup and CSS - Revisited
フォームのテンプレート。
![Before your very eyes - a fade-in imageのデモのキャプチャ](/wp-content/uploads/2008043003-17.png)
Before your very eyes - a fade-in image
画像を背景にフェードイン。
![CSS Gradient Text Effectのデモのキャプチャ](/wp-content/uploads/2008043003-18.png)
CSS Gradient Text Effect
テキストにグラデーション効果。
sponsors