[CSS]スタイルシートの実用的なテクニック集：エレメント・CSS3・Tips編

先日紹介した「レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編」の続編となる、リスト・カレンダー・表・フォームなどのエレメントの実装や進歩したスタイルシートのテクニック集をSmashing Magazineから紹介します。

Mastering CSS, Part 2: Advanced Techniques and Tools

• 1. カレンダー・リスト・テーブル・タイムライン関連
• 2. iPhone用のテクニック
• 3. フォーム・検索関連
• 4. データの視覚化
• 5. その他有用なテクニックとTips
• 6. CSS3のテクニック
• 7. CSSのツール
• 8. 他のリソースの紹介

1. カレンダー・リスト・テーブル・タイムライン関連

jQuery Sequential List
リストをスタイリング。

Date Display Technique with Sprites
カレンダーの年を垂直表示。

Pure CSS Timeline
タイムライン。

A CSS-based Timeline
タイムライン。

Create astonishing iCal-like calendars with jQuery
iCal風のカレンダー。

Build a Calendar Using PHP, XHTML, and CSS Example
カレンダー。

CSS: Menu List Design
リストを値段メニュー風に。

Pure CSS Scrollable Table with Fixed Header
ヘッダを固定したテーブル。

Date Badges and Comment Bubbles
日付のスタイリング。

Styling tables with CSS
テーブルのスタイリング。

2. iPhone用のテクニック

iPhone Application UI Design Patterns
iPhoneのUIパターン。

Serving iPhone Specific CSS
iPhone用のCSSの設定。

Safari on iPhone Graphics, Media, and Visual Effects Coding How-To's
iPhoneのコーディングのリファレンス。

Web Development for the iPhone
開発者向けのiPhoneの情報。

How to Get Started with iPhone Dev
iPhone開発に役立つリソース集。

6 Tips to Optimize Your Website for iPhone
既存サイトをiPhone対応する6つのTips。

jPint
iPhoneをシミュレート。

3. フォーム・検索関連

Create Custom Search Bars with Image Replacement using CSS
検索フォーム。

Fancy Form Design Using CSS
ユーザビリティ・デザインに優れたフォーム。

Theming The Search Submit Button
Submitボタンのスタイリング。

Making Forms Convert Through Awesome Inline Labels
インラインにラベルを表示。

CSSG Collections: Web Forms
フォームの実装例。

45+ Really Essential Free HTML [Form] Enhancements
フォームのフリーのリソース集。

minimal form layout
ミニマルなフォームのレイアウト。

4. データの視覚化

Simple CSS shiny progress bar technique
プログレスバー。

20+ CSS Data Visualization Techniques
データを視覚化したテクニック集。

Accessible Data Visualization with Web Standards
アクセシブルなグラフやチャート。

5. その他有用なテクニックやTips

CSS Star Rating Part Deux
スターレイティング。

Two Techniques for CSS Transparency
透過処理に関するテクニック。

Placing a CSS background image horizontally right on an h2 using a span element
背景を右寄せにするテクニック。

Snazzy Pullquotes for Your Blog
プルクォートの実装例。

Cross-browser semi-transparent backgrounds
半透明の背景。

How to: CSS Large Background
大きい背景の使い方。

Creating Thumbnails Using the CSS Clip Property
画像をクリップしてサムネイル表示。

CSS image replacement for... images? It makes sense for print.
印刷対応の画像置換。

Text Blocks Over Image
画像の上にテキストブロックを配置。

Internet Explorer & CSS issues
IE対策。

Disabling Deprecated HTML Using CSS
CSSで非推奨のHTML要素を不能に。

6. CSS3のテクニック

Mixing CSS3 and jQuery
CSS3とjQueryのコラボ集。

CSS Gradients in Action
CSS3でグラデーション。

The Shadow effect in CSS3
CSS3でシャドウのエフェクト。

CSS3 Exciting Functions and Features: 30+ Useful Tutorials
CSS3のチュートリアル集。

7. CSSのツール

SlickMap CSS
リストでサイトマップ。

Phoenix
Firefoxのアドオン。

Juicer - a CSS and JavaScript packaging
CSSとJavaScriptを圧縮化。

Boks
AIRのアプリケーション。

8. 他のリソースの紹介

CSSに関する他のリソースも多数、紹介されています。
Mastering CSS, Part 2