Webデザインレシピ

先日、とっても素敵な Webサイトを見つけました。

iamjamie.co.uk

まるで雑誌の表紙のようなデザインで、とっても感動してしまいました。HTML5 と CSS3 で書かれていて、ブロック要素、内包するテキストも斜めにレイアウトされています。細いテキストを斜めにすると、とても読みにくくなってしまうんですけどフォントも工夫されてて判読性も十分です。

もちろん IE では斜めではなくて水平に表示されてしまうんですけど、それでも閲覧するのに困らないようなハイブリットなデザインで、またまた感動！

これから近い将来、CSS3 でのコーディングが当たり前になってくると思うんですけど、CSS3 でどんなデザインが可能になるのかとっても興味深くてわくわくしますね！今回は、そんな CSS3 を使ったサンプルをいくつか作ってみました。

CSS サンプル 目次

1. ボックスシャドウと回転でつくるポラロイド写真ギャラリー
2. 回転で作る斜めのメニュー + 立体的な CSS リボン
3. スケールアップとアニメーションの組み合わせ表現
4. とってもうれしい CSS3 のマルチカラム
5. 丸角、グラデーション、シャドウの組み合わせでボタン
6. サーチボックスもちょっと素敵に
7. フォームって、フォーカス時にシャドウの色を変えたりすると素敵かも
8. 丸角とシャドウでつくるタブ
9. おまけ：IE 独自拡張 グラデーションの指定の仕方

1. ボックスシャドウと回転でつくるポラロイド写真ギャラリー

CSS3 の box-shadow と transform プロパティの rotate ファンクションで、ちょっとしたフォトギャラリーができちゃいます。<li> タグの中に <a> タグで囲んだ画像を入れているだけなのに、ボックスシャドウを加えて少し回転させただけで、ずっと素敵なギャラリーになりました。

今回は画像ですが、rotate はブロック要素でも同じように表現できるので、雑誌の紙面のような楽しいデザインができそうですね！

• 写真

  Web Design Recipes Tumblr

HTML

<li>タグの中に<a>タグで囲んだ画像を入れただけの簡単なHTML。

CSS

padding で写真の枠を付けて、ボックスシャドウで影を付けています。

次に、個別に rotate ファンクションで回転、z-indexで重なりを指定しています。

• 6. transform: rotate(-10deg)

上の例では、反時計周りに10度、回転の中心はデフォルトのまま … 要素の中心になります。回転の中心をずらしたい場合は、transform-origin で指定できます。

• transform-origin: x-offset y-offset;

例えば transform-origin: 0 100%; で左下になります（X-offsett, Y-offset）。

上記のイメージギャラリーでは、画像ホバー時に z-index を変更して、その要素が一番上にくるようにしているだけですけど、回転の角度を変えたりしてもおもしろいですね。

• via – Line25

  How To Create a Pure CSS Polaroid Photo Gallery

2. 回転で作る斜めのメニュー + 立体的な CSS リボン

CSS33 の transform プロパティの rotate ファンクション（さっきも使った回転）をつかって、斜めのメニューを作っています。

2.1. RGBa で色を透過できます！

まずは斜めのメニューの部分です。これはさっきと同じ、rotate なので、難しくないですねー。ここでは色を透過させられる、RGBa を見てみます。CSS3 では、色（今回は背景色）の指定を RGBa で指定できますよね。メニューの部分はカラーを RGBa で指定したので、背景のテクスチャが透けて見えますねー。

CSS

• 2. rgba( , , , );

R（レッド）、G（グリーン）、B（ブルー）はそれぞれ 0~255、のアルファチャンネルは 0 ~ 1で指定して、0 が透明、1 が不透明となってます。0.5 などは、.5 と、省略して書けます。

RGBa の活用例としては、以下のような画像のキャプションなどにも利用できますね！

2.2. 立体的なリボン

今度は CSS での立体的なリボンの作り方です。でも実際は、画像を使った方がいいかも…と思ってたりしますけど、スマートフォンサイトなどではいいかもですね！リボンの折り返しの部分は、border を使って三角形の部分を作ります。これは CSS3 じゃなくても OKですね！イメージは以下のような感じです。

四角形と三角形でリボンを作る

CSS

三角形を作るには、高さと幅が 0 のボックスを作って、そこに太い border を指定します。そして 1辺を残して、他の辺の border の色を、透明色 transparent を指定すれば OK です！CSS で三角形を作るトリックは、下記のリンクが分かり易いです。

• 参考

  Using borders to produce angled shapes

z-index プロパティと、position プロパティで位置、重なりを調整すればリボンの出来上がりです。

• via – pv.mgarage

  How To Create Depth And Nice 3D Ribbons Only Using CSS3

3. スケールアップとアニメーションの組み合わせ表現

transition プロパティと transform プロパティを組み合わせて、マウスホバーでゆっくり拡大するバブルアップアイコンを表現できます！でも残念ながら Firefox ではアニメーションの再現できません … 画像のスケールアップはします。Safari、Chrome では、拡大するアイコンの動きを確認できると思います。

