崇ツイートするレタープレス風のtext-shadowをつくってみよう次は、少し控えめなtext-shadowの使い方だ。アップルのWebサイトやiPhone/iPadのユーザーインターフェイスをよく見てみるとレタープレス(活版印刷、ここでは浅い彫り込みの意味)風のエフェクトが使われている。このレタープレス風のエフェクトをtext-shadowを使って再現してみよう。シンプルなエフェクトだが、これだけでもWebサイトがぐっとリッチな雰囲気になる。}サンプル3の実行画面。transformならバッジも5分で作れる!画像ソフトを使ってデザインしていたパーツも、CSS3なら簡単なコードですぐにデザインできる。イベントの告知などで活躍する楕円形の「バッジ」を作ってみよう。DESIGNCSS3を駆使してTwitter風のふきだしを作るコメントを表示するときに効果的な「スピーチ・バブル」(ふきだし)のデザイン。CSS3なら画像を一切用意することなく、スタイルシートだけで作れる。DESIGN10分でできる、海外Webデザイン風テクニック海外のWebサイトでよく見かけるのが、紙の端を折り込んだような「ドッグイヤー(dogeared)デザイン」だ。CSSの擬似クラスを利用して再現してみよう。DESIGNbox-shadowを極めて「Mac風UI」を作る!box-shadowプロパティを使うとボックスに対して簡単にシャドウを適用できる。box-shadowプロパティをWebデザインに取り入れる具体的な方法を紹介しよう。DESIGNtext-shadowで作る「見出し」デザインのアイデアtext-shadowはCSS3の中でもっとも基本的なプロパティだが、アイデア次第で大きな効果を得られる。リッチな「見出し」をデザインしてみよう。DESIGNもう画像は要らない!CSS3で作る申し込みボタンCSS3を使ったデザインTipsをサンプルとともに紹介する新連載。第1回はCSS3の新しいプロパティを駆使して「申し込みボタン」をデザインする。3)がいよいよ実用段階に入ってきた。大半のモダンブラウザーで実装が進み、アップルやグーグルなどの先進企業がCSS3を本格的に活用し始めている。デザイン表現の自由度を広げ、マークアップの効率を上げるCSS3のTipsを具体的なサンプルとともに紹介する。00DESIGNGoogleも採用!CSS3実践テクニックCSS3はもはや実験段階ではなく実践段階になりつつある。崇氏がナビゲーションメニューを例に、現場で使える実践テクニックを紹介する。スマホお気に入り一覧マイページ。