CSS3入門 #CSS3

URL

内容

01 CSS3とはなにか

特徴
- 多彩な色の表現
- W3Cが策定中なので、標準化されてない。
- 各ブラウザが先走って対応しているので、ブラウザによって実装が異なる。

02 ベンダプレフィックス

border-radius: 5px;

これは、chrome, safariでは

-webkit-border-radius: 5px;

firefoxでは

-moz-border-radius: 5px;

operaでは

-o-border-radius: 5px;

ieでは

-ms-border-radius: 5px;

↓を使うと、使用するオプションが、ベンダプレフィックスを使わなくても使えるかどうか分かる。

Can I use... Support tables for HTML5, CSS3, etc

03 角丸をつけてみよう

border-radius: 10px;

border-top-right: 10px;

04 角丸を使ったテクニック

border-radius: 50%;

とすると、円になります。

border-radius: 50%;
background-iamge: url(~~~~);

とかすると、画像の切り抜きができるわっしょい

05 色の指定と透明化

いままでは
css background-color: #ff0000
とかって指定できたけど、css3では

rgba(0,0,0,0.7);

aは透明度

opacity: 0.4;

とかすると、要素の透明度を指定できる

06 ボックス要素に影をつけてみよう

box-shadow: x座標px y座標px ぼかしの大きさpx rgba(0,1,2,0.3) inset(内側に影);

また , 区切りで複数影の指定できる

07 テキストに影をつけてみよう

text-shadow: 5px 5px 3px 3px

08 線形グラデーションをつけてみよう

backgournd: linear-gradient(開始色 10%, 中間色20%, 最終色)
backgournd: linear-gradient(開始位置(right, 45degなど)開始色 10%, 最終色)

※IE非対応、ベンダプレフィックス必須

09 円形グラデーションをつけてみよう

radial-gradient(座標(top right, 10px 10pxなど), circle, 開始色, 終了色)

10 要素を変形させてみよう(1)

transform: scale(横方向, 縦方向)// 拡大縮小
transform: scaleZ(横方向)// Z方向に拡大
transform: scale3d(x,y,z)// Z方向に拡大
transform-origin:0 0 // 拡大縮小起点

11 要素を変形させてみよう (2)

transform: transrate(x, y); //移動
transform: rotate(45deg); //回転
transform: skew(34deg); //傾斜

12 簡単なアニメーションをつけてみよう

transition-propaty: all //アニメーションの対象になるもの(heightとか普通はall)
transition-duration: 1s // アニメーションにかかる時間
transition-timing-function: ease /*linear, ease-in, ease-out,ease-in-out*/
transition-delay: 2s; // 何秒後に実行するか

これらはtransitionでまとめて実行できるよ

時間が2つ出てきたら最初にdurationとみなす

13, 14 キーフレームでアニメーション (1)

animation-name: animationの名前
animation-duration: アニメーションにかかる時間
animation-timing-function: アニメーションの種類
animation-delay: アニメーション開始の時間
animation-iteration-count: アニメーションの繰り返し指定
animation-direction: normal(フツーにアニメーション), alternate(アニメーションのあと逆に戻る)

@-webkit-keyframes animationTest {
0% {width 50px;}
50% {widht: 100px;}
100% {width: 200px;}
}

15 属性セレクタを使ってみよう

a[href="http://google.com"]

これは

a[href^="http"]  //先頭一致
a[href$="com"]   //末尾一致
a[href*="google.com"] // 文中一致

というように、ワイルドカードで書けたりする。

16 n番目に来る要素を指定する

/* nth-child */

div p:nth-child(2) {
}

div要素内の2番目の要素がp要素だった場合、適応される。

odd, evenで偶数、奇数が指定できる。

また、(3n)とか(3n+1)なんてこともできる。

最初と最後を指定する場合は

div p:first-child {
}
div p:last-child {
}

一つだけの要素に適用したい場合は
css3 div p:only-child { }

とする。

17 ある要素のうち、n番目に来る要素

nth-of-type: 要素を指定して何番目、という指定が可能

div p:nth-of-type(2)

これは、p要素のみをカウントして指定できる。

div p:first-of-type

最初のp要素に対して指定

div p:last-of-type

最期のp要素に対して指定

div p:only-of-type

p要素が一つだけの場合適応

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

disabledに対して

input[type="text"]:disabled {

}

enabled ``` input[type="text"]:enabled {

}
```

checked
input[type="text"]:checked + label { }
は同列の要素を指定
この場合、ラジオボタンのチェックの入った同列のlabel要素に対して指定する

19 CSS3のジェネレータを見てみよう

css3 3.0 Maker
border-radius.com
CSS Button Generator
colorzilla/gradient-editor