Works

円形の画像ギャラリー

Canvasを使った円形の奇抜な画像ギャラリーです。 周囲のサムネイルにカーソルで触れると中心の画像が変わります。 JavaScriptのカスタマイズエリアのプロパティは各自で自由に変更できます。 画像を増やしたり、大きさを変えたり、早さを変えたりして楽しんでください。 IE、Chrome、Firefox、Safari、Opera、これらの各ブラウザの最新版で動作を確認しました。 動かない場合は、ブラウザを最新版に更新してください。

  • 3391
  • 7

画像を六角形に敷き詰めた

Canvasを使って画像を六角形に敷き詰めてみました。 JavaScriptのカスタマイズエリアのプロパティは各自で自由に変更できます。 画像を増やしたり、六角形の大きさを変えたりして楽しんでください。 画像の枚数によって自動的にレイアウトを調整してくれます。 IE、Chrome、Firefox、Safari、Opera、これらの各ブラウザの最新版で動作を確認しました。 動かない場合は、ブラウザを最新版に更新してください。

  • 3349
  • 4

CSSだけで部首の表現

CSSだけで漢字の中の部首の表現はできないものかと考えました。 ・Webkit系のブラウザでしか動かない ・文字の一つ一つにわざわざ指定しないといけない ・文字によっては不可能、というかそっちの方が多い ・環境によっては描画がずれる可能性もありそう こんなこともできるよっていう可能性を示したにすぎません。 結論は画像を使えってことですね。

  • 1339
  • 0

SVGを使って漢字の部首の表現

先日[CSSだけで漢字の中の部首を表現しようとしました](http://jsdo.it/obomemo/obrbs "jsdo.it")が、様々な制約があるため実用的なものはできませんでした。 今回は、SVGを使って同じことをしてみます。 漢字のSVGデータを1つ1つ作らないといけない手間はありますが、それさえできれば使い回しも効くので色々と応用できます。 SVGの中に透明のテキストも一緒に描画することで、漢字をコピー&ペーストすることも可能になっています。

  • 1371
  • 0

SVGで内サイクロイドと外サイクロイド

SVGで内サイクロイド(Hypocycloid)と外サイクロイド(Epicycloid)を書きました。 data属性の値を変更できます。 ちょっと重いです。

  • 1637
  • 2

クリックできるキーボードのボタン

キーボードのボタンをリッチにするものはよくあるけど、それがクリックできるのは見ないなあ、と思ったのでチャチャッと作ってみました。

  • 998
  • 1

ホログラム加工

トレーディングカードなどによくあるホログラム加工っぽいものをCanvasで再現してみました。

  • 2062
  • 10

CSSだけでMetroUI

CSSだけでMetroUIを作りました。 三種類のパネルサイズを設定でき、二列ずつのカラムに整列されるように自動的に順番に配置されます。 現状だと、IEでは大きいパネルが途中で分断されたり、Safariでは配置がずれてしまうバグが残ってたり、Firefoxではスクロールに関する部分がおかしくなってたりなど、まだまだ課題点が多いです。

  • 844
  • 0

ローディングアイコン

CSSで作ったシンプルなローディングアイコンです。 所有しているAndroid端末のものを再現しました。

  • 1440
  • 1

CSSで楽譜

CSSだけで楽譜を作りました。

  • 811
  • 0

ローディングアイコン2

ぽよぽよ弾むボールのローディングアイコンです。 色を変えました。

  • 1223
  • 1

ローディングアイコン3

■□□ □□□ □□■ □■□ ■□□ □□□ □□■ □■□ ■□□ □□□ □□■ □■□ ■□□ □□□ □□■

  • 1038
  • 0

ローディングアイコン4

所有しているAndroid端末の、起動時ローダーを再現。

  • 2076
  • 0

Skills

  • Wordpress
  • Photoshop
  • Illustrator
  • jQuery
  • HTML5
  • CSS
  • CSS3
  • JavaScript
  • ActionScript
  • PHP
  • C
  • C++
  • C#
  • Objective-C
  • Java

Hot tags

Categories

HTML / CSS / JavaScript