|
|---|
画像ソフトを使ってデザインしていたWebサイトのパーツも、CSS3なら簡単なコードを書くだけですぐにデザインできる。今回のCSS3道場では、イベントやキャンペーンの告知などで活躍する楕円形の「バッジ」を作ってみよう。これまでに何度も登場しているborder-radius／box-shadowプロパティと、transform プロパティを組み合わせればおどろくほど手軽だ。
今回作成するサンプル（Chrome 12b にて表示）
CSSを適用するサンプルのHTMLは以下のとおり。今回はHTML5でマークアップしているので、HTML4ではブロック要素扱いだったdiv要素をインライン要素だったa要素で包み、バッジ全体をリンクに設定している。
■サンプル1～4共通[HTML]
<a href="http://swapskills.info/2011/doubbble01.html" title="swapskills のページへ"> <div> <time datetime="2011-07-02">2011年7月2日（土）</time> SwapSkills Doubbble 初開催 <span class="locaation">東京都日本橋</span> </div> </a>
CSS3を使った実践的なデザインを学ぶ！
全8時間の集中レッスン、6/5（日）開催!!
本連載の著者である菊池 崇氏が講師を務める「CSS3を利用した一歩先行くCSSデザイン講座」がallWebクリエイター塾にて好評開講中。CSS3の基本から実践的なデザインテクニック、応用テクニックまで、1日8時間で集中的に学ぶ講座です。次回の開催は6月5日（日）。これからCSS3を本格的に学びたいWeb制作者の方におすすめです。
