今回のネタは、box-shadow を使った、ちょっと面白い演出とデザインの紹介です。
box-shadow は現在、最初に書かれていた仕様の CSS Backgrounds and Borders Module Level 3 からは削除されおり、まだ策定中の段階ですが、先日リリースされた Opera10.50 ではベンダープレフィクスが取れた状態で使用できるようになっています。（なぜ・・・？）
そのため、Firefox や WebKit 系ブラウザで使うには-moz-や-webkit-のベンダープレフィクスが必要です。
また今回のネタでは、transition プロパティに対応している WebKit のみ、アニメーションの演出を見ることができます。
いちおう Opera10.50 でも transiton には対応したのですが、box-shadow へのアニメーションは適用されませんでした。
ということで、百聞は一見にしかず、ということでデモを見てください。
今回も CSS3 で遊んでみるシリーズです。
"今回のネタは、CSS3 で袋文字を作る"、です。
いちおう、WebKit では -webkit-text-strokeというそのものズバリなプロパティがありますが、そもそも WebKit しか対応していないこと、また微妙に縁がテキストにかぶるので（現状のままだと）使いづらい、というのがあります。
今回のネタは、見栄えはよくないですが、いちおう IE にも対応させてあります。
ただ、やっぱりネタなので実践で使うには「？」ですが、こんなこともできるよーという感じでご覧下さいｗ
ちなみに、色々なサイズを見られるように JavaScript を使って境界線の太さを調整できるようにしてあります。また、使う人がいるか分かりませんが 設定したものを CSS として書き出すようにしてあります。
今まで、CSS3 のグラデーションを利用したサンプルの作成を作成するとき、Photoshop っぽい感じでグラデーションが作れたらなーと前から思っていたので、最近 JavaScript から遠ざかっていたのもあって思い切って自分で作ってみました。
メインはグラデーションの作成ですが、Photoshop ライクなものを目指したので、Photoshop では当たり前のように出来るドロップシャドウなんかも設定できたら便利かな、と思って付け加えてあります。n
ちなみに、CSS3 のグラデーションがメインなので、"CSS3 のグラデーションに対応している Firefox3.6β以上か、WebKit 系のブラウザでしか動作しません"。n
色々チェックはしていますが、もし不具合なんかあったら連絡もらえるとうれしいです。
連絡いただける際は、この記事へのコメントか、問い合わせからお願いします。n
今回は、CSS3 のプロパティを出力するのが目的だったので、そもそも CSS3 に対応していないブラウザはすっぱり切り捨てましたｗ なので、全体的に CSS3 をめっさ使ってます。n
加えて、IE6 などのブラウザを切り捨てたので、気兼ねなく色々なセレクタを使ったりしてとてもコーディングが楽でした。
CSS3 が当たり前になったらこんなに楽になるんだなー・・としみじみ思いました。早く、CSS3 をメインで使ってコーディングがしたい・・・。n
考えてみたら -webkit-animation についての記事を書いていなかったので、ちょうどいいかなーと思いつつエントリー。n
今回の記事は、これで決まり？な画像置換 - DKIR で紹介したz-indexのマイナス値と、-webkit-animationを使ったボタンに光るエフェクトを加える方法の紹介です。n
前回 に引き続き、CSS3 で遊んでみるの第 2 段ですｗ
ちなみに今回のサンプルは、WebKit 系が先行実装している-webkit-animationを使ったものなので、Google Chrome や Safari で見ないとまったくなにも起こりませんのであしからず。（ただ、逆を返せばその他のブラウザ（もちろん IE6 も）では変化がないので、WebKit 系ブラウザで見た人向けに仕込んでおく、なんていう使い方もできちゃったりします）n
最近なんだか結構 CSS3 で色々やっているのが流行ってるようなので、自分も CSS3 で遊んでみることにしました。n 内容は、「CSS3だけで丸いボタンを作る」です。
画像を見てもらうと分かるように、完全に丸いボタンです。
しかもこれ、画像は一切使っていません。使用しているのは CSS のみです。n
今回はとにかく遊んでみる、っていうのが主題なので使いどころとかは一切考えていませんｗ
それから CSS3 に対応していないブラウザで見ると、ただの真四角のボタンリンクになります。n
色々と記事を書いてきて、いざ CSS3 を使ってサンプルを作ってみよう、って思ったときに微妙にプロパティ名とかを忘れていたのでまとめてみる。ちなみにまだ草案のものもあるのでちょこちょこ更新予定。n
漏れているものもあると思うので、もしなにかあったら連絡もらえると助かります。n
(*) は CSS3 で定義された値
項目をクリックすると、詳細が表示されます。
[使い方] -webkit-background-size: 40px 20px;
背景画像のサイズを指定します。横 縦の順で記述します。n
[使い方] -webkit-background-origin: padding;
上記の background-size で % を指定した場合の、算出方法を指定します。使える値は以下の通り。n
[使い方] -webkit-background-clip: padding;
背景画像を描画する際、border 領域の下から描画するか、padding 領域から描画するかを指定します。border に対して、透過のある画像や、透明度のある色を指定した際に背景が border の下に表示されると問題がある場合などに使うといいと思います。n
[使い方] backgorund-image: url(sample.png), url(sample2.png)...;
CSS3 では背景画像を複数指定することができるようになりました。
カンマ区切りで列挙することで、前面から背面への画像指定が可能です。
繰り返し処理や配置箇所なども同じようにカンマ区切りで指定します。（それぞれ書かれた位置が画像と対応します）n
[使い方] -webkit-border-image: url(sample.png) 4 4 4 4 [round|repeat] / 4px [,4px 4px 4px];
[使い方] -webkit-border-radius: 5px;
ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。
CSS Backgrounds and Borders Module Level 3 の勧告案を受けてか、Google Chrome4 では -webkit- のプレフィクスがなくても動作するようになっています。
[使い方] display: -webkit-box;
この display を指定された要素内のブロック要素（p や div など）は、自動的に横並びになり、かつ最大の高さを持つ要素の高さにすべてが追従する。n
[使い方] -webkit-box-flex: 1;
display: box を指定された要素内に配置されたブロック要素(※)の幅の状態を指定します。（flex は "フレキシブル" の意味です）
(※)の要素のうち、box-flex で指定された数値の合計に対する割合が算出幅となります。
つまり、box-flex: 1, box-frex: 2 というふたつの要素が存在した場合、前者は親要素の 1/3 の幅を閉め、後者は 2/3 の幅を占めることになります。n
[使い方] -webkit-box-ordinal-group: 1;
display: box 内に配置されたブロック要素に指定します。
指定できるのは数値で、設定した数値の順番にコンテンツが表示されます。
（HTML の記述順序に関わらず出現順序を変更したい際に使用します）n
[使い方] -webkit-box-shadow: 2px 2px 5px black;
左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。n
[使い方] text-shadow: 2px 2px 5px black;
左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。box-shadow と異なり、文字自体に影を付けます。n
[使い方] -webkit-text-stroke: 2px blue;
テキストにアウトラインを設定します。アウトラインの太さ、幅を指定します。また、以下のプロパティを使うことで個別に設定できます。
※ちなみにこれは W3C に提案されている段階なので、CSS3 の規格には取り込まれていません。n
[使い方] -webkit-text-fill-color: white;
テキストの塗りつぶし色を指定します。color と同義ですが、こちらの値を transparent に指定することで、アウトラインのみを表示することが可能になります。
※ちなみにこれは W3C に提案されている段階なので、CSS3 の規格には取り込まれていません。n
[使い方] -webkit-box-sizing: content-box [,border-box];
ボックスの生成するルールを設定します。content-box は、通常の CSS の仕様に沿ったボックスを生成し、border-box は IE6 の後方互換モードで代表される、width 値に border や padding が含まれるボックスを生成します。n
[使い方] -webkit-transition-property: color, background-color;
transition を適用するプロパティを設定します。all を指定するとすべてが対象となります。n
[使い方] -webkit-transition-duration: 0.5s;
transition の変化をどれくらいの時間で表現するかを設定します。単位は s です。n
[使い方] -webkit-transition-timing-function: ease-in-out;
transition の変化の具合を設定します。指定できる値は以下の通りです。n
[使い方] background-image: -webkit-gradient(linear, left top, left bottom, from( white ), color-stop( 0.3, gray ), to( black ) )
[使い方] -webkit-box-reflect: below [0px -webkit-gradient()];
生成されたボックスなどを反転表示させます。また、透過 PNG 画像や、-webkit-gradient() を使用することで反転した要素にマスクをかけることもできます。
指定する値は、「above(上)、below(下)、left(左)、right(右)」で位置を、続く px で離れる距離を、最後に PNG 画像の URL か、もしくは -webkit-gradient でマスクを指定します。n
[使い方] -webkit-mask-box-image: url(mask.png);
透過 PNG 画像を指定することで、ボックスにマスクをかけることができます。n
[使い方] -webkit-transform: rotate(45deg);
生成されたボックスを変形(transform)させます。
指定できる値は次の通り。n
| rotate(deg) | 回転（deg で指定。30deg など） |
|---|---|
| rotateX(deg) rotateY(deg) | 横(縦)回転。-webkit-transform-style、-webkit-transform と組み合わせて使うことで 3D 的表現が可能。（deg で指定。30deg など） |
| scale(xy[x,y]) | 拡大・縮小（数値を指定。1 や 0.5 など） |
| skew(deg) | スキュー(シアー)（degで指定。30deg など） |
| translate(xy[x,y]) | 移動（px で指定。30px など） |
| perspective(deg) | 遠近感（数値で指定） |
[使い方] -webkit-transform: preserve;
上で書いた -webkit-transform の変形の仕方を、2D 表示にするか、3D 表示にするかを指定します。
指定できる値は次の通り。n
[使い方] -webkit-transform-origin: X Y Z;
transform の基準点を指定します。n
[使い方] -webkit-backface-visibility: hidden;
rotateX などで裏返ったときにコンテンツの裏側を表示するかどうかを指定。n
[使い方] @font-fase{ font-family: myFont; src: url(font.otf) format('opentype');
サーバにアップしたフォントを指定し、そのフォントがインストールされていない環境でもフォントが見えるようにする指定です。
font-family で任意の名前をつけ、src でフォントファイルのパスを指定します。
ちなみに利用する場合は、任意に付けた名前を指定することで利用できるようになります。
※使用する場合は、ライセンスなどの問題を確認した上で使うよう注意する必要があります。n
[使い方] width: -moz-max-content
幅（width）の算出方法を指定するプロパティの値です。新しく追加されたのは以下の通り。n
[使い方] -moz-border-image: url(bg_pickupbox.gif) 4 4 4 4 / 4px round;
ボーダーに画像を指定するプロパティです。ちょっと英語なので解釈が合っているか分かりませんが、どうやら仕様が変更になったようです。そのため、若干 webkit 系と指定方法が異なるので注意が必要です。
[参考：mozilla developer center]
[使い方] -moz-border-radius: 5px;
ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。（webkit 系と指定方法が異なるので注意）n
[使い方] background-image: -moz-linear-gradient(-90deg,rgb(237, 237, 237) 0%,rgb(204, 204, 204) 40%,rgb(0, 134, 224) 100%)
線状のグラデーションを指定する値です。（webkit 系と指定方法が異なるので注意。こちらの方が仕様に則した指定方法です）
参考URL: https://developer.mozilla.org/en/CSS/-moz-linear-gradient
[使い方] background-image: -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%)
円状のグラデーションを指定する値です。（webkit 系と指定方法が異なるので注意。こちらの方が仕様に則した指定方法です）
参考URL: https://developer.mozilla.org/en/CSS/-moz-radial-gradient
[使い方] -moz-background-inline-policy: bounding-box;
インライン要素の背景画像の繰り返し方を指定します。指定できる値は以下の通り。n
[使い方] display: -moz-box;
この display を指定された要素内のブロック要素（p や div など）は、自動的に横並びになり、かつ最大の高さを持つ要素の高さにすべてが追従する。n
[使い方] -moz-box-flex: 1;
display: box を指定された要素内に配置されたブロック要素(※)の幅の状態を指定します。（flex は "フレキシブル" の意味です）
(※)の要素のうち、box-flex で指定された数値の合計に対する割合が算出幅となります。
つまり、box-flex: 1, box-frex: 2 というふたつの要素が存在した場合、前者は親要素の 1/3 の幅を閉め、後者は 2/3 の幅を占めることになります。n
[使い方] -moz-box-ordinal-group: 1;
display: box 内に配置されたブロック要素に指定します。
指定できるのは数値で、設定した数値の順番にコンテンツが表示されます。
（HTML の記述順序に関わらず出現順序を変更したい際に使用します）n
[使い方] -moz-box-sizing: content-box [,border-box];
ボックスの生成するルールを設定します。content-box は、通常の CSS の仕様に沿ったボックスを生成し、border-box は IE6 の後方互換モードで代表される、width 値に border や padding が含まれるボックスを生成します。n
[使い方] -moz-transform: rotate(45deg);
詳細については -webkit-transform を参照してください。n
[使い方] -moz-transform-origin: X Y;
transform の基準点を指定します。n
WebKit で書かれている内容を参照してください。n
[使い方] -o-background-size: 50% 50%;
背景画像のサイズを指定します。横 縦の順で記述します。n
[使い方] background-origin: padding;
上記の background-size で % を指定した場合の、算出方法を指定します。使える値は以下の通り。n
[使い方] background-clip: padding-box;
背景で塗りつぶす領域を変更できる。padding のエッジからまたは border のエッジからのどちらかを選択できる。n
[使い方] border-radius: 10px;
ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。
CSS Backgrounds and Borders Module Level 3 が勧告候補になったため、Opera10.50 では -o- のプレフィクスがなくても動作するようになっています。n
[使い方] border-image: url(bg_pickupbox.gif) 4 4 4 4 / 4px round;
[使い方] box-shadow: 2px 2px 3px #999;
左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。
現在は W3C の CSS3 の草案からは一端消去されている仕様となります。
また、まだ草案の段階ですが Opera ではベンダープレフィクスが取れています。n
[使い方] text-shadow: 2px 2px 5px black;
左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。box-shadow と異なり、文字自体に影を付けます。n
[使い方] -o-transform: rotate(45deg);
詳しくは -webkit-transform を参照してください。n
[使い方] -o-transition-property: color, background-color;
transition を適用するプロパティを設定します。all を指定するとすべてが対象となります。n
[使い方] -o-transition-duration: 0.5s;
transition の変化をどれくらいの時間で表現するかを設定します。単位は s です。n
[使い方] -o-transition-timing-function: ease-in-out;
transition の変化の具合を設定します。指定できる値は以下の通りです。n
[使い方] background-color: rgba( 0,0,0,0.5 );
透明度を持った色を設定します。左から RGB 値を指定し、最後に 01 の間で透明度を指定します。（0 で完全な透明になります）
以前の記事の HTML5で組んでみた に続いてサンプルがまったく一緒ですがｗ
タイトルの通り、HTML5+CSS3 を使ってできるだけ無駄な HTML 要素（主に div）を使わずにどこまで思い通りのデザインが実現できるか実験してみました。⇒[DEMO]
結果、使用した div はわずかに 3 つ。ちなみに実際のブログトップで使用している div を数えたところ、54 個も使ってました。（一概に減らせばいい、というものでもありませんが）n
※ただし、今回の実験はまだ草案の段階のものなどを多く含んでいるため、またそれらに対応しているブラウザが webkit 系（Safari や Google Chrome など）のみということもあり、正常に表示されるのは webkit 系だけとなってます。n
CSS3 の草案で定義されているプロパティなどについては、各ブラウザで先行実装しているCSS3プロパティまとめ でまとめています。n
簡単に説明すると、n
まず、header 要素や footer 要素、nav 要素など、今までは<div id="header">などとして定義していた箇所が、そのまま要素名として使えるようになったため、div を使う必要がなくなりました。n
ひとつの画像を指定した値で区切って上下左右、それからボックス四隅へ適用するプロパティです。これのおかげで、ひとつのボックス要素にこれを指定するだけで、角丸などの複雑な囲みでも簡単に実装することができます。n
つまり、これを ul 要素などに使えば、装飾用に新しく div を追加する必要がなくなる、というわけです。n
こちらはプロパティではありませんが、CSS3 で新しく定義されている display プロパティの新しい値です。
display: box を指定された要素の子要素であるブロック要素は、自動的にカラム配置となり、さらにどのカラムも最大の高さを持つカラムに追従して高さが確保される、という特徴があります。n
そのため、メイン・サブカラムの高さを揃える JS を使ったり、はたまた背景を使ったトリッキーな方法で高さを揃える、という必要がなくなるため、これもまた div 要素を削る要因となります。n
それのおかげで、div をほとんど使わずにサンプルの左右のカラムの高さがそろっている、というわけです。n
現在策定中の CSS3 では、背景画像を複数指定することができるようになりました。
指定したい数だけ、カンマ区切りでそれぞれ指定します。n
上のようにカンマ区切りで指定すると、それぞれの配置や繰り返し内容を列挙することができます。n
これにより、アイコンと画像ボーダー、のように複数の画像を指定することが可能なため、余計な div などの要素を追加する必要がなくなります。n
ここの気づきも、div を減らす要因になりました。
以下の HTML と CSS を見ていただくと分かりますが、heade 要素は横幅 100% に設定されているにも関わらず、内包している h1 などの要素がメインのコンテンツと同じ 830px の幅に収まっています。n
このテクニックの肝は、float,position,marginの 3 つです。n
設定する値は上記を参考にしてもらうとして、なにをやっているか、を説明すると、float させた要素に対し、position: relative を指定します。n
こうすることで、続く left などの値が反映されるようになります。
そしてこの left に 50% を指定すると、指定された要素の左端は画面中央に来ます。n
最後に、margin にマイナス値を設定し、数値をコンテンツ幅の半分に指定することで、まるでコンテンツ幅が固定されているような位置に配置される、というわけです。n
つまり、いったんコンテンツを画面中央に移動させたのち、マイナス方向に要素を移動することで、意図した固定幅の範囲にコンテンツが収まるようになる、というわけです。n
今回のサンプルでは、RSS feed のアイコンが右側にあるので、同じように左右を入れ替えて値を設定すれば、右寄せにコンテンツが表示される、というわけです。n
以上の、border-image,background,display: boxと、HTML5 の新要素、および上記のテクニックを使うことによって 54 個も使っていた div を、3 つまでに抑えることができました。n
まだ CSS3 の草案段階のプロパティだったりしますが、早くすべてのブラウザに実装してもらいたいものですね。n
合わせて読むと役に立つかもなエントリー
今回は久々に CSS ネタを書いてみようと思います。
最近（自分の中で）注目度の高い CSS3 のネタです。n
実用的になるまではまだまだ先の話だと思いますが、CSS3 になるとやたらと簡単にレイアウトができるので面白くてサンプルを作ってみました。n
前回のエントリーに引き続き、-webkit-transition を使ってアニメーションの CSS について書きたいと思います。
-webkit-transition のアニメーションについては前回の記事 CSS3はアニメーションも指定できる！ を参照ください。動画キャプチャ入りで簡単に説明してます。n
今回は、-webkit-transition を使ってアニメーションで表示されるプルダウンメニューを作ってみたいと思います。
下位階層があるメニューにマウスオーバーすると、下位階層のメニューがフェードインとともに下にスライドしながら出てくる、というものです。n
とりあえず言葉で説明しても、百聞は一見にしかずなので、サンプルを見てください。以下に動画サンプルも表示してます。
（※実際のサンプルは、webkit 系が実装している CSS3 を使用しているので、Safari か webkit 以外で見ると、通常のプルダウンメニューになります。また、IE6 では動作しません）n
すみません、プロパティの名前が一部間違っていました。-webkit-transition-propaty と書いていたのは正確には-webkit-transition-propertyです。
先日、CSS Reloaded というイベントに参加してきました。
そこでは CSS3 の可能性を示唆していました。n
内容としてはとても刺激的で、将来、現在ある JavaScript ライブラリのほとんどが必要なくなるのではないかと思わせるほどでした。n
ただ問題点として、対応ブラウザが webkit 系（Safari、Google Chromeなど）しかないこと。
また、正式に CSS3 として勧告されているわけではないこと（今 Safari でできることが実装されない可能性）。
などがあります。
ただそれでも、ぜひ実装してほしいと強く願うほど、とてもすばらしいプロパティがありました。n
ということで今回は、あまり実用性はないものの、この感動を知ってもらいたいということから、CSS3 について書きたいと思います。
ちなみに、これから書く内容は、上でも書いた通り Safari でしか実行できないため、サンプルを見る際には Safari で見てください。（Safari のダウンロードはこちらから）n
カテゴリー
最近のエントリー
テスト的に設置してます。好きにコメントしてみてくださいｗ
©2009-2010 CSS-EBLOG All Rights Reserved
