box-shadowの insetによるグラデーション

Posted on 2009-09-01 | Tagged ,

前回、-moz-linear-gradientの紹介をしたのですが、そもそも BOX内の境界辺りのグラデーションならば box-shadowを inset付きで使ったほうがいいということに -moz-box-shadow "inset" CSS testを見て気付き、さっそく実装してみました。

-moz-box-shadow:
0px 3px 10px rgba(0,0,0,0.1),
inset 0 20px 30px -15px rgba(0,0,0,0.15),
inset 0 -40px 50px -35px rgba(255,255,255,0.6);
-webkit-box-shadow:
0px 3px 10px rgba(0,0,0,0.1),
inset 0 20px 30px -15px rgba(0,0,0,0.15),
inset 0 -40px 50px -35px rgba(255,255,255,0.6);

mozilla系と webkit系で分けていますが中身は一緒です。最初のは普通に BOX外に影をつけ浮き上がらせるもので、これは以前から行っていました。次の ２行で BOX内上下に黒い影をつけ、ほんの少し立体的な印象を与えています。各値の意味は -moz-box-shadow – MDCが詳しいです。また色を rgba値で扱うと、将来 backgroundの色を変更したくなっても、この部分は触らなくていいので便利です。

Firefox 3.5（Win, Mac, Linux）ならびに Chromium 4.0.205（Mac）、Google Chrome 4.0.203（Win）、Webkit 47905（Mac）でちゃんと表示されることを確認しました。IE 8や Opera 10、Safari 4などはまだ対応していないようです。

CSS3勧告はまだ先の話なので、こうした先行実装を行うのは時期早々という事は承知しています。が、将来の技術を体感できるのは単純に楽しいので。。。私のサイトを見るには Firefoxが最適ですよってことで。(~ ~;)

Comments Off

Firefox Trunkの -moz-linear-gradient

Posted on 2009-08-15 | Tagged , ,

ちょっと前の話ですが、Firefox 3.6αの CSSに background-image値として -moz-linear-gradientが入ったので、当サイトに使ってみました。ヘッダ部や各アーティクル部、サイド部に使っています。ちょっとだけかっこよくなったかなと自画自賛。

background: -moz-linear-gradient(0 0, 0 20px, from(#eee), to(#fff)) no-repeat;

Safari 4でも -webkit-gradientとして使えるようですが、どうやら開始・終了点としてピクセル（px）が使えないようです。残念。Surfin’ Safari – Blog Archive » Introducing CSS Gradients:

A point is a pair of space-separated values. The syntax supports numbers, percentages or the keywords top, bottom, left and right for point values.

他の属性と組み合わせれば出来るのかな？

こうして、今までグラフィックソフトを使わなければ出来なかったことが、CSSだけで出来るようになるのはうれしいことですね。ちょっと色を変えたいときも、Firebugや Web Developer拡張で確認しながらできるし。。。

2 Comments

@media指定による、横幅に合わせた適切なレイアウト表示

Posted on 2009-07-26 | Tagged , ,

本サイトはかなり前から、ネガティブマージンを使用したリキッドレイアウトを採用してきました。これにコンテナ部の (min|max)-widthを加えれば、PCで普通に閲覧する分には問題なく表示できていました。ただ、iPhone等のモバイル端末から閲覧すると、拡大しない限り文字を読むことすら難しい現状でした。

今回は単に iPhone対応するだけでなく、PCからでもより横幅長に合わせた表示がされるよう、CSSを改造してみました。

@media screen and (max-width: 550px), screen and (max-device-width:480px) {
...
}

上記のように PCで 550px以下の幅か iPhoneの場合に使用される CSSを入力していきます（PC上で 550pxなのは本サイトではこの幅以下でメニューが落ちてしまうため。また iPhoneは 320x480pxなので 480pxにしています。）。実際には PC上の Firefoxで幅を上記以下にし、Web Developerアドオン等で確認していきました。やったことは、余計なマージンを消しサイドバーを本文の下に落としたりしています。

ただこのままでは iPhoneの viewpointの初期値が 980pxなので縮小表示されてしまいます。これは CSSでは対応できないので、各 HTMLのヘッダ部に下記指定を入れ、縦横どちらの持ち方でも等倍表示されるようにしました。

<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0" />

いろいろつついて最終的には、iPhone対応はもちろんのこと、PC上でも幅が 701px以上のとき、551〜700pxのとき、550px以下のときの 3段階で変わるようにしています。本文がなるべく読みやすい幅で表示されるよう考えた結果です。

以前からのリキッドレイアウトに加え、この media指定を入れることでかなり柔軟な表示が、殆ど CSSだけで出来てしまいます。つついてて面白かったです。ちょっと感動してしまいました。。。

P.S. なおいつものことながら、IE8を含めた全ての IEで効果がないようです。。。

Comments Off