CSS3

モバイル端末のブラウザ画面サイズとMedia Queries

2013/01/07 CSS No comments , , ,

Androidの画面サイズがピンキリ過ぎてカッとなったので真面目に調べてみた。
調べついでにメディアクエリーも書いてみた。

(さらに…)

20日目 : CSS Programming Advent Calendar 2012

2012/12/20 CSS No comments ,

CSS Programming Advent Calendar 2012の20日目
2週間ちょっとぶりにTenderfeelがお送りいたします。

さてみなさん。
ここにイラレのライブラリから適当に作ったリボンのデザインがあります。

リボンの例

(デ・∀・) 「このリボンは背景色と線色を変えられるようにしたいんだよね。できれば影も」

デザイナーがこんなこと言ってたらどうやって作りますか?

(さらに…)

Android 4.* で 画像がぼやける不具合について

2012/12/13 CSS No comments ,

最近はコーヒーを飲む回数より多くAndroid爆発しろと言ってる気がします。

Android4.xで画像という画像がぼやけまくるという怪現象があり、
シンプルな例を書いてみたらtranslateZが1つの原因のようでした。

translateZが親に指定されているだけでbackgroundだろうがborderだろうが画像が全部ぼやける。
空要素にbackground-image指定している場合は、要素に 入れておけばとりあえずはくっきりさせることは出来る。
imgはaltを入れてもtitleを入れても効果がない。

iScroll4を使うときは注意した方がいいです。
スクロールをスムーズにするためとかでtranslateZ使ってるから
スクロール要素内に入れた画像が全部ぼやけてしまう可能性があります。

ほかにもtranslateZ使うケースは結構あると思うんですけど、
もしAndroid4.x端末だけなんか画像がぼやけてるなーと思ったらtranslateZのせいということになるんじゃないかと思います。
ただtranslateZがかかってないところでもぼやけることがあったし、translateZやtranslate3dをつかっててもぼやけないこともあるので、ほかに起因がありそうです。
いい対策があればぜひおしえてください…

あー爆発すればいいのにAndroid。

もう一つ原因になりそうなもの
-webkit-backface-visibility:hidden を使うときは注意が必要です。

[css] CSS3時代の上下中央に配置するパターン

2012/12/06 CSS No comments

最近多用するので…。
(さらに…)

4日目 : CSS Programming Advent Calendar 2012

2012/12/04 CSS No comments , ,

CSS Programming Advent Calendar 2012の4日目
CSSエンジニアって肩書きもアリなんじゃないかと思っているTenderfeelです。

おいしいカレーの作り方を考えてたら無事にゲームができました。
どちらもステージは1つだけです。Chromeでしか動作確認してません。

(さらに…)