GeckoTang

CSSプログラマーです

Works

CSS PANIC

\紹介されました/ * http://snook.ca/archives/conferences/css-takes-over-the-world * http://tv.adobe.com/watch/max-2011-envision/css-takes-over-the-world/ CSS PANIC - a game, noJS, only CSS and HTML - JavaScriptを使わない。 CSSプログラミング第二弾「CSS PANIC」 m9( ゚д゚)説明! 制限時間以内に10匹のワニを倒せ! 10秒くらいでお終いだ! * chromeでしか確認してません * 画像はdataURIです。 * iPhone , iPadで見るときはhttp://jsrun.it/GeckoTang/4rXg/がおすすめ I ♥ datauriplayground2 http://jsdo.it/tsmallfield/datauriplayground2 ----- m9( ゚д゚)第一弾 CSS3 OF THE DEAD http://jsdo.it/GeckoTang/onyd m9( ゚д゚)元祖 http://d.hatena.ne.jp/ndruger/20110428/1304021590

  • 447970
  • 131

CSS 3D WORLD

chrome12+ safari5 iphone 2000行ですが、3Dを作ってる部分のCSSは140行くらいです。 残りはテクスチャ用のdataURIです。 簡単に3Dが作れます。(ちらついたりしますけど。)

  • 76581
  • 39

CSS3 OF THE DEAD

http://d.hatena.ne.jp/ndruger/20110428/1304021590 「javascriptを使わず、html + cssだけでクリックシューティングゲームを作ってみた」に触発されて。 クリックしてゾンビをやっつけろ・・・! ポリスマンのような見た目にだまされるな! 全部倒すとゲームクリアだ・・・! 注意事項 * Chromeでしか動きません * Windows7 Chrome 13 dev でしか確認していません。 メモ * アニメーションの中でrotateX(10deg)とかするとクリックできなかった。 * 画像は全てdataURI * クリア画面を出すのは工夫した DATA URI Playground2 重宝してます! http://jsdo.it/tsmallfield/datauriplayground2 m9( ゚д゚)第二弾 CSS PANIC http://jsdo.it/GeckoTang/4rXg

  • 225677
  • 51

CSS3DマリO

さすがにタグが多いと重たい… 色はあとで付ける。 ※ 3D表現が使えるのはsafariだけ!  それ以外だと落ちるかもよ! おお・・・Chrome11devでも対応してた!

  • 15151
  • 27

CSS Gamepad

矢印を押すとその方向にオレンジ色の箱が移動します。

  • 5299
  • 13

::-webkit-scrollbar

スクロールバーをデザインする ::-webkit-scrollbar に関しての覚え書き http://unformedbuilding.com/articles/learn-about-webkit-scrollbar/ を参考に色づけをしています・・・ めんどくせえ・・・

  • 85547
  • 18

jsdo.pigg

目的とか目標など。 ・CSS+HTMLのみでアバター作成する。 ・作成したアバターはjsdo.itで話題のwebSocketChatと組み合わせてみたい。 ・いろいろな服とか髪型とか作りたい。 ・チャット用にアニメーションを複数用意したい ※ただしwebkitに限る まゆげ(?)を移動させるときに topとrotateでtransitionさせたら rotateが終わってからtopが変化してカクカクしてしまった。 translateYとrotateでやると滑らかでした。 ---------------- 新キャラ追加しました。 .avatarにidを付けるのではなく 各部位ごとに多重クラスする方向にしようかと。

  • 38491
  • 33

かわいいふきだし

全部かわいいのはwebkitだけ! ハート型はハート文字を使っているので 環境によっては綺麗に出ないと思う。 ブログに転載:http://t.co/sZNv8p1

  • 126651
  • 65

webkitNotifications DEMO

  • 5919
  • 6

3dStyle CBC NET for safari

フルスクリーンでsafariもしくはiphone,ipad推奨。 cssでのアニメーションなのでiphoneでもぬるぬる動きます。 http://jsdo.it/GeckoTang/v4wV/fullscreen

  • 5682
  • 3

ぷちぷちっぽいなにか。

でもぷちぷちしません。

  • 2373
  • 2

CSS3でOPP

なるべく少ないマークアップでOPPを。 あとで動かそうと持ったら先にやられちゃいました! http://jsdo.it/3ping.org/mqUu クリックしたら動くようにしました!chromeだけ。 2010/9/24追記---- ★をつけてみました!青少年対策!

  • 7760
  • 6

CSS PuchiPuchi

いまさらですが... 音鳴ります。(Mac Chrome v27で確認)

  • 5155
  • 9

Skills

  • Photoshop
  • Illustrator
  • iOS Browser
  • Feature Phone
  • jQuery
  • HTML5
  • XHTML
  • CSS
  • CSS3
  • JavaScript
  • SCSS
  • CSS Programming

Hot tags

Categories

HTML / CSS / JavaScript