[CSS]スタイルシートの実用的なテクニック集：レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編
Post on:2009年8月7日
sponsors
スタイルシートの実用的なテクニックをSmashing Magazineから紹介します。
Mastering CSS, Part 1: Styling Design Elements
1. レイアウト関連
The simplest way to horizontally and vertically center a DIV
天地左右の真ん中に配置。
New CSS Sticky Footer - 2009
要素が少なくても、フッタを最下部に配置。
Simple Page Peel Effect with jQuery & CSS
ペロッと、雑誌をめくるようなエフェクト。
Equal height boxes with CSS
要素の量に関係なく、divの高さを揃える。
Adaptable view - how do they do it?
リストの表示形式を変更。
CSS: The All-Expandable Box
拡大に対応したボックス。
Four Methods to Create Equal Height Columns
divの高さを揃える4つの方法。
Vertical Centering With CSS
天地の中央に配置。
CSS vertical centering using float and clear
floatやclearを使用せずに、天地の中央に配置。
Cross-Browser Inline-Block
inline-blockのクロスブラウザ対応のお作法。
The CSS "Ah-ha!" Moment
CSSの概念を簡単に説明。
An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning
z-indexを使用した相対と絶対配置。
The CSS Overflow Property
overflowのチュートリアル。
Absolute, Relative, Fixed Positioning: How Do They Differ?
potisionのチュートリアル。
display: inline-block
display: inline-blockのチュートリアル。
2. ナビゲーション関連
Create dropdown menus with CSS only
Simple scalable CSS based breadcrumbs
The Tabbed Breadcrumb Navigation
Apple's Navigation bar using only CSS
Nice CSS menu with feed reader icons list
Multi-level Menus with jQuery and CSS
ナビゲーション集。
3. 画像関連
Centering images with CSS
画像のセンタリングのチュートリアル。
Add a Custom "Trendy" Border Around Blog Images With CSS & JavaScript
画像のボーダーのチュートリアル。
Sexy Music Album Overlays
ジャケ写のスタイリング。
Create CSS pin balloons with ease
ピンバルーン。
Create an Image Rotator with Description (CSS/jQuery)
パネルをスライド表示。
5 Popular CSS Speech Bubbles
スピーチバブル。
How to Make a Threadless Style T-Shirt Gallery
見せ方が面白いギャラリー。
CSS image replacement for... images? It makes sense for print.
スクリーン用とプリント用のイメージ。
Schönes neues CSS: box-shadow
box-shadowのチュートリアル。
4. タイポグラフィ関連
Truetype, Font Variants and Antialiasing
TrueTypeフォントのアンチエイリアスのチュートリアル。
Sexy Ordered Lists with CSS
ol要素をセクシーにスタイリング。
beautiful fonts with @font-face
@font-faceのチュートリアル。
Забытые возможности :first-letter
first-letterのチュートリアル。
8 Definitive Web Font Stacks
Webフォントのチュートリアル。
CSS: Perspective Text
フォントで奥行き。
Fonts for web design: a primer
タイポグラフィの概念。
CSS text-shadow Fun: Realtime Lighting Demo
テキストのスタイリング。
Rendering Quotes With CSS
クォートのチュートリアル。
Six Ways to Style Blockquotes
引用のスタイリング。
Make OL list start from number different than 1 using CSS
CSSで開始番号を変更。
Use CSS to Override Default Text Selection Color
ハイライト時のカラーを変更。
CSS Drop Cap Effect
Drop Capのチュートリアル。
5. アイコン・ボタン・リンク関連
Add Progressive Icons to Your Site Using :after pseudo-element
リンクの後ろにファイルタイプ別のアイコン。
Super Awesome Buttons with CSS3 and RGBA
ボタン風にスタイリング。
Scalable CSS Buttons Using PNG and Background Colors
拡大縮小に対応したスタイリング。
Add File Type Icons next to your links with CSS
リンクにファイルタイプ別のアイコン。
22 CSS Button Styling Tutorials and Techniques
ボタンのスタイリング集。
CSS Tricks' Link Nudge
ホバー時横移動するチュートリアル。
Sanscons
CSSで色変更するアイコン素材。
sponsors
