front night vol1
TRANSCRIPT
表現と演出CSS3で実現する
@mattari_panda
今日はフロントエンド（マークアップエンジニア）の中級者向けということで、概念というより実践的な内容を話します。
もっといい方法を知ってる人がいらっしゃれば、あとでぜひ教えて下さい。
所属：株式会社コロプラ
：@mattari_panda
自己紹介
3月入社 前職はWebの受託制作 PC・スマートフォン サイト作ってました
書籍：CSS3デザインブック 仕事で絶対に使うプロのテクニック （ちょこっと）
もくじ✤WebアプリとWebサイトの違い
✤CSS3での表現
✤CSS3での演出
WebアプリとWebサイトの違い
弊社のWebアプリ秘宝探偵キャリー プロ野球PRIDE
弊社Webアプリの特徴
✤俗にいう「ハイブリッド型」
✤Android2.1~ iOS4.2~対応
✤ iTunes Store Google Playともに売上上位でございます
✤ブラウザの種類があんまりない
✤傾きを気にしないでよい
✤デザインが「アプリ」のもの
✤なによりユーザーは違い（ネイティブアプリとの）を意識しない
WebアプリとWebサイトの違い
HTML+CSS+JSでどこまでネイティブアプリに近い
「表現＆演出」ができるか
CSSへの期待度は高い
✤HTMLは文書構造。適切なタグを適切な量マークアップできるか結構重要
✤JavaScriptはあくまで「ひかえめ」に。PCほどパワフルに動かない
✤「表現＆演出」はCSSでがんばれるところまで、がんばろう
CSSのポイントは仕様の理解と
今までにない発想か？
CSS3での表現
backgroundおさらい
✤グラデーションはbackground-image
✤つまり複数配置OK
✤色指定もrgba()使えます
✤background-sizeでサイズ調整
✤ insetも頑張ればなんとか
Multipul Backgroundでいろいろ
http://jsdo.it/mattari_panda/zsas
詳しくは昨日のCodeGridで。
擬似要素::afterで「すごろく」を表現するhttp://jsdo.it/mattari_panda/y3nj
擬似要素::afterで「すごろく」を表現する
/* CSS --*/li{z-index:1;
}li>span::after{position:absolute;z-index:-1;
}
ポイントは重ね順「::after」要素は通常、要素の上にくるので子要素の擬似要素にし、z-index:-1;を設定。
グラデーションの袋文字
http://jsdo.it/mattari_panda/y3nj
グラデーションの袋文字
/* CSS --*/#hoge>span{-webkit-background-clip: text;-webkit-text-fill-color:transparent;background-image: linear-gradient();-webkit-text-stroke-width: 2px;-webkit-text-stroke-color: #f5e768;
}
注意点いくつかWebkit独自実装です、使用は自己責任で。
落とし穴もあるよ。
Web Fontとの併用でiOSにバグがあり、文字が二重に表示されます。
iOSの場合はtext-shadowで。
ここまでのまとめ
★CSS3の可能性はまだまだある
★柔軟な発想ができるかどうか
★仕様を理解して使う
CSS3での演出
CSSアニメーション
つかってますか？
Animationおさらい
✤transitionとanimationがある
✤transitionは単純なアニメ
✤animationは複雑なアニメ
✤スマホではとにかく軽量
✤でも落とし穴いっぱい
✤Androidでの巻き戻り
✤animation-fill-mode
✤ディレイさせたい時
Keyframe Animationの落とし穴連続したアニメーション
http://jsdo.it/mattari_panda/oPCb
Androidで最後のコマが終わった時に、元に戻ってしまう
Androidでの巻き戻り
最初と最後のコマの状態を制御
animation-fill-mode
http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property
/* CSS --*/#hoge{animation-fill-mode:none;/*default*/animation-fill-mode:fowards;animation-fill-mode:backwards;animation-fill-mode:both;
}
このアナログな手法結構つかえます。
今のところコレで頑張る
まとめ
★CSS3はこれからだけど、もう始まってる。発想の柔軟さを持とう。
★アニメーションも使えるけど大変
★まだいろいろあるけど、、、次回？
ご清聴ありがとうございました