[CSS3] Androidのmask-imageに関する不具合について

CSS Programming Advent Calendar 2012の20日目の記事でCSS Maskingについて書きました。
その中でAndroidには不具合があるんだよね…っていうのを最後の方で紹介したとき、
参考としてリンクしていたのは@mattari_pandaさんが書いた Android4でmask-imageとアニメーションを同時に設定するとマスクしなくなる というデモでした。
でもよく調べてみたらそれだけじゃなかったんです。

“[CSS3] Androidのmask-imageに関する不具合について” の続きを読む

20日目 : CSS Programming Advent Calendar 2012

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

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

リボンの例

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

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

“20日目 : CSS Programming Advent Calendar 2012” の続きを読む

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

最近はコーヒーを飲む回数より多く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 を使うときは注意が必要です。

9日目:CSS Preprocessor Advent Calendar 2012

CSS Preprocessor Advent Calendar 2012の9日目です。

今年の8月にSassの神バージョンアップがあった勢いでレポートを書いたんです。
社内にSass使い増えるといいなーと思って書いてはみたものの、とにかく使い勝手が悪い。
長文過ぎて見づらかったのでカッとなってWebサイト化しました。

Sassオレオレリファレンス

加筆し過ぎて序盤しか出来てないんですが、後は追々書いていくつもりです。

明日はTakatsudoさんです!
“9日目:CSS Preprocessor Advent Calendar 2012” の続きを読む

4日目 : CSS Programming Advent Calendar 2012

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

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

“4日目 : CSS Programming Advent Calendar 2012” の続きを読む

[Compass] 超訳 Configuration Reference

CSSのメタ言語、Sassベースで作られた便利なフレームワーク、それがCompass。

Compassの設定ファイルはRubyファイルです。
これはRubyを知っていれば色々なことが出来るということなんですが、逆にRubyを知らないと取っつきにくさがあると思います。
それで損をしてしまうのはあまりに勿体無いので、オレオレリファレンスを書いてみました!

※この記事は完全な和訳ではありません。

公式 Configuration Reference

“[Compass] 超訳 Configuration Reference” の続きを読む

[CSS3] gradient が使えるところ

gradientは背景にグラデーションを設定できるプロパティです。ってさらりと書いてあった記事がTLにあって、
えー確かアレにも使えたはず…と思ってテストしてみるに至ったんだけど、
ジェネレーターでbackgroundの指定しか出来なかったりとかするから以外とそう認識してる人多いのかも?

まあでも色々考慮するとbackgroundくらいしか使い所なさそーな感じなんで、当たらずしも遠からずなんですけど、
gradientはbackgroundに限らず、なんちゃら-imageというプロパティに使えるのを覚えておきたい。

  • background-image
  • border-image
  • mask-image
  • list-style-image
  • content

list-style-imageに使った場合はデフォで1emの四角になるらしい。
以外に穴なのがcontentプロパティで、urlで画像指定するのと同じ要領で使えたりする。
contentにgradientぶちこんでどうするのって感じですけどもw
CSSでお絵かきするくらい複雑な何かをするときには使えるんじゃないかなと思います。
他にもあったら教えて( ゚д゚)ホスィ…

transformsは該当要素に「傾き」を設定できるプロパティというのも含めて、「えーちがうよちがうよ」って反論出来たら中級者ってことだったらすみません。