LotosLabo

プログラミング技術とか気になった情報を載せていきます

CSS3について

はじめに

CSSソースにはバージョンの記述がないのでCSS3ではこれが使えないというのはありません。バージョンにおいて互換性があります。ただし、新しいバージョンで追加された要素は古いバージョンでは使えない可能性があるので確認が必要です。また、すべてのブラウザに対応しているわけではありませんので、チェックが必要です。


f:id:lo25131:20120624004126j:plain



追加されたもの


すべてではありませんが一部を紹介します。

rgbaプロパティ


要素に対して透明度を持った色を指定することが出来るプロパティです。適用できる要素はborder-color,background-color,colorです。


test {
background-color: rgba (赤, 緑, 青, 透明度);
}


色の各要素は0~255あるいは0%~100%の値
透明度は0~1、色は16進数で記入することは出来ない。


test{
background-color: rgba(255,0,0,0.5);
}

hslaプロパティ


透明度を持った色を、色相・サイド・輝度で指定することの出来るプロパティです。


test {
background-color: hsla(色相, 彩度, 輝度, 透明度);
}


色相は0~360、彩度と輝度は0%~100%、透明度は0~1


test{
background-color: hsla(240,100%,50%,0.5);
}


opacityプロパティ


要素に対して透明度を指定するプロパティです。


test{
opacity: (透明度);
}


test{
opacity: 0.5;
}


透明度に指定できる要素が色に限らなく、画像やテキストなどにも使用できる。rgbaと違う部分はOpacityは子要素にも透明度が指定されますが、rgbaは色のみに指定される。


新しく追加された単位のrem


rem = root+emの省略である。ルートであるhtmlに指定されたフォントサイズを基準にした単位である。


html{
font-size:62.5%;
}


h2{
font-size:1.4rem;
font-size:14px;
}


ルートであるhtmlに基準となるサイズを指定する。62.5%というのはpx単位で10px。またIEでも表示されるようにする。


1つの要素に複数の背景画像を表示できるようになった

background-imageをカンマで区切って指定することで複数の背景画像を表示できるようになった。


テキストの影


テキストに影を出せるようになりました。

text-shadow


text-shawos: 2px 2px 3px 2px #2ca9e1;


ボックスの影

ボックスに影を出せるようになりました。

box-shadow

box-shadow: 2px 2px 3px 2px #CCC;


ボックスの角を丸める


ボックスの角を丸めることが出来るようになりました。

border-radius

border-radius: 10px;


グラデーション


線形のグラデーション
background-liner-gradient

円形のグラデーション
background-radial-gradient

Webフォントを使う


Webサーバー上のフォントを読み込んで表示できるようになった。


@font-face


@font-face {
font-family: フォント名;
src: url("") format();
}

画像をボーダーに使う

border-image;


ボックスの大きさの指定

box-sizing: 値

<値>

content-box 内容領域の大きさ
padding-box 内容領域にpaddingを加えた大きさ
border-box 内容領域にpaddingとborderを加えた大きさ


ボックスのサイズを変更可能にする

resize: 値

<値>

none サイズの変更を許可しない
both 幅と高さの変更を許可
horizontal 幅のみ変更を許可
verticla 高さのみ変更を許可



段組の列数を指定

column-count: 列数

column-count: 2;


フレキシブルボックスを配置

display: 値

flex ブロックレベルのフレックスコンテナボックスを作成
inline インラインレベルのフレックスコンテナボックスを作成


変形

2次元の変形処理を指定

transform: 変形関数

3次元の変形処理を指定

transform: 変形関数

変形関数

移動


translate(X方向の移動距離, Y方向の移動距離)
translateX(X方向の移動距離)
translateY(Y方向の移動距離)
translateZ(Z方向の移動距離)
translate3d(X方向の移動距離, Y方向の移動距離, Z方向の移動距離)


縮尺


scale(X方向の縮尺比率, Y方向の縮尺比率)
scaleX(X方向の縮尺比率)
scaleY(Y方向の縮尺比率)
scaleZ(Z方向の縮尺比率)
scale3d(X方向の縮尺比率, Y方向の縮尺比率, Z方向の縮尺比率)



回転

rotate(回転角度)
rotate3d(数値, 数値, 数値, 回転角度)
rotateX(X軸を軸とする回転角度)
rotateY(Y軸を軸とする回転角度)
rotateZ(Z軸を軸とする回転角度)



3次元上での子要素の描画方法

transform-style: 値


子要素に遠近感を持たせる


perspective: 値


スタイルを滑らかに変化させる

transition-property: 値
transition-duration: 値


変化のパターンを指定する

transition-timing-function: 値


<値>

ease ゆっくり変化を始め、変化の途中で加速し、減速して終わる
linear 一定の速度で変化する
ease-in ゆっくり変化を始め、その後加速する
ease-out 高速で変化を始め、減速しながら終わる
eas-in-out ゆっくり変化を始め、徐々に加速し、減速しながら終わる


変化が始まるまでの時間を指定

transition-delay: 値


トランジションをまとめて指定

transition: 値1 値2 値3


アニメーションの要素

アニメーションのキーフレーム

キーフレームを設定
@keyframes キーフレーム名{
0% { プロパティ: 値;~{
n% { プロパティ: 値;~}

100%{プロパティ: 値;}


アニメーションの効果をつける

animation-name: 値
animation-duration: 値


アニメーション変化のパターンを指定


animation-timing-function: 値


<値>


ease ゆっくり変化を始め、変化の途中で加速し、減速して終わる
linear 一定の速度で変化する
ease-in ゆっくり変化を始め、その後加速する
ease-out 高速で変化を始め、減速しながら終わる
eas-in-out ゆっくり変化を始め、徐々に加速し、減速しながら終わる


アニメーションの繰り返し回数を指定


animation-iteration-count: 値


<値>

infinite   無限に再生を繰り返す
数値     数値で指定


アニメーションの繰り返す方向を指定


animation-direction: 値


<値>

normal 通常の実行方向で繰り返す
reverse  通常の実行方向とは逆向きで繰り返す
alternate 奇数回目は通常通り、偶数回目は逆向きで繰り返す
alternate-reverse 奇数回目は逆向き、偶数回目は通常通りで繰り返す


アニメーションが動き始めるまでの時間を指定

animation-delay: 値


アニメーションをまとめて指定

animation: 値1 値2 値3