そろそろ本格的にCSS3とHTML5のことを気にしてあげないといけないと思いメモることに。
これまでJavaScriptを入れなければできなかった処理ができるようになったので、覚えておいてそんはないかと。
ただ、まだ対応していないブラウザもあるので、注意が必要ですね。
Transitions（要はアニメーションですね。）
property : プロパティ、
duration：アニメーションの時間、
timing-function：アニメーションのタイプ（変化の仕方）
をそれぞれ指定してやるだけです。
a{ color: #000;
-moz-transition: color 0.2s linear; /* Firefox 3.7 */
-webkit-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
}
a:hover{ color: #666; }
a{ background-color: #eee;
-moz-transition: background-color 0.2s linear; /* Firefox 3.7 */
-webkit-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
}
a:hover{ background-color: #999; }
複数指定する場合は、カンマ（,）で区切って追加します。
a{ color: #000;
background-color: #eee;
-moz-transition: background-color 0.2s linear, color 0.2s linear; /* Firefox 3.7 */
-webkit-transition: background-color 0.2s linear, color 0.2s linear;
-o-transition: background-color 0.2s linear, color 0.2s linear;
}
a:hover{
color: #666;
background-color: #999;
}
border-radius（角丸）
※IE、Operaは非対応。JavaScriptを入れると実装できるそうです。
まあ、角丸をあまり使わない私としてはそこまで関係ないですが。。。
.sample3 {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
Sample : border-radius
特定の部分だけ指定してRを変えることもできます。
-webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 30px; -webkit-border-bottom-left-radius: 40px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 30px; -moz-border-radius-bottomleft: 40px;
text-shadowとbox-shadow（陰影）
両方とも必要な値の並びは同じで、
box-shadow: x-offset y-offset radius length color;
x-offset：水平方向のオフセット
y-offset：垂直方向のオフセット
radius：ブラー（ぼかし）の半径
length：シャドウの距離
color：シャドウのカラー
.sample4 {
text-shadow: 1px 1px 1px #fff;
-moz-box-shadow: 0px 0px 5px #999;
-webkit-box-shadow: 0px 0px 5px #999;
background: #eee;
padding: 10px 20px;
}
Sample : text-shadowとbox-shadow
さらに、重ねがけなどをすることでこんなのもできるみたいですね。
※font-size、bottom、ボックスシャドウのY方向オフセット、の値により、影が見えない場合があるので、その場合は各々調整が必要です。bottomとボックスシャドウのY方向オフセットは同じサイズでよいかと。
.box {
position: relative;
width: 60%;
background: #ccc;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 2em 1.5em;
color: rgba(0,0,0, .8);
text-shadow: 0 1px 0 #fff;
line-height: 1.5;
margin: 60px auto;
text-align: center;
}
.box:before, .box:after{
z-index: -1;
position: absolute;
content: "";
bottom: 13px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 13px 10px rgba(0,0,0, 0.7);
-moz-box-shadow: 0 13px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 13px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.box:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
対応するブラウザに限られますが、紙をすこしめくった見せ方ができますね。
片方だけにかけることもできますし、画像を作る手間が省けるのでブラウザ次第ではおすすめですね。
IEはいけるのかな？？
Transform（変形）
上の例でもすこしでてきちゃいましたが、回転（rotate）のほかに、ゆがみ（skew）、拡大縮小（scale）、移動（translate）などがあります。
回転（rotate）
.sample6 {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
background: #ccc;
padding: 10px 20px;
width: 300px;
}
変形の基準点の変更
変形するときの基準点ですが、未指定の場合は要素の中心（50%、50%）になってます。
例えば、要素の右上を基準とする場合は、
.sample6origin {
-moz-transform-origin: 100% 0;
-webkit-transform-origin: 100% 0;
}
分かりますかね？一番薄いのが、親要素の背景で、二番目が基準点指定無し、一番濃いのが右上基準です。わかりにくくてすみません。無理に重ねるんじゃなかったと後々思いました。。。
ゆがみ（skew）：横方向のみ
.sample7x {
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
}
ゆがみ（skew）：縦方向のみ
.sample7y {
-webkit-transform: skew(0,-8deg);
-moz-transform: skew(0,-8deg);
}
ゆがみ（skew）：縦横両方
.sample7xy {
-webkit-transform: skew(-15deg,-8deg);
-moz-transform: skew(-15deg,-8deg);
}
拡大縮小（scale）
.sample8:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
}
単体で指定するときは、だいたいこんな感じですかね。
これらの組み合わせによりまだまだ表現できることがたくさんあるので、そのあたりはまた別の記事で書きます。