予告通り、このチャートをSVGで書き直しました。 前バージョンとは違って、マウスオーバーするとTooltipが出て数字がわかるようになりました。 作ってみた感想: グラフはSVGで作ったほうがいい。但しcanvasより面倒。 SVGで円弧を描くのはなかなか大変。。。…

ドーナツ型チャートに特化したjQueryプラグインを試しに組んでみました。 Chart.jsのソースを大いに参考にさせてもらいました。 (Chart.jsは読みやすくてお勧めです)・初期段階でドーナツ状のグラフが通るレールを予め描画するようにした。 ・色つきグラフ部…

CSSだけで頑張るシリーズ、アニメーションボタン編 Part2http://www.oregongridiron.com/ ←このサイトのボタンがかっこよかったので どうやってるか調べて自分なりに実装しなおしてみた。かっこいいエフェクトができるけど、html側で必要なタグが多い。。。

CSSだけで頑張るシリーズ、 アニメーションするボタンに挑戦中。 マウスオーバーでアニメーションします。 ボタンだけだとつまんないのでぼかした画像＋図形パターンという最近の 流行デザインの背景もつけてみた。transformだけでいろんな表現ができること…

背景を透けて見せる等ができる透過PNGを、canvasで作成できる(グラデーションアルファマスクを作る)jQueryプラグイン作った。透過PNGはRGB+Alphaチャンネルなので、今回みたいに写真の透過PNGだと 普通にサイズが1M近くになっちゃう。でもデザインの都合上透…

Retina(に限らず高解像度)用の画像を背景画像として書き出すとき、 今までは全部手作業でやってたんだけども、 高解像度向けの@mediaのベストプラクティスが日々変化(進化)するので、毎回grepして修正するのが面倒。 @mediaの記述位置はCSSの末尾にまとめて…

CSSだけで頑張るシリーズ、今回はradioボタンに挑戦。FirefoxでもIE10でも非対応なので、完全にスマホ用です。 といってもプロダクションで使うのはまだ気が引けますね。 これをベースにfallbackをきちんと作れば、何とかいけるかもってレベル。。。iOS6, An…

結論から。 iOS6から可能になった、ファイルをアップロードするinput type="file"ですが、 表題にもあるように、PNGを送信する前に強制的にjpegに変換されてから送信されるようです。今のところ解決策は見つかっていません。 ※iOS7は未確認。解決してるとい…

PC向けだけに作製していた画面を、 スマホ向けに修正していた時にぶち当たった問題。 解決したので共有します。Android2.Xでだけ、JavaScriptの特定の行でParseErrorが起こって、 それ以降のスクリプトが読み込まれないという現象が。。8/2発表の最新の統計…

# 2014.8.25 重要な追記 このハックは、今年4月あたり(FirefoxNightly 31?)から効かなくなってます。。 元記事 https://gist.github.com/joaocunha/6273016 でも、どうするよ的な議論＆試行錯誤が交わされていますが、:-moz-any(hoge):before プロパティを使…

最近CSS3を使っていろいろ試行錯誤してるけど、 そのうちの一つを放出。

Canvasの勉強をしたかったので、以下のコードを参考に、 雪が降ってるっぽい表現を作ってみました。 http://thecodeplayer.com/walkthrough/html5-canvas-experiment-a-cool-flame-fire-effect-using-particles要するに、canvasで １：画面をすべて黒く塗り…