このページの本文へ

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

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

菊池 崇

  • この記事をはてなブックマークに追加
本文印刷
css3

 画像ソフトを使ってデザインしていた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/

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く