CSS3について覚え書き

CSS3についてメモ。

Border 関連のプロパティ

• CSS3 Backgrounds and Borders Module
• CSS3 Module: Border

15. The 'border-color' properties
グラデーションの掛かったボーダーを実現する。
対応ブラウザ: Mozilla

div.box {
height: 15px;
padding: 10px;
width: 200px;
text-align: center;
}
div.border-color {
border: 10px solid #000;
-moz-border-bottom-colors: #000000 #003F09 #005F0D #008F13 #00CF1C #00EF20 #3FFF59 #6FFF82 #AFFFBA #DFFFE3;
-moz-border-top-colors: #000000 #003F09 #005F0D #008F13 #00CF1C #00EF20 #3FFF59 #6FFF82 #AFFFBA #DFFFE3;
-moz-border-left-colors: #000000 #003F09 #005F0D #008F13 #00CF1C #00EF20 #3FFF59 #6FFF82 #AFFFBA #DFFFE3;
-moz-border-right-colors: #000000 #003F09 #005F0D #008F13 #00CF1C #00EF20 #3FFF59 #6FFF82 #AFFFBA #DFFFE3;
}

-moz-border-<position>-colors:
プロパティでボーダーの色を複数指定できる。順に色合いを変えることでグラーデーション調の線を引くことが可能。

<div class="box border-color">
UIEvolution Japan.
</div>

サンプル

19. The 'border-radius' properties

CSSで角を丸くする
対応ブラウザ: Mozilla, Webkit 最新版

div.border-radius {
border:1px solid #000;
/* Mozilla */
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;

/* Safari */
-webkit-border-left-radius: 10px;
-webkit-border-right-radius: 10px;
-webkit-border-top-radius: 10px;
-webkit-border-bottom-radius: 10px;
}

<div class="box border-radius">
UIEvolution Japan.
</div>

サンプル

3.4.1 The 'border-image' properties
通常のボーダーの変わりに画像を使用することが出来る。
コーナーと、コーナーとコーナーを結ぶ線の画像をそれぞれ指定することが出来る。

border-image: uri;

• border-top-image
• border-right-image
• border-left-image
• border-bottom-image

border-corner-image: uri;

• border-top-left-image
• border-top-right-image
• border-bottom-left-image
• border-bottom-bottom-image
  

ボーダー・コーナーともに個別に指定することが出来る。

最新版のWebkitでは、
-webkit-border-image:
でサポートしている様子。

3.26. Media Queries
Media Queryを使用すればより細かくデバイスに適用するスタイルを選択することが出来る。
media属性の指定とスタイルに対する指定でスタイルを適用するかどうか判定する。

対応ブラウザ: Operaと最新版のWebkit

/* Media query */
@media all and (min-width:650px){
div.box2#min-width {
background-color: #0300FF;
}
}
@media all and (max-width:1000px){
div.box2#max-width {
background-color: #0300FF;
}
}

<div class="box2 media-query" id="min-width">
650pxより大きいと青色
</div>
<div class="box2 media-query" id="max-width">
1000pxより小さいと青色
</div>

OperaとWebkitでウインドサイズを色々変えて表示してみてください。
サンプル

このMedia Queryを使用すれば、PCと携帯両方で動作するHPを簡単に作ることが出来そう。
スタイル属性にはディスプレイのサイズ・ディスプレイの高さ・ディスプレイの色の濃さを指定できる。

To describe in more detail what type of devices a style sheet applies to, this document proposes media queries. A media query consists of a media type and one or more expressions to limit the scope of a certain style sheet. Among the proposed media features that can be used in expressions are "width", "height" (size of the display), and "color" (color depth of the display).

とWorkinｇ Draft中に書かれている。

CSS3 module: Multi-column layout
対応ブラウザ: Mozillaのみ

3カラムレイアウトや2カラムレイアウトを簡単に作ることが出来ます。

div.multi-column{
-moz-column-with: 100px;
-moz-column-gap: 1em;
-moz-column-count: 3;
}

<div class="multi-column">In preparation for the release of Mozilla
Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific
Daylight Time (UTC -0700). After this point, no more checkins will be accepted
for Firefox 1.5 Beta 1, which is set for release on Thursday.

In preparation for the release of Mozilla
Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific
Daylight Time (UTC -0700). After this point, no more checkins will be accepted
for Firefox 1.5 Beta 1, which is set for release on Thursday.
</div>

一つのカラムの幅を100px、カラム間の空きを1em, カラム数を3つに指定します。

サンプル


7. Box Model addition
長い間、多くのWeb開発者やデザイナが苦しめられてきたボックスモデルの違い。
CSS2.1勧告のボックスモデルでは内容領域の高さと幅をあらわしますが、IEなどの一部のブラウザはボーダーやパディングも含めた領域を高さと幅とします。
CSS3で勧告されている、box-sizingプロパティは、どちらのボックスモデルを適用するかを指定することが出来ます。

box-sizing: content-box | border-box
content-box
要素の高さ(height)と幅(width)はCSS2.1勧告の視覚整形モデルに従う。指定された高さと幅は内容領域の高さと幅に適用される。パディングと高さは内容領域の外側に描かれる。

border-box
指定した幅と高さは、パディングとボーダーを含めた値になる。

9.1. 'resize' property
対応ブラウザ: 最新版のWebkitのみ

CSSのみで要素のリサイズを可能にします。
resize: both | horizontal | vertical;
bothを指定すると両方向にリサイズ可能。
horizontalを指定すると水平方向にリサイズ可能。
verticalを指定すると垂直方向にリサイズ可能。

サンプル

9.8. Text shadows: the 'text-shadow' property
対応ブラウザ: 最新版のWebkitのみ

Photoshopで作成できるような影付き文字の簡易版をCSSだけで作成することが出来ます。

text-shadow: 2px 2px 2px #ff0000;

CSS2から存在するが現在実装されているブラウザはWebkitだけなようです。
上記の設定では、右側に影を2px, 下側に影を2px、ぼかしを2pxで色は赤色。

サンプル


6.3.2. Substring matching attribute selectors
部分文字列でマッチ可能なセレクタが追加される。

[att^=val]
attがvalから始まる要素
[att$=val]
attがvalで終わる要素
[att*=val]
attが少なくとも一回はvalを含む要素

拡張子が.htmlのアンカ要素のみ取得するセレクタ
a[href$=".html"]


疲れたので、とりあえずこのへんで。