CSS3の表現でデザインをちょっと素敵に … サンプルも

Posted under - Web Design

8

先日 HTML5 + CSS3 で書かれた、素敵な雑誌の表紙みたいな Webサイトを見つけました。それ以来、CSS3 だったらコレもできそう ... アレもできるかも ... なんてことを、雑誌のデザインなどを見ながらひとり盛り上がってます w まだまだ IE では CSS3 が使えないけれど、今回はいくつか CSS3 のサンプル作りに挑戦してみました。

CSS3 & Design

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

iamjamie.co.uk

iamjamie.co.uk

CSS3 の transform プラパティを使って、斜めにレイアウトされているのが素敵です ;D iamjamie – jamie wright, web design hull

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

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

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

CSS サンプル 目次

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

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

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

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

HTML

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

<ul class="gallery">
	<li><a href="#"><img class="pic-1" src="image01.jpg" alt="" /></a></li>
	<li><a href="#"><img class="pic-2" src="image02.jpg" alt="" /></a></li>
	<li><a href="#"><img class="pic-3" src="image02.jpg" alt="" /></a></li>
	<li><a href="#"><img class="pic-2" src="image02.jpg" alt="" /></a></li>
</ul>

CSS

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

.gallery img {
    padding: 10px;
    background: #fff;
    -moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, .4);
    box-shadow: 0px 3px 3px rgba(0, 0, 0, .4);
    position: relative /* z-index を指定するので */
}

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

ul.gallery .pic-1 {
    z-index: 1;
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
  • 6. transform: rotate(-10deg)

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

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

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

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

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

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

3D CSS Ribbon

これは CSS だけで表現する斜めのメニューや、立体的なリボンを設置するデモです。リボンの影の三角形も、CSS で作られています。斜めにする rotate は、残念ながらIEでは表現できません …。

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

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

CSS
.menu li {
    background: rgba(255, 105, 180, .4);
}
.menu ul li:hover {
    background: rgba(255, 105, 180, .75);
}
  • 2. rgba( 1, 2, 3, 4);

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

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

プロフィール写真

こんにちは ;D
Webデザインレシピの中のひと、高橋のりです!よろしくお願いします!

2.2. 立体的なリボン

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

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

立体的なリボンの作り方

四角いボックスに、border を工夫して作った三角形を下に重ねます。

CSS

/* 四角形 */
.rectangle {
	background: #7f9db9;
    height: 50px;
    width: 380px;
    position: relative;
    left:-15px;
    top: 30px;
    /* 重なり、一番上に表示 */
    z-index: 100;
}

/* 三角形 */
.triangle-l {
	border-color: transparent #7d90a3 transparent transparent;
	border-style:solid;
    border-width:15px;
    height:0px;
    width:0px;
    position: relative;
    left: -30px;
    top: 65px;
    /* 重なり、一番下に表示 */
    z-index: -1;
}

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

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

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

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

  • rss
  • twitter
  • facebook
  • dribbble

HTML

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

<ul>
<li><a href="#"><img src="twitter.png" alt="" /></a></li>
<li><a href="#"><img src="facebook.png" alt="" /></a></li>
<li><a href="#"><img src="Google.png" alt="" /></a></li>
</ul>

CSS

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

li img{
    width: 55px; /* デフォルトの幅.*/
    height: 55px; /* デフォルトの高さ  */
	/* Safari Chrome */
    -webkit-transition:-webkit-transform 0.3s ease-in;
	/* Opera */
    -o-transition:-o-transform 0.3s ease-in;
}

li img:hover{
    /* スケールアップ 1.8x */
    /* Firefox */
    -moz-transform:scale(1.8);
    /* Safari Chrome */
    -webkit-transform:scale(1.8);
    /* Opera */
    -o-transform:scale(1.8);
}
  • 5. -webkit-transition:-webkit-transform 0.3s ease-in

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

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

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

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

I love wafer I love I love soufflé. I love I love cotton candy fruitcake faworki caramels. Cheesecake pie marzipan gingerbread danish chocolate bar I love. Donut topping bonbon applicake biscuit.
Carrot cake oat cake marzipan biscuit. I love soufflé jelly. Halvah dragée biscuit I love danish tootsie roll. Bonbon faworki macaroon.
Cupcake lollipop carrot cake tootsie roll topping caramels. Oat cake dragée dragée candy canes muffin caramels cake wypas. Jelly beans jelly beans tiramisu I love chupa chups.

HTML

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


<div class="wrapper">
<p>
I love wafer I love I love soufflé. I love I love cotton candy fruitcake faworki caramels. Cheesecake pie marzipan gingerbread danish chocolate bar I love. Donut topping bonbon applicake biscuit...
</p>
</div>

CSS

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

.wrapper{
    /* Safari Chrome */
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    /* CSS */
    column-count: 3;
    column-gap: 10px;
}
  • 9. column-count: 3;
  • 10. column-gap: 20px;

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

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

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

CSS Button

HTML

/* リンク */
<a class="button blue" href="example.com">CSS Button</a>
/* 送信ボタン */
< input class="button blue" type="submit" name="signin" value="Signin" />

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

CSS

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


background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top,  #00adee,  #0078a5);

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

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

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

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

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

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

Search

CSS

#search input{
    border:1px solid #777;
    border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
    text-shadow: 0 1px #fff;
    -moz-box-shadow: 0 1px 1px #fff;
    -webkit-box-shadow: 0 1px 1px #fff;
    box-shadow: 0 1px 1px #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff));
    background: -moz-linear-gradient(top, #eee, #fff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff');
}

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

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

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

CSS

input:hover,
textarea:hover,
input:focus,
textarea:focus {
    border-color: #C9C9C9;
    -webkit-box-shadow: 0px 0px 6px rgba(255,15,135,.7);
    -moz-box-shadow: 0px 0px 6px rgba(255,15,135,.7);
    box-shadow: 0px 0px 6px rgba(255,15,135,.7);
}

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

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

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

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

CSS

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

<ul id="tabs">
	<li class="one"><a href="#">Tab 1</a></li>
	<li class="two selected"><a href="#">Tab 2</a></li>
	<li class="three"><a href="#">Tab 3</a></li>
	<li class="shadow"></li>
</ul>

CSS

#tabs li {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    float: left;
    width: 150px;
    padding: 0;
    margin: 0 10px 0 0;
    background-color: #fe2d96;
    border: solid 1px #f9007c;
    position: relative;
    z-index: 1;
}
#tabs li.shadow {
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: -3px;
    left: 0;
    border: none;
    background: none;
    z-index: 2;
    -webkit-box-shadow: 0 -2px 6px rgba(0,0,0,.4);
    -moz-box-shadow: 0 -2px 6px rgba(0,0,0,.4);
    box-shadow: 0 -2px 6px rgba(0,0,0,.4);
}
#tabs li.selected {
    z-index: 3;
}

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

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

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

#your-element {
/* Modern browser */
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
/* IE */
filter: progid: DXImageTransform.Microsoft.gradient
(GradientType=0, startColorstr='#ffffff', endColorstr='#dddddd');
}
  • 1. GradientType=0 or 1 … これは 0で縦方向、1で横方向のグラデーションです。
  • 1. startColorstr='#FFFFFF', endColorstr='#DDDDDD' … 開始色と終了色の指定です。

Comments

Thank you for the comment.