🍃このブログは移転しました。
3秒後、自動的に移動します・・・。

CSS3

最近のoverflow: scroll事情

もちろんモバイル情報です。iOS4やらAndroid2.x時代にはまったく使い物にならなかったこの指定、 最近はどうなの?っていう。

Autoprefixerでdisplay: boxしたい

けどできないってことでいいのかしら。 20150213: 追記 できないと思ってた時期が私にもありました。 ちゃんと設定すれば、できます。

$.fn.fadeIn(fn)をCSSアニメでやる

最初は便利かなーと思ったのですが、使い勝手はイマイチでした・・。 まあ一応書いたので、メモっとこうと。

CssとJavaScriptでつくるゲージのUI

ほぼ仕事用のメモになるけど・・。

Android 2.x系でのCss3アニメーション

なんか動いたり動かなかったり動かなかったり・・・。 動いたかと思えば一見まったく関係なさそうなとこがご乱心なさったり・・。 コレがWeb業界に生きるということか! というわけで、keyframeアニメーションの指定の際に、気をつけたい点と、アンチパター…

iOSなどでアニメーションさせるとチラつく

いったい何度同じ過ちを繰り返せば気が済むんだという感じになったのでメモ。 スマートフォンで要素の拡大・縮小やら移動やらするときに気をつけたいのは以下。 GPUアクセラレータが効く方法を選ぶ アニメーションさせる要素数を厳選する Defferdなど、時と…

display: noneはtransitionできないので

参考:css - Transitions on the display: property - Stack Overflow そのへんで拾ったアコーディオンのライブラリとかでよく見るやつ。 もはやマークアップあるあるですよね。displayじゃダメなので、他のプロパティで攻めましょう、っていう。 transition…

Androidの一部端末では、border-radiusで%(パーセント)指定ができない

px指定だと普通に効いてくれます。直接出くわしたパターンは、before/after疑似要素に対しての指定やったけど、おそらく普通の要素に対しても効かないと思われる。 .circle { width: 100px; height: 100px; border-radius: 50% /* <-効かない! */ } Q. 50%…

AndroidでCssのアニメーションが消えることがある

既知の不具合かどうかもわかりませんが、少なくとも実体験です。 一応、参考までに。 Androidの2.x系です。←うろ覚え ソース なんてことのないブリンクをCssのアニメーションで実装しました。 .blink { -webkit-animation-name: blink; -webkit-animation-du…

引っ張って更新のUIサンプル

突っ込みどころ満載だとは思いますが、誰かしらの参考になるなら・・・。 コードは以下から 結果的にPC向けではないので、ご自分の環境に持ってきて動かすのが良いかも・・? 気づいたこととか だいたい↑のコードのRead Meに書いたけども。 やっぱ実際に何か…

Html5, Css3関連で最近知ったことのメモ

取り留めもないけれども一応メモメモ。 新しい発見は楽しいんやけど、知らないことが多すぎていかんね! 参考:Events and responding to the user demos classList API 参考:HTML5 classList API jQueryでやってたtoggleClassとかがネイティブのAPIになる…

第3回くらいYokohama.jsの課題やってみた

こういう勉強会にいつかは行ってみたいと思いつつ、こんなぺーぺーがなぁ・・とか思って家でTLやらを追ってばかり。今回も、 今日の→ bit.ly/yjs20120805 #yjs20120805— Yokohamaさん (@yokohamajs) 8月 5, 2012 こんなのが流れてきたので、やってみました。…

スマートフォンサイトをコーディングする時の注意など

はてさて、無事に転職しまして、こういうことをやるようになりました。 今までも知識レベルでは持ってたつもりですが、いざやるのはまた勝手が違うわけで。 まだ全然周りも見えてないですが、個人的に気付いた点などをメモ。