元ネタ

• HTML5のCanvasとJavaScriptで電光掲示板のアニメーションを表現する

これおもしろいなーと思って、でもすごい重くて・・・ｗよくよく考えたらみんな大好きmarqueeタグとCSS3のlinear-gradient使えばできるよねとか思ってやったらめっちゃ簡単だった。iPhoneとかでも見れるよ。IEはしらん

↓ サンプル

• Electronic Billboard in CSS3 and marquee

HTML

HTMLは超絶シンプル

【横須賀線 遅延】

CSS

CSSはほぼlinear-gradient。背景にlinear-gradientで格子状になるよう縦横敷き詰めた擬似要素をmarqueeの上にwidth, height広げて被せる形で

marquee {
  position: relative;
  color: #ffab00;
  background-color: #0a0600;
  font-size: 40px;
}
marquee:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(#0a0600 1px, transparent 0px),
    linear-gradient(0, #0a0600 1px, transparent 1px);
  background-image: -webkit-linear-gradient(#0a0600 1px, transparent 0px),
    -webkit-linear-gradient(0, #0a0600 1px, transparent 1px);
  background-image: -moz-linear-gradient(#0a0600 1px, transparent 0px),
    -moz-linear-gradient(0, #0a0600 1px, transparent 1px);
  background-image: -o-linear-gradient(#0a0600 1px, transparent 0px),
    -o-linear-gradient(0, #0a0600 1px, transparent 1px);
  background-image: -ms-linear-gradient(#0a0600 1px, transparent 0px),
    -ms-linear-gradient(0, #0a0600 1px, transparent 1px);
  background-size: 2px 2px, 2px 2px;
  z-index: 10;
}

IEでも見たかったら:afterやめてdivかなんかにして、linear-gradientも背景画像repeatでできるよね。:afterはやめなくてもいいけど

ところでCSS3 marqueeがなんとなくあるけど、OperaとWebkitだけだし、書き方面倒くさそうだからやめた

jsdo.itにforkしたやつ置いたのでよければ Fork me on jsdo.it

forked: HTML5のCanvasとJSで電光掲示板 – jsdo.it – share JavaScript, HTML5 and CSS

追記：なんかやっぱり一部環境で重くなるときがあるらしい

CSS Transitions Module Level 3ではCSSプロパティの数値を変化させ、その結果アニメーションなどの効果を表現することができますが、iOSなどの非力なモバイル端末ではどうしてもカクカクしてしまう場合が多いです。

特に要素の位置を動かすなどの処理はコストが高く、よくカクカクするというか、スムーズにアニメーションしてくれないときが多いです。

iOSではCSS3によるGPUアクセラレーターの利用ができ、GPUアクセラレーターをONにすると、今までカクカクしていたCSSによるアニメーション効果もかなりスムーズになります。

基本的には3D処理をさせている場合に有効になりますが、GPUアクセラレーターによるアニメーション処理を行う際、プロパティの指定方法によってはiOSでチラつくことがありまして、、このチラつきはGPUアクセラレーターのON/OFFが切り替わったタイミングで発生しているようで、GPUアクセラレーターを利用したい場合は、常に3D処理をさせる（常にONにしておく）のがよさそうです。

3D処理のスイッチ（便宜上スイッチと呼びますが）については@さんのハマログに書かれてる以下の記述でも出来るのですが

target { -webkit-transform: translate3d(0, 0, 0); }

transformプロパティを使いたくない場合もあるので、transformプロパティを利用しない方法として

target { -webkit-transform-style: preserve-3d; }

このようにtransform-styleにpreserve-3dを指定すると、その要素のアニメーション処理にはGPUアクセラレーターが利用されるようになります。

指摘もらったので追記、ちょっとわかりにくかったかも

transform-style: preserve-3d はGPUアクセラレーターをONにするためのプロパティではありません。3D処理を行うと指定すると、iOSでGPUアクセラレーターがONになるというだけです。

http://dev.w3.org/csswg/css3-3d-transforms/#transform-style-property

CSSでフォントサイズの指定って何でしてますか？っていうのは何年も前からある話題で最近は全然見ないですけど、特にそういう議論をしたいわけじゃなくて。

僕はYUI 3のCSS Fontsを使っていますが、%指定になるので実際何pxになるのかCSSだけでは分かりにくいときもあるので、共通CSSに下記のようなコメントでpx対応テーブルを書いておくとすぐに指定できてわかりやすいと思いますが、皆さんどうしてますか？

Read more

Mac限定なんですけど、カスタムチャットスタイルを作って応募すればMacBook AirとかiPadとかもらえるで！っていう内容です。

Read more

「CSS3でつくるローディングアイコン」っていうのを何も考えずに作ったんですけど、同じこと考える人なんかたくさんいるので、1年くらい前から色々存在してました・・・でもせっかくつくったので、もうありますけど、公開しておきます。

くるくる と ぼいんぼいん

あ、せっかくなのでCSS3アニメーションをおさらいしましょう！（今おもいついたから強引につかったとこだけ）

Read more