Web Designing 2009年7月号「特集1：一段上のCSSにするヒント」サンプル集
Theme 01 透過画像を重ねてサイトに奥行きを出す
Theme 02 半透明効果を演出するためのさまざまなテクニック
Theme 03 IE 6でも透過PNGを活かしたデザインに
以下のサンプルは、ダウンロードしてご確認ください。
Theme 04 画像にマスクをかけて変化をつける
- 丸形マスクを使ったサムネイルギャラリー
- 新着アイコンを画像の上に配置
Theme 05 ネガティブマージンによる要素の位置ずらし配置
- 任意の方向へ要素をずらす
- ネガティブマージンで領域を広げる
Theme 06 遊び心と機能性を両立した“手書き風”デザイン
- クリッカブルエリアをオーバーに表現
- ペンで下線を引いたような演出
Theme 07 CSSサイトに動きを与えるJavaScript
- 拡大するコンテンツ
- ツールチップの表示
Theme 08 JavaScriptを活用して膨大な情報を整理する
- 情報の分類にもタブ切り替えを利用する
- アコーディオンで内容を展開する
Theme 09 ミニマムな単ページデザインにメリハリをつける
- トグルスイッチで表示をオン・オフ
- 外部ファイルをオーバーレイ表示
Theme 10 デザインだけでなく、さまざまな閲覧環境に配慮する
- 正しいXHTMLのためにJavaScriptを利用する
- デザインとXHTMLの記述順が連動しないときに