CSS Nite LP, Disk 9.2に参加しました。そのまとめ。

先週に引き続き、クリエイターのセミナーに積極的に参加しようプロジェクト（別名・脱ひきこもりプロジェクト）の推進として、本日はCSS Nite LP, Disk 9.2に参加しました。

内容はCSS3、HTML5、jQueryと、まさに今もっともアツイ技術を取り上げています。
HTML5＋CSS3＋JavaScript＋PHPの高みを（底辺から）目指す私としては、参加しないわけにはいかない内容です。

というわけで行ってきました。

せっかく同じ分野の仕事をしている方が山ほど集まっているというのに、こういうときに限って名刺を忘れてしまい、結局誰にも名刺を渡せずじまい。あぁほんまアホやで。。。ワイはほんまアホや。。。

関係ないけれど、名刺にTwitterのアカウント入れたほうがいいですね！
スピーカーの方たちがこぞってTwitterアカウントを紹介しているので、たぶんクリエイターの人は名刺にアカウントを記載している人多いのではないか？と思いました。ぜひうちの会社でも！

というわけで、セミナーで学んだことを実際に使ってみたいと思います。今回はCSS3編です。

【CSS3】

●CSS3はまだ各種ブラウザで実装状況が異なる。

非常にザックリまとめると下記。

◎アニメーションを含め大体なんでも出来るChrome。
○アニメーション以外は大体なんでも出来る safariとfirefox。
×ほぼなんにも出来ないIE。死んでください。

●各ブラウザごとに特別な指定をしてあげないと反映されない。
[css]
.demo {
border-radius: 5px; /* 通常 */
-webkit-border-radius: 5px;　/*-webkit-の部分。 Safari,Chrome */
-moz-border-radius: 5px; /* -moz-の部分。 Firefox */
}
[/css]

●角丸を簡単に作成
[css]
#border-radius {
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
}
[/css]

This is a test

●グラデーションを指定
[css]
.Linear_Gradients {
background: -moz-linear-gradient(top, #fff, #ddd); /* グラデの開始位置、開始色、終了色 */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));　/* グラデの開始位置XとY、グラデの終了位置XとY　、開始色、終了色 */
}
[/css]

This is a test

●応用：中間だけ別の色にグラデーションを指定
[css]
.Linear_Gradients {
background: -moz-linear-gradient(top, #ffffff, #ccc 50%, #fff );　/* 色と位置（％））を指定 */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.5, #ccc), to(#fff));　/* color-stopで位置（0.2など）と色を指定 */
}
[/css]

This is a test

●ボックスにドロップシャドウを指定
[css]
.box-shadow {
/* 横の位置、縦の位置、ぼかしの幅、色 */
box-shadow: #ddd 5px 5px 5px;
-moz-box-shadow: #ddd 2px 2px 5px;
-webkit-box-shadow: #ddd 5px 5px 5px;
}
[/css]

This is a test

●テキストにドロップシャドウを指定
[css]
.text-shadow {
/* 横の位置、縦の位置、ぼかしの幅、色 */
text-shadow: #fff -1px -1px 0px;
}
[/css]
ちょっとこの例だと微妙すぎてわからないけれど、そこに確かにかかっているのだよ！

This is a test

●グラデーションを透過。（※Firefoxでは反映されない）
[css]
.Linear_Gradients3 {
/* 透過を指定するには、RGBでグラデーションを指定し、最後に透過を指定する（0.5の部分） */
background: -moz-linear-gradient(top, rgba(100, 100, 100, 0.5), #fff);　
background: -webkit-gradient(linear, left top, left bottom, from(rgba(100, 100, 100, 0.5)), to(#fff));
}
[/css]

●傾ける
[css]
.transform {
transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
}
[/css]

This is a test

●アニメーション（シンプル）を指定する（※Chromeでしか反映されない）
[css]
.transition {
-webkit-transition-property: all;　/* アニメーションする対象 */
-webkit-transition-duration: 1s;　/* 秒数 */
-webkit-transition-timing-function: ease-in-out;　/* 動きの種類 */
}

.transition:hover {
/* ここで指定されたすべてがアニメーションで反映される */
-webkit-transform: rotateZ(-720deg);
-webkit-border-radius: 40px;
width:300px;
font-size:26px;
border: 2px solid #FFCF53;
}
[/css]

This is a test

●floatを使わずに横並び
[css]
.box {
display: -moz-box;　/* 横並びにするボックスの親に指定 */
display: -webkit-box;　/* 横並びにするボックスの親に指定 */
width:100%;
}

.p1 {
-moz-box-ordinal-group: 3;　/* 左からの順番 */
-webkit-box-ordinal-group: 3;　/* 左からの順番 */
width:100px;
background: #CCC;
min-height:100px;

}

.p2 {
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
width:50px;
background: #999;
min-height:200px;
}

.p3 {
background: #333;
min-height:120px;
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
-moz-box-flex: 1;　/* 余白の分だけ拡大する */
-webkit-box-flex: 1;　/* 余白の分だけ拡大する */
-moz-box-flex: 1;　/* 余白の分だけ拡大する */
-webkit-box-flex: 1;　/* 余白の分だけ拡大する */
}
[/css]

すばらしい。何がすばらしいって、アニメーション機能が実にすばらしい。それだけに、まだChromeでしか実装されていないのが悔やまれます。

ブラウザが完全にアニメーション機能を実装するまでにはまだ1年かそれ以上かかると思いますが、もし実装したらアニメーションはJavaScriptではなくCSS3で行うことが多くなりそうです。
そうするとJavaScriptの役割からは単純なアニメーションがなくなり、CSS3の制御やサーバーサイドスクリプトとの連携に特化しそうですね。

次はHTML5編です。あー早くJavaScriptとPHPをマスターしなければ。

あでぃおす。