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

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

Mastering CSS, Advanced Techniques and Tools

Mastering CSS, Part 2: Advanced Techniques and Tools

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

sponsors

top of page

©2018 coliss