【初音ミク】 フルCSSでみくみくにしてあげる♪ 【してやんよ】

3/1の夕方、jsdo.itの公式アカウントが大っぴらに誘い受けしてた。

そういえば3/9はミクの日だな~ (゚ω`)チラッ 3/9はミクの日だよなあ~(゚ω`)チラッ

その昔、マクパペットをフルカスタムしたり…

あの楽器を再現したり…

あの楽器 (Firefox4 only) – jsdo.it – share JavaScript, HTML5 and CSS

…した過去があるのでつい反応。

CSSで初音ミク祭りですね分かります

したらすかさず煽られた。

いや〜いくらCSS3がスゴイとはいえ初音ミクは難しいですよねえ?(゚ω`)チラッ

…………CSS3に不可能はない!!

心の中で啖呵を切った。そして釣られた事に気付いた午後6時。
ぶわっと頭の中に広がったのはCSSなはちゅねを-webkit-animationでネギ振らせる映像だったのだけども、
前記事で紹介したjsdo.piggという素晴らしい素体をみっくみくにしてやることに決めたら後は早かった。

※Webkit以外だと残念なミクさんになってしまうので実行画面はChromeかSafariで見てね!
(IE6-8で見るのはダメ!絶対!)

jsdo.miku forked from: jsdo.pigg – jsdo.it – share JavaScript, HTML5 and CSS

ブラウザ起動するのマンドクセという人の為の画像はこちら。(左はノーマル素体)

jsdo-miku はちゅねミク

我ながら変態なソースだなと思いました。だがそれがいい。

髪や服やネギは同色で作った擬似要素を重ねてあの形にしています。
はちゅね化したときのほっぺ渦巻きはborder-radiusで円にしたborderだけの要素を擬似要素加えて3つ繋げて描いてます。
同じくはちゅね化した時の口はborderで作った台形を2枚重ねてます。
あと足の絶対領域や脇もちゃんとありますので目を凝らしてチェックして貰えるとありがたい。

CSSだけで絵を書くのは図形を上手いこと作る事がポイントなんですけど、パターンさえ覚えてしまえばそう難しくないです。
CSS3でつくれる形いろいろ。 や The Shapes of CSSを見れば一目瞭然。
幾何学図形を重ねる手法はForza2のペイントカーと通じるものがあるので、痛車職人と同じ位変態になればkei版ミクの再現も出来るんじゃないかなぁと思ってみたり。

来る3/9に向けて、他のユーザーやWonderflもみっくみくにされるよう呪っておきます 😀

ミクの日終わったけどVOCALOIDコンプ目指してまだまだ製作中!

“【初音ミク】 フルCSSでみくみくにしてあげる♪ 【してやんよ】” の続きを読む

[CSS3+jQuery] 画像なしでどこまで作れるのか?の限界に(forkして)挑戦 – jsdo.pigg

jsdo.itで今診断テスト作ったら来月末ごろに3DS当たるかもよキャンペーンやってますよ。

それはそれで熱いんですが、私の中でいまブームになってるのは
GeckoTangさんが作ったjsdo.piggのfork祭り(勝手に祭り化)です。

まあとにかくSafariかChromeで実物を見ていただきたい。

jsdo.pigg – jsdo.it – share JavaScript, HTML5 and CSS

かわいい顔してるだろ…。これ画像使ってないんだぜ…?

見た瞬間ティンと来た。

2/24のつぶやき「http://jsdo.it/tsmallfield/counting_sheep2 と http://jsdo.it/GeckoTang/dOv6 合体させたら農場っぽくなりそう」

つぶやいたらtsmallfieldさんが実行してくれた。

背景付けてみた。forked from: jsdo.pigg – jsdo.it – share JavaScript, HTML5 and CSS

全く変更なしで合体させただけなのにこの統一感!シンクロ率半端ない!
この背景も画像ゼロなんですよ。fork元である羊数えるやつではCSSで描かれた動物も見れます。
で、その後「作ってくれる人いたらラッキー」なノリで追加案をつぶやいてみたんだけど、
深夜過ぎた所為か朝見たときforkされてなかったので、辛抱たまらんくなって自分で作ってみた。

UI付けてみた。forked from: 背景付けてみた。forked from: jsdo.pigg – jsdo.it – share JavaScript, HTML5 and CSS

ほらもうなんかアバターSNSっぽい!!!
繰り返しますがここまで画像ナシです。CSS3マジぱねーっす!

全fork元はこちら。

私が追加したものはこれだけ。

  • jQueryでチャットっぽいUIの追加
  • jQuery用のCSSチューニング
  • ふきだしスタイル変更ラジオボタンの追加
  • まばたきアニメーション(CSS3)
  • 口パクアニメーション(CSS3) ←form ミサワ祭り

(あのミサワ祭りがこんなところで役に立つとはw jsdo.it恐ろしい子…!)

UIにはforkされやすいようにjQueryを使いました。
現状まともに見れるのはChromeとSafariだけだけど、CSSだけでアメーバピグとか@gamesみたいな雰囲気になってるのがマジ凄くない?

今後も何かティンときたら追加するつもりでいるのですが、
WebSocketチャットの実装は共用サーバーだと無理だから出来なさそうです。
VPS持ってる方が実装してくれないかなーと思って記事にまとめてみました 😀

WebSocketチャット版jsdo.pigg登場の巻

ginpeiさんがWebSocketに対応させてるよ!

jsdo.piggを乗せてみた forked from: WebSocket触ってみた – jsdo.it – share JavaScript, HTML5 and CSS

これにフキダシとかの装飾がされたらと思うとwktkが止まらなーい!
発言が交互に繰り返されていくなら「吹き出し」風スタイルの方がしっくりしそう。
使われてるWebSocketのAPIサービスは「WebSocket試したいけど自分でサーバー周り用意するのは面倒」という時に便利そうです。

[CSS3] Xmas Gift Box

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

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

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

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

擬似クラス要素

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

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

MooTools Core 1.3 リリース!新機能・変更点まとめ

まだ私も良く分かってないので調べながらメモっていくつもりで。

1.3がでたので1.2で書いたプラグインもバージョンうpしなきゃ!と思っても慌てる必要はnothing!
下位互換機能がついたCore(width Compatibilityなやつ)を選べば共存出来る。

Slick

セレクタエンジンSlickはMooToolsのファミリープロジェクト。だってお。
1.3でCoreに内臓されてCSSのセレクタを使用したDOM操作がパワーアップ。

Create Element

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みたいな感じだけど作れる要素は1つだけです。
1行で済むのは楽っちゃ楽だけどOOPライクな前者の方が見やすくて好きだな。

“MooTools Core 1.3 リリース!新機能・変更点まとめ” の続きを読む

[css3+MooTools] gradientで自爆ボタン

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

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

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

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

“[css3+MooTools] gradientで自爆ボタン” の続きを読む

[CSS3] マウスオーバーでリンク画像の透明度とかを変更する

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

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

a {
	outline:none;
}
a img{
	position:relative;
	-webkit-transition:opacity 0.5s; /*Safari,Chrome*/
	-o-transition       :opacity 0.5s; /*Opera*/
	-moz-transition   :opacity 0.5s; /*Firefox*/
	transition           :opacity 0.5s; /*CSS3 Real Property*/
}
a:focus img,
a:hover img {
	filter:alpha(opacity=50); /*IE*/
	-moz-opacity:0.5; /*Older Firefox*/
	opacity:0.5; /* Modern Browsers*/
}
/* 押したとき */
a:active img {
	top:1px;
	left:1px;
}

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

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

a {
	display:inline-block;
	background-color: #000;
}

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

a:focus img,
a:hover img {
	-moz-transform: skewY(-5deg);
	-webkit-transform: skewY(-5deg);
	transform: skewY(-5deg);
}

[MooTools] border-radiusの簡単なIE対策

角丸にする既存ライブラリは色々あるけどHTML5対応してなかったり配置が崩れたりで、
もう面倒だから四隅にspan置いて背景指定すればいいわ…と思って作ったクラス。

new IERadius($("main"));

角丸にしたい対象を指定すると、その要素内に次のようなspanが自動作成される。

<span class="radiusFix main-tLeft" style="position: absolute; width: 5px; height: 5px; display: block; top: 0px; left: 0px;"></span>
<span class="radiusFix main-tRight" style="position: absolute; width: 5px; height: 5px; display: block; top: 0px; right: 0px;"></span>
<span class="radiusFix main-bLeft" style="position: absolute; width: 5px; height: 5px; display: block; bottom: 0px; left: 0px;"></span>
<span class="radiusFix main-bRight" style="position: absolute; width: 5px; height: 5px; display: block; bottom: 0px; right: 0px;"></span>

コーナーだけの画像を作って、
radius_sprite

スタイルシートで背景指定する。

html {
	background-color:#113A57;
}
#main {
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
#main{
	background-color:#fff;
}

.radiusFix {
	background:url(../images/radius_sprite.png) no-repeat left top;
}

.main-tLeft{background-position:0px 0;}
.main-tRight{background-position:-5px 0;}
.main-bRight{background-position:-15px 0;}
.main-bLeft{background-position:-20px 0;}

指定した親要素にはposition:relativeが付与される。
positionを使うのでIE6でCSSのバグが発生する事がある。(floatが中にある要素に使った場合など)

左:使用後 右:使用前
radius_sprite_after

“[MooTools] border-radiusの簡単なIE対策” の続きを読む

CSS3 Code Generator

CSS3のソースコードをパパッと出力するジェネレータを作った。
巷には既に超有名ジェネレーターが2つ3つあるんだけど、
ボタンのマウスオーバーとかグラデーションで作るときもプレビュー出来るやつが欲しかったんで、
無いなら作ればいいじゃない理論で擬似クラスにも地味に対応してます。

CSS3 Code Generator

使い方は右上のHelpにちらっと書いてあるんだけど多分初見で使えると思う。
あんまりテストしてないのでバグとかリクエストとかあったらtwitterとかこの記事のコメントとかメールとかで教えて頂けると助かります。

未圧縮ソースはリポジトリに。
“CSS3 Code Generator” の続きを読む

[HTML5+CSS3] 第二回コーディングコンテスト に参加してました

締切後のソース公開OKらしいんで晒しておきます。

応募用デザインにキュンとしたので、思い立ったが吉日な勢いでコーディング。
連休中のいい暇つぶしになりました。
イベント自体は前々から知ってたんだけど、腰が重くてなかなか手を出さず…実質的な製作期間は4日くらい。
例によってMooToolsをしこたま多用してます。

応募用デザイン

完成したのはこれ

ボタンにはCSS3のtransitionとグラデーションをフル活用してます。
このプロパティ面白いんだけど手打ちは地獄を見れるぜ…!
transition.cssのカオスさは必見かもしれない。

一応IE6とかでも同じように見れるようにはしてあります。なんかもう癖みたいなもんで。
“[HTML5+CSS3] 第二回コーディングコンテスト に参加してました” の続きを読む