気ままに綴る独学メモ帳
style.cssTextにベンダープレフィックス付きプロパティをセットする検証コードをWebkit系ブラウザで見ると、
戻り値はセットした値と同じベンダープレフィックス付きプロパティになります。
var el = document.getElementById('helloWorld');
el.innerHTML = 'Hello, World!';
el.style.cssText = '-webkit-animation:hoge;';
document.write(el.style.cssText);
IE10が出たそうで。
GALAXY Sなんとか端末の不具合っぷりは異常だぜ。
ゲージ作ってるとき発見した不具合（？）
CSS Programming Advent Calendar 2012の20日目の記事でCSS Maskingについて書きました。
その中でAndroidには不具合があるんだよね…っていうのを最後の方で紹介したとき、
参考としてリンクしていたのは@mattari_pandaさんが書いた Android4でmask-imageとアニメーションを同時に設定するとマスクしなくなる というデモでした。
でもよく調べてみたらそれだけじゃなかったんです。
Androidの画面サイズがピンキリ過ぎてｶｯとなったので真面目に調べてみた。
調べついでにメディアクエリーも書いてみた。
CSS Programming Advent Calendar 2012の20日目
2週間ちょっとぶりにTenderfeelがお送りいたします。
さてみなさん。
ここにイラレのライブラリから適当に作ったリボンのデザインがあります。
(デ・∀・) 「このリボンは背景色と線色を変えられるようにしたいんだよね。できれば影も」
デザイナーがこんなこと言ってたらどうやって作りますか？
最近はコーヒーを飲む回数より多くAndroid爆発しろと言ってる気がします。 Android4.xで画像という画像がぼやけまくるという怪現象があり、 シンプルな例を書いてみたらtranslateZが１つの原因のようでした … 続きを読む
最近多用するので…。
CSS Programming Advent Calendar 2012の4日目
CSSエンジニアって肩書きもアリなんじゃないかと思っているTenderfeelです。
おいしいカレーの作り方を考えてたら無事にゲームができました。
どちらもステージは１つだけです。Chromeでしか動作確認してません。
gradientは背景にグラデーションを設定できるプロパティです。ってさらりと書いてあった記事がTLにあって、 えー確かアレにも使えたはず…と思ってテストしてみるに至ったんだけど、 ジェネレーターでbackgroundの … 続きを読む
CompassのCSS3モジュールでは
transitionsのmixinがあるのにanimationsはないので
-mozとかのプレフィックスが欲しい時にはexperimentalを使うしか無い感じ。
@include experimental(animation-name, sample); //アニメーション名
@include experimental(animation-duration, 1s); //実行時間
@include experimental(animation-iteration-count, 1); //実行回数(number | infinite)
@include experimental(animation-direction, normal); //反復の有無(normal | alternate)
@include experimental(animation-delay, 0s); //実行までの待ち時間
@include experimental(animation-fill-mode, both);//実行前や実行後のスタイル指定(none | forwards | backwards | both)
@include experimental(animation-timing-function, linear);//タイミング(ease | liner | ease-in | ease-out | ease-in-out | cubic-bezier)
@include experimental(animation-play-state, running); //実行状態(running | paused) *削除検討中のプロパティ
transformを参考にまとめたmixin
//再生時間
$default-animation-duration : 0.5s !default;
//実行までの待ち時間
$default-animation-delay : 0 !default;
//実行回数(number | infinite)
$default-animation-iteration-count: 1 !default;
//タイミング(ease | liner | ease-in | ease-out | ease-in-out | cubic-bezier)
$default-animation-timing-function: ease !default;
//反復の有無(normal | alternate)
$default-animation-direction: normal !default;
//実行前や実行後のスタイル指定(none | forwards | backwards | both)
$default-animation-fill-mode: both !default;
@mixin animation (
$name :false,
$duration :$default-animation-duration,
$delay :$default-animation-delay,
$count :$default-animation-count,
$function :$default-animation-timing-function,
$direction:$default-animation-direction,
$fillMode :$default-animation-fill-mode
){
@if $name {
@include experimental(animation-name, $name);
}
@include experimental(animation-duration, $duration);
@include experimental(animation-delay, $delay);
@include experimental(animation-iteration-count, $count); //実行回数(number | infinite)
@include experimental(animation-timing-function, $function);
@include experimental(animation-direction, $direction); //反復の有無(normal | alternate)
@include experimental(animation-fill-mode, $fillMode);//実行前や実行後のスタイル指定(none | forwards | backwards | both)
}
スマートフォンのRetinaディスプレイだとPCでくっきり見えてる画像がぼやけてしまう件。
500px × 300pxの画像をRetinaディスプレイでくっきりさせたいなら
1000px × 600pxの画像を作成してサイズを50%に指定すれば良い。
その方法を以下に列挙する。
Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか
スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！
特に明記がないものはすべてWebkitについてです。
見つけ次第順次追加予定。
タイトル変更、増えてきたので目次追加しました。
この記事はiOS5、Android 3以前について記載したものです
CSS3でグラフを作る手法はList of CSS3 Graph and Chart Techniquesにあるように色々公開されているんだけども、 ソースで見ると意味不明だったりするものが多いんで それならテーブルをグ … 続きを読む
3/1の夕方、jsdo.itの公式アカウントが大っぴらに誘い受けしてた。
その昔、マクパペットをフルカスタムしたり…
あの楽器を再現したり…
あの楽器 (Firefox4 only) – jsdo.it – share JavaScript, HTML5 and CSS
…した過去があるのでつい反応。
したらすかさず煽られた。
…………CSS3に不可能はない！！
心の中で啖呵を切った。そして釣られた事に気付いた午後６時。
ぶわっと頭の中に広がったのはCSSなはちゅねを-webkit-animationでネギ振らせる映像だったのだけども、
前記事で紹介したjsdo.piggという素晴らしい素体をみっくみくにしてやることに決めたら後は早かった。
※Webkit以外だと残念なミクさんになってしまうので実行画面はChromeかSafariで見てね！
（IE6-8で見るのはダメ！絶対！）
jsdo.miku forked from: jsdo.pigg – jsdo.it – share JavaScript, HTML5 and CSS
ブラウザ起動するのﾏﾝﾄﾞｸｾという人の為の画像はこちら。（左はノーマル素体）
我ながら変態なソースだなと思いました。だがそれがいい。
髪や服やネギは同色で作った擬似要素を重ねてあの形にしています。
はちゅね化したときのほっぺ渦巻きはborder-radiusで円にしたborderだけの要素を擬似要素加えて３つ繋げて描いてます。
同じくはちゅね化した時の口はborderで作った台形を2枚重ねてます。
あと足の絶対領域や脇もちゃんとありますので目を凝らしてチェックして貰えるとありがたい。
CSSだけで絵を書くのは図形を上手いこと作る事がポイントなんですけど、パターンさえ覚えてしまえばそう難しくないです。
CSS3でつくれる形いろいろ。 や The Shapes of CSSを見れば一目瞭然。
幾何学図形を重ねる手法はForza2のペイントカーと通じるものがあるので、痛車職人と同じ位変態になればkei版ミクの再現も出来るんじゃないかなぁと思ってみたり。
来る3/9に向けて、他のユーザーやWonderflもみっくみくにされるよう呪っておきます 😀
ミクの日終わったけどVOCALOIDコンプ目指してまだまだ製作中！
jsdo.itで今診断テスト作ったら来月末ごろに3DS当たるかもよキャンペーンやってますよ。 それはそれで熱いんですが、私の中でいまブームになってるのは GeckoTangさんが作ったjsdo.piggのfork祭り（勝 … 続きを読む
プレゼント貰えないから贈る側になろうかなーなんて。お金の掛からないCSS3でプレゼントを作ってみたよ。
まだ私も良く分かってないので調べながらメモっていくつもりで。
1.3がでたので1.2で書いたプラグインもバージョンうｐしなきゃ！と思っても慌てる必要はnothing！
下位互換機能がついたCore（width Compatibilityなやつ）を選べば共存出来る。
セレクタエンジンSlickはMooToolsのファミリープロジェクト。だってお。
1.3でCoreに内臓されてCSSのセレクタを使用したDOM操作がパワーアップ。
1.2.xで要素を作るときのソース：
new Element("div", {"id": "mootools", "class": "moo cow","title":"Sample", "text":"MooTools!"});
Slickで書くとこうなる:
new Element("div#mootools.moo.cow[title=Sample]");
Result:
<div id="mootools" title="Sample" class="moo cow">MooTools?</div>
ZenCodingみたいな感じだけど作れる要素は１つだけです。
１行で済むのは楽っちゃ楽だけどOOPライクな前者の方が見やすくて好きだな。
JAMのお題がボタンと聞いて思い浮かんだネタの中で一番汎用性ありそうだった自爆ボタンをMooTools用プラグインとして作ってみた。
勢いのままFirefoxでガッと組んだので他のブラウザは順次対応予定です…。
Webkitも見れるようにした。※Chromeはバグで角が四角くなる。
自爆ボタン – jsdo.it – share JavaScript, HTML5 and CSS
JavaScriptで要素を作成して制御、見た目は全てCSS。
Canvasじゃないのはその方がデザイン変えやすいかなと思ったのと、CSS3が使いたかったからです。
ストライプ部分にだけbase64化した画像使っています。
爆破までは ピン上げる→カバー外す→ボタン押す っていう流れです。
カバー外すとonReadyイベントを、ボタン押した時にonStartイベントが実行されます。