You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
CSS Programming Advent Calendar 2012 の12日目です。 自称CSSプログラマーのげこたんじゃない方、力技に定評のある1026です(今自分で考えました)。 最近はinputでほげほげ以外の方法も増えていますが、定評のあるあくまでinput:checkedに頼った力技でCSSフリースローゲームを作りました。環境によって読み込みが遅い・重い可能性があります。いつも通り、chromeでしか確認していません。 適当な解説 メーターとボタンの連動 CSSでこのメーターの位置はとれません。そこで、横は左・中・右の3種類、縦は上・中・下の3種類のinput(ここでは其れに対応するlabel)を重ねておき、メーターの動きに合わせて重ねたinputのz-indexが入れ替わり、メーターの位置に相当するinputが一番上にきて押すことが出来るという仕組みです。この「ボタンは重
これは CSS Programming Advent Calendar 2012 の 8 日目の記事です。 8日目の今回は… JSを使わないで音を鳴らしてみよう!対象はChromeです。 普通に鳴らしてみる。ページ開いた途端に音がなりますね。 このままでは音声ファイルの読み込み待ちも発生するのでdataURIにしましょう。 mp3のdataURI化には http://jsfiddle.net/Tenderfeel/JyaPk/show/ が便利です。 ボタンを押したら音を鳴らそう。ユーザーがクリックしたら音がなるようにしてみます。 音を鳴らすdemo1 a要素をクリックしたらiframe要素の中に音だけのHTMLを読み込みます。 このままではHTMLの読み込み待ちも発生するのでdataURIにしましょう。 音を鳴らすdemo2 mp3をdataURI化し、それを読み込んだHTMLをdata
CSS Programming Advent Calendar 2012 の5日目の記事です。 CSS Cake というバースデーケーキを作ってみました。 参加表明時に「アニメーション系の組み合わせ。実用性ないやつ。」というコメントを書いておいたので、そういうネタで。 jsdo.it がサービス終了したためサンプルは見れません なお、検証は以下の2つでのみ行なっています。 Windows については、フォントの関係でちょっとズレが出てますが、動作はします。 Mac: Mountain Lion、Chrome バージョン 23.0.1271.95Windows: Windows 7、Chrome バージョン 23.0.1271.95 m 仕組みについて 今回のサンプルで多用したのは、以下のもの。 サンプルを作成するにあたり、まとりさんの記事を参考にさせてもらいました。 CSS アニメーション
CSS Programming Advent Calendar 2012 の4日目 その2 http://www.adventar.org/calendars/2 1から順にクリックしていくあれです。 1ステージしかないです。 Chromeでしか確認してません(キリッ タイマーは@tsmallfieldさんのやつを改変したものです http://jsdo.it/tsmallfield/css3_countup_timer その1:神経衰弱 http://jsdo.it/Tenderfeel/css-pelmanism <div id="game"> <h1>CSS Numbers</h1> <div id="main"> <div id="playground"> <input type="radio" name="number-1" id="number-1" class="radio"
公開日2012-12-03タグCSSAdvent Calendarこの記事はCSS Programming Advent Calendar 2012 3日目のエントリです。 CSS Programming という、JS や PHP を使わずに CSS だけでプログラムチックな処理を実装しようとう試みがあります。それをお題に、クリスマスのアドベントカレンダーのように1日ずつネタを書きましょう、というのが CSS Programming Advent Calendar 2012 の概要です。CSS Programming の考え方とか作り方は今回の発起人であるげこたんさんが1日目で説明していますのでそちらをどうぞ。 僕は今まで CSS Programming は作ったことはなかったのですが、年に一度のイベントなので力試しも兼ねて作ってみました。 Advent Calendar 3日目のこのエン
CSSプログラミングの新作としてインベーダーゲームを作っていたんですが、途中で心が折れて中途半端なまま投げました。 [ incomplete ] CSS Invaders インベーダーを作りたかったというのはわかっていただけると思います。 敵の横移動が絡むと予想以上に自機の動きや位置が綺麗にできず、面倒くさくなって投げちゃったってとこです。 打つシステムとしては、敵をラッピングしているlabelを縦長に伸ばして、敵を直接クリックせずとも、その延長線上をクリックすると打った風になるという感じです。 この説明では何を言ってるか全くわからないと思うので、ソース見てください。 こういった、クラス名だけ変えて延々繰り返しみたいなコードを書くときはSCSSはほんとうに便利ですね。人力では絶対書きたくないです。 お暇な方、興味のある方は、forkして調整・機能追加してみませんか? 『皆で作ろう、CSSイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く