CSS Archive

CSS3でグラフを作る手法はList of CSS3 Graph and Chart Techniquesにあるように色々公開されているんだけども、
ソースで見ると意味不明だったりするものが多いんで
それならテーブルをグラフにしちゃえばいいじゃんと思って試してみたのがコレです。

CSSでTableを折れ線グラフに変える - jsdo.it - share JavaScript, HTML5 and CSS

作り方

• tableとその中身をdisplay:blockにする
• theadの要素でx軸とy軸のベースを作る
• trで各ポイントの基準になるx軸とy軸の線を描く
  • tr→x軸の線
  • tr:before→y軸の線
  • tr:after→y軸の数値
• thをx軸に配置
• tdでグラフの線を描く
  • td→線
  • :befor, :after→線両端の○

ベースと線に画像を使えばIEにも対応できるけど割愛。

表向き表示されないtrみたいな要素にも:beforeと:afterが使えます。
tableの要素はdisplay:tableとかになってるのでpositionを使うとおかしなことになるのですが
display:blockにしてしまえばdivと同じになるため、グラフを描くに必要な素材が不足する心配はありません。
この手法だと表とグラフ・グラフの種類を:targetやクラスの付与で切り替えたり出来るんで結構便利そうだと思いました。

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コンプ目指してまだまだ製作中！

Continue reading

去年イラレでクリスマス用のプレゼントボックスを描いたので、
じゃあ今年はCSSで描こうと思って実践してみたのがこれです。

CSS3 Xmas Gift Box - jsdo.it - share JavaScript, HTML5 and CSS

CSS3で立方体を表現するので有名なのはtransformによる3D Cubeですが

• CSS3 Cube
• Multiple 3D Cubes with animation using CSS
• Isocube

クォータービューより正面から見た立体の方が好きかな～と思ったので、台形で立体っぽくすべく
背景色と同じ色の:before、:after擬似要素を次のように被せて削ってます。

もっとごちゃごちゃとDivを使ったりJavaScriptを使ったりすればよりリアルな表現が出来そうだけど、
あんまりソースがスパゲッティになると美しくないので最低限必要なものだけにしといた。

アニメーションは当初フタが右方向に回転しながらパカッと開くのを想定してました。（ヘーベルハウスのﾊｰｲ!みたいな感じ）
これが実際やってみると擬似クラス要素にtransitionが効かないし、元々rotateしてある要素を改めて回転させるのが面倒だったので上方向にパカッとするので落ち着いた次第。

JAMのお題がボタンと聞いて思い浮かんだネタの中で一番汎用性ありそうだった自爆ボタンをMooTools用プラグインとして作ってみた。
勢いのままFirefoxでガッと組んだので他のブラウザは順次対応予定です…。
Webkitも見れるようにした。※Chromeはバグで角が四角くなる。

自爆ボタン - jsdo.it - share JavaScript, HTML5 and CSS

JavaScriptで要素を作成して制御、見た目は全てCSS。
Canvasじゃないのはその方がデザイン変えやすいかなと思ったのと、CSS3が使いたかったからです。
ストライプ部分にだけbase64化した画像使っています。

爆破までは　ピン上げる→カバー外す→ボタン押す　っていう流れです。
カバー外すとonReadyイベントを、ボタン押した時にonStartイベントが実行されます。

Continue reading

JavaScript版があるのでCSS版も書いておく。
この手法はマウスオーバー画像用意しなくていいから重宝する。

CSS3対応しているブラウザであれば、transitionプロパティでJavaScript版と同じようなフェーディング効果をつけることができる。
っていうサンプルだけじゃあれなので、クリック効果とアウトライン消しをつけてみた。

今の所transitionに対応してるのはWebkitだけなので、他はおまじないみたいなもんです。
なおCSS Tricksによると、-mozとか-webkitとかのブラウザ依存のプロパティよりも後に
CSS3の本来のプロパティを書いた方がいいらしい。

aをブロックかインラインブロックにして背景をつけておくと、マウスオーバーでちょっと色を変えたり出来る。

ちょっとひねったりもできる。