CSS3 transformならバッジも5分で作れる！ (1/4)

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 次へ

この連載の記事

一覧へ

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

画像ソフトを使ってデザインしていたパーツも、CSS3なら簡単なコードですぐにデザインできる。イベントの告知などで活躍する楕円形の「バッジ」を作ってみよう。

CSS3を駆使してTwitter風のふきだしを作る

コメントを表示するときに効果的な「スピーチ・バブル」（ふきだし）のデザイン。CSS3なら画像を一切用意することなく、スタイルシートだけで作れる。

10分でできる、海外Webデザイン風テクニック

海外のWebサイトでよく見かけるのが、紙の端を折り込んだような「ドッグイヤー（dogeared）デザイン」だ。CSSの擬似クラスを利用して再現してみよう。

box-shadowを極めて「Mac風UI」を作る！

box-shadowプロパティを使うとボックスに対して簡単にシャドウを適用できる。box-shadowプロパティをWebデザインに取り入れる具体的な方法を紹介しよう。

text-shadowで作る「見出し」デザインのアイデア

text-shadowはCSS3の中でもっとも基本的なプロパティだが、アイデア次第で大きな効果を得られる。リッチな「見出し」をデザインしてみよう。

もう画像は要らない！CSS3で作る申し込みボタン

CSS3を使ったデザインTipsをサンプルとともに紹介する新連載。第1回はCSS3の新しいプロパティを駆使して「申し込みボタン」をデザインする。

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

DESIGN

菊池崇の実践！CSS3道場

CSS3（Cascading Style Sheets,level 3）がいよいよ実用段階に入ってきた。大半のモダンブラウザーで実装が進み、アップルやグーグルなどの先進企業がCSS3を本格的に活用し始めている。デザイン表現の自由度を広げ、マークアップの効率を上げるCSS3のTipsを具体的なサンプルとともに紹介する。

DESIGN