ksk1015

CSSerです。JSも好きです。
ブラウザ上の技術全般に興味があります。
詰めの甘いコード多いので参考にする際は要検証。

Works

CSSでアナログストップウォッチ(作り込み版)

2011.11.14 Firefox, iOS Safariに対応 +++++++++++++++++++++ 2011.4.10 webkitのkeyframesを使ってのCSSだけで作ったストップウォッチ。 上の真ん中のボタンがSTART/STOP、右側のがRESET(STOP時のみ)。 -webkit-animation-play-state(削除検討中のプロパティらしい)で一時停止を実現。 START/STOP/RESETの切り替えはradioボタンの:checkedで。 あとChromeには一時停止して再び動かしたときに一瞬初期値に戻るバグ?があるようです。 Firefox4で表示だけはさせるようにしたい。 【追記】Firefox4でも表示できるように。一時停止はできないが30秒だけ動くように(transitionの最大が30秒だった)。 あと、スペックの低いネットブックで見たらコマ落ちしまくりでちょっと残念。 【追記】Sfariでボタンが上手く表示されてなかったのを修正。 同じwebkitでもchromeとsafariでは細かなところが違ったりしてて、そこらへんがまだちょっと未整理。

  • 6051
  • 14

CSSでアナログストップウォッチ第二発目

2011.11.14 ・Firefox、iOS Safariにも対応 ・Chromeのバグを修正 ++++++++++++++++++++++++++ chromeのみ。 safariは頑張ってないけど動く。 歯車的なものを作りたい欲求。 firefox未対応。 第一弾はこちら http://jsdo.it/ksk1015/ueyf 【追記】 Safari対応。 Firefox4もちょっと対応。

  • 13007
  • 28

borderとtransitionを使ったエフェクト

ブラウザによってだいぶ違いますが、 solidのボーダーは安定した効果

  • 177382
  • 249

FizzBuzz問題をCSSで forked: FizzBuzz問題をJavaScriptで

htmlの出力はjsでやってます

  • 5920
  • 8

CSSでMacBook Airを購入(CSSで加算演算)

counter-incrementを利用しての加算演算。 加算演算といっても加算した数値を表示するだけです。 iPhone Safariでも動くようにlabelにクリック属性を加えました。 Chrome15 : ok Firefox8 : ok Opera11.5 : ok Safari5 : 演算が動かない(原因不明) iOS5 Safari → ok IE9 : counter-incrementも使えchecked疑似要素も使えるが、疑似要素によるcounter-incrementが効かない IE10 : wakaranaiyon todo ・iPhone最適化

  • 5205
  • 19

CSSおみくじ

CSS Programming Advent Calendar 2012 http://www.adventar.org/calendars/2 15日目 http://ksk1015.hatenablog.com/entry/2012/12/16/021446 CSSのみで作るランダムボタンを利用してのおみくじ。 ランダムボタンについての解説コードは http://jsdo.it/ksk1015/joOY

  • 7096
  • 8

CSS 3D で円柱

Chrome, Safari, Firefox. CSSで曲面を作る実験。 border-radiusとborderで作った円をたくさん積み重ねて表現。 しかしborderには厚みがないため正面から見ると見えずに透ける。これはこれで味がある物体。 チェックボックスでアニメーションをSTOPできます。

  • 4719
  • 0

変形 forked: CSS 696

ろくろおもしろい

  • 3180
  • 5

CSSでモニターのオン・オフのエフェクト

GALAXY NEXUSのモニターオフするときのエフェクトが面白かったのでCSSでざっくり真似る。 webkitのみ。

  • 1310
  • 0

css3 filter

2013年1月31日現在で使用できるブラウザ Chorme 最新 Safari 6 iOS6 Safari あと他にdrop-shadowというのがありますが、値を複数入れる必要あるので割愛。 画像 http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Supreme_pizza.jpg 【2014.07.15】 バグあって動いてなかったを改修 【2013.02.05】 CSSのコードを吐き出すように変更

  • 3733
  • 11

crazy mario bg

  • 1472
  • 0

base64 data url generator

  • 2495
  • 0

都道府県、市区町村、町域のselectボタンを自動生成

Yahooの住所ディレクトリAPIを利用して、 都道府県、市区町村、町域のselectボタンを自動生成。 Yahooの住所ディレクトリAPI http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/addressdirectory.html

  • 10329
  • 9

Google Map APIの練習 二点間の距離

二点間の距離を算出する関数 google.maps.geometry.spherical.computeDistanceBetween(from ,to) を使用するにはAPI読み込むパラメーターに libraries=geometry を追加 参考サイト http://www.logical-arts.jp/?p=226

  • 3185
  • 0

現在地の住所を取得

Geolocation API と Google Map API を利用して

  • 1789
  • 0

svg map

svgで日本地図。 こちらの canvas map をsvg化。 http://jsdo.it/tikamoton/vz68

  • 2961
  • 0

配列のシャッフルを視覚化

Fisher-Yatesと呼ばれる配列をシャッフルする方法を視覚化してみた。

  • 1988
  • 0

jQuery hoverによるanimateでstopの使い方サンプル

実装したかったのは#demo4の奴。 【#demo1】 animateのみだと マウスをのっけるはずすを繰り返すと アニメーションキューはどんどんたまっていって マウスを外した後もたまったアニメーションが繰り返される。 【#demo2】 #demo1を回避するべく animate()の前にstop()を行う。 でもこれだとマウスをすぐ外した場合は ほとんどアニメーションされずに寂しい。 【#demo3】 じゃ、mouseover時のみにstop()すればいいかというと これだけだと実行中のアニメーションが停止するだけで #demo1と同じ現象が起こる。 【#demo4】 で、stop()は二つの引数を指定できて、 第一引数はたまっているキューを削除するかしないかで mouseover時にstop(true)を指定すると アニメーションキューは貯まらずに すぐにmouseoutしても、 mouseover時のアニメーションを最後までしてくれるものが作れます。 stopの引数や、このあたりの参考記事 http://tech.kayac.com/archive/jquery.stop_jumptoend_javascript_advent_calendar_2010_5.html

  • 18750
  • 10

SUPER MOBILE GAME TSUMEATO

Version 0.5

  • 1219
  • 1

dom時計

iOS6風 【20130201】 IE9に対応

  • 1259
  • 0

ホバーでモザイクエフェクト

ホバーでモザイクエフェクト コード汚い 画像はwikipediaのしろくまより http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Polar_Bear_ANWR_1.jpg

  • 2295
  • 1

ジャイロセンサーで立体を回転

ジャイロセンサーのあるスマホとかで見てね。 iPhoneはキレイに見えた。 http://jsrun.it/ksk1015/1tFo

  • 6557
  • 4

css animationで光の揺らぎ forked: 光の揺らぎ

css animationを使って揺らがせる。 Chrome, Safari, Firefox。

  • 4441
  • 7

life game use web worker

web worker http://jsdo.it/ksk1015/KFfA

  • 469
  • 0

TICK TOCK

これをまねた https://twitter.com/InfinityLoopGIF/status/797480186782433280

  • 616
  • 0

単色1px画像のdataURL ジェネレーター

  • 626
  • 0

マウスを動かしてる方向を描画する

  • 738
  • 0

svgファイルのsvg内のスタイルを変更して表示

XMLHttpRequestでsvgファイルを取ってくるので、同一ドメインのsvgファイルのみが対象です。

  • 459
  • 0

CSSで蛍光ペンみたいな線を引くアニメーション

  • 1065
  • 0

素数

  • 596
  • 0

Skills

Hot tags

Categories

HTML / CSS / JavaScript