web shocker : css3の3D Transforms


制作会社のiPhone向けサイト。画面の切り替え演出に力が入っています。
worksのページ切り替えでは左右へのスライドアニメーション。そして各事例に
移動するときはcss3の3D Transformsを利用したフリップの演出。
※pcでもsafariやchromeで閲覧可能です。
 
参考サイト:くるくるフリップを CSS 3 で作る実験
 
 
 

モーグリのツイートキャッチ


 
GIGAZINEさんの記事より。
HTMLのCANVASやSVGなどを利用して作成された「モーグリのツイートキャッチ」
の紹介記事です。IE9でなくてもHTML5に対応しているブラウザなら閲覧できます。
とはいえ私はtwitterをやっていないので、コンテンツを楽しむことはできなかった
のですが…。
 
 
 

CSS3:始めの一歩

今回もwebデザイニング2011.11月号の特集を自分なりにまとめてみました。

IEは8以前のバージョンではCSS3はほとんど利用できない
html5と同様にIEは8以前はほとんど対応していないらしい。やはりPCサイトで
html5&CSS3でサイトを作成するのは慎重にすべき。その代わりスマートフォン
のブラウザではかなり対応しているので、スマートフォンサイトで慣らしていく
のが良さそうです。

 

・リセットcss

webデザイニングの記事では、どの様にすべきかの記載はなかった。なのでネットで検索。
スマートフォンサイトにも配慮されているということで、以下のサイトで紹介されている
Normalize.cssがよさげな感じです。これにはwebデザイニングの記事で説明のあった
html5の新タグをブロック化する設定も含まれています。
参考サイト:よさげなリセットCSS Normalize.cssを適当に日本語にしました
 
 
 

・ベンダープリフィックス

現在は概ねcss3の仕様が確定したけれど、確定していない頃はブラウザのベンダーごとに
実験的に対応していた。その名残がベンダープリフィックス。つまり古いブラウザに対応する
ためには付けておいた方が無難。
 
対応状況を確認するのは、以下の「when can I use」が便利。
when can I use
 
例えば角丸の設定で、どのブラウザがベンダープリフィックスが必要か分かります。
例:iOS3では-webkit-が必要だけど、iOS4では必要ない
CSS3 Border-radius (rounded corners)
 
またベンダープリフィックスの設定をサポートしてくれる情報があったので紹介。
最初のリンクは、web上でベンダープリフィックスの設定を追加してくれるwebコンテンツの紹介
次のリンクはjavaScriptを組み込んで動的に追加するライブラリです。
面倒なCSS3のベンダープレフィックスを自動で付けてくれる -prefixMyCSS
CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js
 
 
 

・CSS TransitionとCSS Animation

javaScriptを利用しなくても動的な演出ができる。しかし現時点では対応ブラウザが少ないため
jQueryを利用した方が無難だと思う。ただしスマートフォンの一部機種ではcssのアニメの方が
動作が速い(web designing 2011.12の記事より)。
 
 
おしまい