• Icons

  Free Vector Social Media Icons

HTML

HTML は至って簡単です。<li> タグの中に画像を入れてるだけの横並びリストです。

CSS

画像にアニメーションの時間指定をします。

• 5. -webkit-transition:-webkit-transform 0.3s ease-in

上記の部分で、アニメーションスピードを設定します。ホバー時は transform:scale(1.8) で1.8倍にスケールアップします！

• CSS LIBRALY

  Image Bubbles using CSS3 transform and transitions

4. とってもうれしい CSS3 のマルチカラム

CSS3 のとっても嬉しい仕様のひとつ、マルチカラムレイアウト。今までラッピングして、フロートして、なんてしていましたが、CSS3 ではほんの数行で済んでしまいますし、HTMLもとってもクリーン！

退屈な Web の水平、垂直のレイアウトも、ロテーションさせるたりすると、雑誌の紙面のようなイメージも作れるかも。

HTML

HTMLは至ってクリーンです。

CSS

CSSもとってもシンプルです。

• 9. column-count: 3;
• 10. column-gap: 20px;

column-count でカラム数、column-gap でカラムの間隔を指定するだけです。

5. 丸角、グラデーション、シャドウの組み合わせでボタン

border-radius と text-shadow、box-shadow、gradient（グラデーション）を組み合わせると、こんな素敵なボタンができちゃいます。画像を使うより、色を変更すればいいだけなのでメンテナンス性はこっちの方が全然いいですね！

CSS Button

HTML

マークアップは至って普通です。

CSS

丸角、シャドウはすでに紹介しているので、CSS3 のグラデーションの書き方です。

mozilla系（Firefox）と webkit系（Safari、Chrome）と書き方が違うので注意が必要ですね。webkit系 は、left top から、left bottom といった感じで、グラデーションの向きを指定します。mozilla系ブラウザのグラデーションの方向の書き方は、以下のようになります。

• 2. -moz-liner-gradient( top, #f0f0f0, #ddd);

がグラデーションの向きです（下記参照）。はグラデーションの開始色、はグラデーションの終了色になります。

1. top – 上から下
2. left – 左から右
3. left top – 左上から右下

• CSS Lecture

  CSS3 グラデーション（gradient）の指定方法

• Via – Web Designer Wall

  CSS3 Gradient Buttons

6. サーチボックスもちょっと素敵に

検索フォーム（<input type=”text” など）だって、丸角やグラデーションを指定することができます。

CSS

上記は入力（テキストボックス）の方の CSS です。ボタンの方も基本的に同じで、色（グラデーション）だけ変更すればいいだけですね！

7. フォームって、フォーカス時にシャドウの色を変えたりすると素敵かも

テキストボックスやテキストエリア … フォーカスでシャドウを濃くしたり、シャドウの色を変更するという表現 …。ちょっとお洒落でいい感じですねー！

Name

E-mail

Website

CSS

これは CSS3 ならではの発想ですね。ボックスシャドウを使って、ホバーしたときと、フォーカスしたときのスタイルを変更しています。画像でやろうとするとちょっと面倒ですけど、CSS3 ならとっても簡単ですね！

• Via – net tuts+

  Design a Prettier Web Form with CSS 3

8. 丸角とシャドウでつくるタブ

丸角のタブも、今までは画像を使ってデザインしてました。CSS3 では画像を使わずに、丸角やグラデーション、ボックスシャドウなどを表現できるので、CSS のみで下記のようなタブができちゃうんですねー！

また、タブにマウスをのせると、ジワーっと背景色が変ります（Firefox 3.6、IE ではアニメーションは表現できません。Firefox 3.7 は大丈夫なようです。Safari、Chrome は OK です）。

• Tab 1
• Tab 2
• Tab 3

CSS

実際のタブの数より <li> ダグがひとつ多いところに注意が必要ですねー。4つ目の空の <li> ダグでシャドウを表現しています。

CSS

4つめのシャドウ用の <li> ダグは、position: absolute で絶対配置するんですね！そして z-index で重なり順もコントロールするのを忘れずに！今まで画像を使って表現していた丸角、グラデーションを使っていたタブも CSS3 ならとても簡単にできてしまいますね！

• via –

  CSS3 Glow Tabs with Box Shadow

CSS3 はコーディングをとっても楽にしてくれて、表現の自由度を広げてくれます。これから色んなアイデアで、素敵なデザインがたくさん生まれてくると思うと、本当にわくわくします。そんなCSS3のアイデアをたくさん集めた、The Ultimate Roundup of 55+ CSS3 Tutorials からいくつかサンプルを紹介しました！

9. おまけ：IE 独自拡張 グラデーションの指定の仕方

• 1. GradientType=0 or 1 … これは 0で縦方向、1で横方向のグラデーションです。
• 1. startColorstr='#FFFFFF', endColorstr='#DDDDDD' … 開始色と終了色の指定です。