JavaScript を使わず HTML と CSS だけで Todo アプリを書く方法 - Frasco
HTML と CSS だけで Todo アプリを作りました。TodoMVC（今回デザインを使用使わせてもらいました）と違って JavaScript は使っておらず、すべてのインタラクションが CSS で動いています。 どういう仕組みなのでしょう？簡単に説明すると、HTML、CSS の一般兄弟セレクタ（~）、CSS カウンタ、それから :checked 、:target、:required 疑似セレクタを組み合わせてできています。詳細についてはこれから説明していきます。 アプリを試してみる ソースを見る できること： Todo の追加（最大50件） Todo の完了 Todo の削除 フィルタリング（完了・未完了） 残りのアイテム数をカウントする 空文字の追加を許可しない できないこと： ページリロード後の永続性の維持 「すべての Todo を完了にする（Mark all as done）」
CSS SLOT – A GAME, noJS, ONLY CSS & HTML – No.1026
2度あることは３度あります。CSS Programming Advent Calendar 2012の24日目、1026です。Merry Christmas! 予告どおりギャンブルの定番スロットゲームです。 前回のフリースローで学んで、回転速度を相当遅くしてみたのですがどうでしょうか？ MAXBETボタンとコイン枚数の表示は飾りです。1枚しかbetできませんし、コインは返って来ません。そんな飾りはあるのにコイン投入口はありません。 大当たり（大したことないですが一応）は777だけです。謎の小当り的なもの（パネルの表示がちょっと変わる程度）が結構あります。 いつも通りChromeのみの動作確認です。 適当な解説 基本的にはフリースローと同じ 小見出し通りです。元々、こっちを先に思いついて作っていて、後でフリースローにも使えると思って作った感じなので、コチラのほうがフリースローより地味と言えば
13日目 : CSS Programming Advent Calendar 2012
これは CSS Programming Advent Calendar 2012 の 13 日目の記事です。 (5日ぶり3回目) 今回はCSSプログラマー御用達、（個人的に）最強のプロパティ pointer-events について書こうと思います。 pointer-eventsとはpointer-events - CSS | MDN書くブラウザの対応状況 Can I usePointer Events & Disabling Current Page Links端折って説明すると pointer-events:none; を指定した要素の各種動作が起きなくなります。 詳しいことは気になったら調べてみてください。 何が出来るの？リンクを無効にしたりLINK/*css*/ .disable_link { pointer-events:none; } pointer-events: none;が
CSS FreeThrow – a game, noJS, only CSS and HTML – No.1026
CSS Programming Advent Calendar 2012 の12日目です。 自称CSSプログラマーのげこたんじゃない方、力技に定評のある1026です（今自分で考えました）。 最近はinputでほげほげ以外の方法も増えていますが、定評のあるあくまでinput:checkedに頼った力技でCSSフリースローゲームを作りました。環境によって読み込みが遅い・重い可能性があります。いつも通り、chromeでしか確認していません。 適当な解説 メーターとボタンの連動 CSSでこのメーターの位置はとれません。そこで、横は左・中・右の3種類、縦は上・中・下の3種類のinput（ここでは其れに対応するlabel）を重ねておき、メーターの動きに合わせて重ねたinputのz-indexが入れ替わり、メーターの位置に相当するinputが一番上にきて押すことが出来るという仕組みです。この「ボタンは重
CSS3で、ボールが反射するゲームを作ったよ。 <br>CSS Programming Advent Calendar 2012
CSS3で、ボールが反射するゲームを作ったよ。 CSS Programming Advent Calendar 2012 2012-12-11 JavaScriptを使用せずに、HTMLとCSSを駆使して、ゲームやスライドショーなどを作る、CSS Programming Advent Calendar 2012に参加してみることにしました。 私が題材にしたのは、昔よくFlashのゲームであった、バーを動かしてボールが反射するゲームです。 作ったもの ゲームは、突然始まります。 一定以上ゲームが進むと、クリアです。 推奨ブラウザは、Opera12.10以上。 他にも、IE10や最新のFirefoxやChromeなどであれば、きっと動くと信じてます。 後ろでCSSをぐるんぐるん動かしているので、ゲームの判定がスルーしたり、ゲーム自体が途中で止まる可能性もあります。 その場合はブラウザをリロード
4日目 : CSS Programming Advent Calendar 2012
CSS Programming Advent Calendar 2012の4日目 CSSエンジニアって肩書きもアリなんじゃないかと思っているTenderfeelです。 おいしいカレーの作り方を考えてたら無事にゲームができました。 どちらもステージは１つだけです。Chromeでしか動作確認してません。 CSS神経衰弱 制限時間内（１８０秒）に全部ペアにするとクリア。 めくる枚数の制御はないです。CSS4セレクタが使えるようになったら出来るのかもなあ…。 なので真面目にやるもよし、上から順にめくるもよしなフリーダムさになっています。 真面目にやると普通に難しいよ。 CSS Playing Cards トランプの絵柄の作り方って色々な人が書いてるけど、このページの手法が一番シンプル。ゲーム用にさらに要素省略したものを@mixinにして使ってます。 CSS3 MEMORY 探したら先人が居たけどJ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Stopwatch in CSS
CSS でペライチ