A clone of Flappy Bird written in CSS
A clone of Flappy Bird written in CSS CSS Bird Open in a new window この記事について これは NSEG Advent Calendar 2015 の 2 日目の記事です。 NSEG とは NSEG は長野県とコンピューターをテーマにした勉強会で、月1回のペースで開催されています。 勉強会の内容や形式は固定されておらず、フリーテーマの発表会、講師を招いての講演会やハンズオンセミナーなど、様々な形で開催されています。また NSEG 単独での開催だけでなく、他の団体と合同で開催している回も数多くあります。 そんな中、少し前の話になりますが、第17回勉強会ではMozilla勉強会との合同という形で開催され、私はその際に CSS プログラミングについての発表をしたことがあります。この記事ではそれにちなんで、CSS プログラミングとは
noJSでもマウスホイールでスクロールできる横長のコンテンツを作ってみたら色んなことに出会った – No.1026
追記：2013年3月19日現在、Google Chrome 27.0.1438.7 dev では以下に書いてある不具合は既に解決されているようです。 タイトルが長いです。 今、手元にホイールのついたマウスがないのでサンプルが探しにくいのですが、こういう感じ（jQueryで横スクロールのアニメーションするサイトを作る方法 – ウェブロケッツマガジン）のものをnoJSでやってみたら、色々な仕様なのかバグなのかよくわからないことを発見した、というお話。 作り方は簡単でtransformである要素をグルっと270°回転させて（スクロールバーが上にあると気持ちが悪いので更にY軸で180°回転）擬似インラインフレーム化し、更にその中の要素を親要素と逆に回転させて綺麗に並べてやれば出来上がり。図などを書けば物凄く簡単に理解できると思いますが、もはやこれは本題ではないので割愛。 始めにつくったやつ （ちな
CSS Memorabilia - jsdo.it - Share JavaScript, HTML5 and CSS
share JavaScript, HTML5 and CSS. jsdo.itはWEBデザイナー、マークアップエンジニア、JavaScriptエンジニアといったフロントエンドエンジニアのための、コードコミュニティです。 書いたその場で動かせるオンラインエディターだから、コードはWeb上に保存、作品として公開できます。 技術に自信がなくても大丈夫！共有されているコードをアレンジして、最先端のテクニックを手に入れましょう。 6つの特徴
Invitation for CSS "HENTAI" Programmers in the world! - jsdo.it - share JavaScript, HTML5, CSS - developers blog
※This is the article written for the 25th day (the final day) of the CSS Programming Advent Calendar 2012. For details about CSS Programming, please refer to this article. ============================================ Hello, this is the jsdo.it team! Thanks for using our service! To answer the passionate encouragement from the CSS "HENTAI" Programmers in the world, we jsdo.it team have prepared a C
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のみの動作確認です。 適当な解説 基本的にはフリースローと同じ 小見出し通りです。元々、こっちを先に思いついて作っていて、後でフリースローにも使えると思って作った感じなので、コチラのほうがフリースローより地味と言えば
CSSだけでTemple Runをつくる - damelog
どうも。 おっぱいの人 です。未だホンモノにはありつけていません。 このエントリは、CSS Programming Advent Calendar 2012 23日目の記事です。 CSS Programmingとは もう今更説明しようがないですよね。 おっぱいとかそんなんより数倍変態な人たちがHTMLとCSSだけでゲームとか作っちゃうアレです。 ぼくはというと、今年一年中ガラケーと戦ってた(業務的に)のでCSS3とか実はほとんど触れていないので、リハビリの意味を込めての復帰戦となります。 CSSだけでTemple Runをつくる Temple Runってコレです。iPhoneのランニングゲー(?)では一番有名ですよね。 手前味噌で恐縮ですが、Tap Ninja なんというのもKAYACさんからでております。ああ、すみません宣伝では無いんです。石を投げないでください。ごめんなさいごめんなさい
CSSだけでスライドショーはつくれるよ。
この記事はCSS Programming Advent Calendar 2012、22日目のための記事です。 CSS Programmingとは、jsを使わないでHTMLとCSSを駆使してゲームとかスライドショーとか作る技術です ということで、ここでは、前回の記事で作った、グローバルナビの下の大きめの画像のところ（以下：スライドショー）を、CSSだけで実装してみます。JavaScriptで実装したサンプルはこちら。 以下が目次になります。 まえがき CSS Programmingに使える便利なやつ transitionプロパティ E ~ F（間接セレクタ） :not(s)否定疑似クラス :checked疑似クラス <label>要素 それCSSで出来るよ。 きっかけづくり チョボのところの仕組み ~と:checked <label> transition :first-childと:fi
CSS Loupe（おまけ）とCSSプログラミングの制作について – No.1026
CSS Programming Advent Calendar 2012の19日目、一週間ぶりです。元バスケ部の友人に「そんなに綺麗なフォームでそんなに入らない意味がわからない」といわれたことがあるくらい美しいフォームに定評のある1026です。CSSフリースローお楽しみ頂けたでしょうか？ さて、今日は元々宣言していたパズルがポシャったのでかるいやつを、ということでCSS Loupeを作りました。JSでたまにあるこういうもののPure CSS版です。 クリスマスっぽい画像を探したら、全体的に赤でちょっと拡大がわかりにくくなってしまったでしょうか… フィルターかけるボタンとかつけようかとも思ったのですが、付けたところでルーペとしてどうにかなるわけではない（という言い訳で若干面倒くさい）ので辞めました。 適当な解説 画像の上にdivを敷き詰めて、hoverするdivに合わせてルーペが移動。拡大画
17日目 : CSS Programming Advent Calendar 2012
これは CSS Programming Advent Calendar 2012 の 17 日目の記事です。 (4日ぶり4回目) 先ほどお話にも出てきた、日本CSSプログラミング界権威？のげこたん(@GeckoTang)です。 前回書き終わったあとにゲーム的なものを作ろう…何がいいかなぁと考えていたら 「CSSSniper」とかいいんじゃね！とかなんとかで名前だけが降臨し、実装しようと思って進めていました。 …が、作っている途中で「あれ…これアレと仕組みかぶっとるやんけ…」となって途中でやめてしまいました。 途中まで作ったもの黒い四角の中でマウスを動かすとスナイパーライフルの照準が動きます。 クリックしても何もありません（出来るのだけど。） 準備だけはしてあります。 覗き穴を作った色々省略していますが、覗き穴的な物を作るために box-shadowの4番目(影のサイズ)に大きい値を指定して
negic
Recent Entries Reactでシンプルなwebサイトが作れそうなテンプレートを作った 2015/12/13 advent_calendar, react react-mixinのmixinファイルの中で 「_（アンダーライン）」をメソッド名の先頭に使ったらエラーはいた 2015/10/12 react, react-mixin webpack.configをCoffeeScriptで書く 2015/06/10 coffeescript, webpack CSSで印刷を禁止させる 2015/02/26 css, print Advent Calendar 2014 読むリスト 2014/12/15 advent_calendar all entries Tags adobe advent_calendar android asciiart audio audition book
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が一番上にきて押すことが出来るという仕組みです。この「ボタンは重
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS でフォームの値を読む
CSS でフォームの値を読む
CSS でペライチ