タグ

ブックマーク / no1026.com (3)

  • 要素の重なりについて本気出して考えてみた(z-indexとか何とかとか) – No.1026

    あなたはhtml/cssにおける要素の重なり方を知っていますか? z-indexを指定しなければ先に書いたほうが下層で後に書けば上層に来る? というわけで、実は割りと複雑な要素の重なりについて書きます。そこまで意識しなくとも支障がでることは滅多にないと思いますが、知っておいて損はないはずです。 ちなみに、昨今CSS3なるものが流行していますが、この記事はW3CのCSS2.1勧告(と付録)を元に書いています。 基的な内容であり、目新しいことは特になにもありません。 スタックコンテキストとスタックレベル 用語と概念から。 ある意味、ここが一番よくわかりませんが、ここがわからないと何もわかりません。 スタックコンテキスト(スタッキング・コンテキスト) 簡単に言えばauto以外のz-indexと位置(static以外のposition)を指定した要素によって生成される階層構造を形成する固まりです

    tihata
    tihata 2013/08/21
    おさらいに!!
  • 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が一番上にきて押すことが出来るという仕組みです。この「ボタンは重

    tihata
    tihata 2012/12/12
    すごーい!そして、むずーいww
  • No.1026

    アドベントカレンダー以外の記事を書かなくなってしまったブログです、こんばんは。 そんな訳で、もっとチラシの裏っぽいところが欲しくてtumblrで書いてみたりもしていたのですが、結局自分で作りました。 1026.tv tvに特に意味はなく、たまたま他所に取得されてなかっただけです。... webの中心でスタイルガイドの必要性が叫ばれていまして、あのCodeGridでもStyleDocco、KSSの導入方法が立て続けに紹介されている今日このごろ。 そんな中、StyleDocco、KSSはともかく、kss-nodeのデフォルトテンプレートが非常に残念な感じになっており、「悪くないの...

  • 1