菊池崇の実践！CSS3道場 ― 第6回

CSS3 transformならバッジも5分で作れる！

2011年05月10日 11時42分更新

菊池崇

ツイートする

　画像ソフトを使ってデザインしていた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制作者の方におすすめです。

http://all-web.org/curriculums/css3/

前へ 1 2 3 4 次へ