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
追記:2013年3月19日現在、Google Chrome 27.0.1438.7 dev では以下に書いてある不具合は既に解決されているようです。 タイトルが長いです。 今、手元にホイールのついたマウスがないのでサンプルが探しにくいのですが、こういう感じ(jQueryで横スクロールのアニメーションするサイトを作る方法 – ウェブロケッツマガジン)のものをnoJSでやってみたら、色々な仕様なのかバグなのかよくわからないことを発見した、というお話。 作り方は簡単でtransformである要素をグルっと270°回転させて(スクロールバーが上にあると気持ちが悪いので更にY軸で180°回転)擬似インラインフレーム化し、更にその中の要素を親要素と逆に回転させて綺麗に並べてやれば出来上がり。図などを書けば物凄く簡単に理解できると思いますが、もはやこれは本題ではないので割愛。 始めにつくったやつ (ちな
share JavaScript, HTML5 and CSS. jsdo.itはWEBデザイナー、マークアップエンジニア、JavaScriptエンジニアといったフロントエンドエンジニアのための、コードコミュニティです。 書いたその場で動かせるオンラインエディターだから、コードはWeb上に保存、作品として公開できます。 技術に自信がなくても大丈夫!共有されているコードをアレンジして、最先端のテクニックを手に入れましょう。 6つの特徴
どうも。 おっぱいの人 です。未だホンモノにはありつけていません。 このエントリは、CSS Programming Advent Calendar 2012 23日目の記事です。 CSS Programmingとは もう今更説明しようがないですよね。 おっぱいとかそんなんより数倍変態な人たちがHTMLとCSSだけでゲームとか作っちゃうアレです。 ぼくはというと、今年一年中ガラケーと戦ってた(業務的に)のでCSS3とか実はほとんど触れていないので、リハビリの意味を込めての復帰戦となります。 CSSだけでTemple Runをつくる Temple Runってコレです。iPhoneのランニングゲー(?)では一番有名ですよね。 手前味噌で恐縮ですが、Tap Ninja なんというのもKAYACさんからでております。ああ、すみません宣伝では無いんです。石を投げないでください。ごめんなさいごめんなさい
この記事は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 Programming Advent Calendar 2012の19日目、一週間ぶりです。元バスケ部の友人に「そんなに綺麗なフォームでそんなに入らない意味がわからない」といわれたことがあるくらい美しいフォームに定評のある1026です。CSSフリースローお楽しみ頂けたでしょうか? さて、今日は元々宣言していたパズルがポシャったのでかるいやつを、ということでCSS Loupeを作りました。JSでたまにあるこういうもののPure CSS版です。 クリスマスっぽい画像を探したら、全体的に赤でちょっと拡大がわかりにくくなってしまったでしょうか… フィルターかけるボタンとかつけようかとも思ったのですが、付けたところでルーペとしてどうにかなるわけではない(という言い訳で若干面倒くさい)ので辞めました。 適当な解説 画像の上にdivを敷き詰めて、hoverするdivに合わせてルーペが移動。拡大画
これは 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 Programming Advent Calendar 2012 の12日目です。 自称CSSプログラマーのげこたんじゃない方、力技に定評のある1026です(今自分で考えました)。 最近はinputでほげほげ以外の方法も増えていますが、定評のあるあくまでinput:checkedに頼った力技でCSSフリースローゲームを作りました。環境によって読み込みが遅い・重い可能性があります。いつも通り、chromeでしか確認していません。 適当な解説 メーターとボタンの連動 CSSでこのメーターの位置はとれません。そこで、横は左・中・右の3種類、縦は上・中・下の3種類のinput(ここでは其れに対応するlabel)を重ねておき、メーターの動きに合わせて重ねたinputのz-indexが入れ替わり、メーターの位置に相当するinputが一番上にきて押すことが出来るという仕組みです。この「ボタンは重
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く