菊池 崇の実践！CSS3道場
CSS3（Cascading Style Sheets,level 3）がいよいよ実用段階に入ってきた。大半のモダンブラウザーで実装が進み、アップルやグーグルなどの先進企業がCSS3を本格的に活用し始めている。デザイン表現の自由度を広げ、マークアップの効率を上げるCSS3のTipsを具体的なサンプルとともに紹介する。
2011年05月10日 11時42分更新
-
第6回 2011年05月10日 11時42分WebPro
CSS3 transformならバッジも5分で作れる！
画像ソフトを使ってデザインしていたパーツも、CSS3なら簡単なコードですぐにデザインできる。イベントの告知などで活躍する楕円形の「バッジ」を作ってみよう。
-
第5回 2011年03月24日 10時01分WebPro
CSS3を駆使してTwitter風のふきだしを作る
コメントを表示するときに効果的な「スピーチ・バブル」（ふきだし）のデザイン。CSS3なら画像を一切用意することなく、スタイルシートだけで作れる。
-
第4回 2011年03月01日 14時30分
WebPro
10分でできる、海外Webデザイン風テクニック
海外のWebサイトでよく見かけるのが、紙の端を折り込んだような「ドッグイヤー（dogeared）デザイン」だ。CSSの擬似クラスを利用して再現してみよう。
-
第3回 2011年02月16日 11時00分
WebPro
box-shadowを極めて「Mac風UI」を作る！
box-shadowプロパティを使うとボックスに対して簡単にシャドウを適用できる。box-shadowプロパティをWebデザインに取り入れる具体的な方法を紹介しよう。
-
第2回 2011年02月01日 11時00分
WebPro
text-shadowで作る「見出し」デザインのアイデア
text-shadowはCSS3の中でもっとも基本的なプロパティだが、アイデア次第で大きな効果を得られる。リッチな「見出し」をデザインしてみよう。
-
第1回 2011年01月18日 11時00分
WebPro
もう画像は要らない！CSS3で作る申し込みボタン
CSS3を使ったデザインTipsをサンプルとともに紹介する新連載。第1回はCSS3の新しいプロパティを駆使して「申し込みボタン」をデザインする。
