CSS3入門（ドットインストール）

CSS3

特徴：
-多彩な表現
-W3Cが策定中
-各ブラウザによって実装がまちまち。

知識：
html,css

範囲：
比較的ブラウザで実装が進んでいて、よく使われるもの。

#ベンダープレフィックス

各ブラウザが先行的に似たようなものを実装していることを示すもの
各ブラウザごとに異なる

##例

border-radius:5px;
-webkit-border-radius:5px;

##種類

-webkit- : chrome /safari
-moz- : firefox
-o- :opera
-ms- :ie

##対応状況
-caniuse.comで調べられる

#角丸をつける
border-radius:10px;
角に半径10pxの円が入っているということ

右上に角丸border-top-right-radius:30px;

##テクニック
border-radius:50%;で円のなる
background-image:url(‘image.jpg’);でバックに画像

#色の指定と透明化

##背景の透明化
-rgba
例）background-color:rgba(0, 0, 0, 0.7);

##要素全体の透明化

-opacity
例）opacity:0.3;

#ボックス要素に影をつける

box-shadow:水平方向のずらし　垂直方向のずらし　ぼかし具合　影の幅　色　内側にかげをつける（inset）,新たな指定;

例）box-shadow:10px 20px 5px 20px rgba(0, 0, 0, 0.3) inset,
5px 5px 5px red;

#テキストに影をつける
text-shadow box-shadowと同様に指定出来る

#線形グラデーション

以下はクロムへの対応（-webkit-）
●赤から青へのグラデーション
background:-webkit-linear-gradient(red, blue);

●赤から黃、黃から青へのグラーデーション（赤10px　黃90px）
background:-webkit-linear-gradient(red 10px, yellow 90px, blue);

●右からグラデーション
background:-webkit-linear-gradient( right red 10px, yellow 90px, blue);

●右上からデコレーション
background:-webkit-linear-gradient(right top red 10px, yellow 90px, blue);

●45°からデコレーション
background:-webkit-linear-gradient( 45deg red 10px, yellow 90px, blue);

#円形のグラデーション

●中心からグラデーション
background:-webkit-radial-gradient(red,blue);

●右上を中心
background:-webkit-radial-gradient(right top red,blue);

●色の割合も指定可能
background:-webkit-radial-gradient(red　10%,blue);

●起点も指定可能　（横　縦）
background:-webkit-radial-gradient(10px　10px,　red,　10%,blue);

●円形にする（circle）
background:-webkit-radial-gradient(10px　10px, circle,　red,　10%,blue);

● cover 円でいっぱいになるようにする
contain 必ず円が含まれるようにする

#要素の変形

transform:scale(1.2,1.5);
transform-origin:top left;
transform:scaleZ

移動　transform:translate(20px, 100px);
回転　transform:rotate(45deg);
傾き　transform:skew(45deg, 20deg);

#簡単なアニメーション

transition
アニメーションの対象 -property:all
アニメーションにかかる時間-duration:1s
開始と終了を滑らか（ease）-timing-function:ease;
開始までの時間-delay:2s

全部一緒に指定できる
transition:all 1s ease 2s;

#キーフレームでアニメーション
animation-name:
animation-duration:
animation-timing-function:
animation-delay:
animation-interation-count:
animation-direction:

animation: animationTest 5s ease 1s infinite normal alternate;

alternate:逆に戻る

@-webkit-keyframes animationTest{
0%{ width 50px; background: orange;}
50%{ width 50px; background: orange;}
100%{ width 50px; background: orange;}

#属性セレクタ
a[href^=“http”]{
color:yellow;
}

^ 前方一致
$後方一致
*部分一致

#n番目に来る要素
div p nth-child(odd){
color:red;
}

odd 奇数
even 偶数
3n　3の倍数

last-child
only-child

div p:nth-of-type(even){
color:red;
}

#要素の状態で指定するセレクタ

input[type=“text”]:enable{
border:1px solid red;
}
input[type=“radio”]:checked +label{
font-weight:bold;
}

#CSS3のジェネレーター

http://www.css3maker.com/
http://border-radius.com/
http://css3button.net/
http://www.colorzilla.com/gradient-editor/