タグ

CSSとAdvent Calendarに関するwasaiのブックマーク (4)

  • CSS SLOT – A GAME, noJS, ONLY CSS & HTML – No.1026

    2度あることは3度あります。CSS Programming Advent Calendar 2012の24日目、1026です。Merry Christmas! 予告どおりギャンブルの定番スロットゲームです。 前回のフリースローで学んで、回転速度を相当遅くしてみたのですがどうでしょうか? MAXBETボタンとコイン枚数の表示は飾りです。1枚しかbetできませんし、コインは返って来ません。そんな飾りはあるのにコイン投入口はありません。 大当たり(大したことないですが一応)は777だけです。謎の小当り的なもの(パネルの表示がちょっと変わる程度)が結構あります。 いつも通りChromeのみの動作確認です。 適当な解説 基的にはフリースローと同じ 小見出し通りです。元々、こっちを先に思いついて作っていて、後でフリースローにも使えると思って作った感じなので、コチラのほうがフリースローより地味と言えば

  • CSSでグラデーションを使うときにhsl()が便利すぎる。(CSS おれおれ Advent Calendar 2012 – 19日目) | Ginpen.com

    CSS おれおれ Advent Calendar 2012 – 19日目 CSS 3では色の指定にhsl()を使う事が出来ます。すなわち色相 (Hue; 0-359)、彩度 (Saturation; 0%-100%)、輝度 (Lightness; 0%-100%) による色の指定です。さらに不透明度を加えたhsla()もあります。 グラデーションをlinear-gradient()で実現するとき、このhsl()を使うと綺麗に記述する事が出来ます。 実例 こんなグラデーションを実装します。 #rrggbbを使ったグラデーションの例 まずは#rrggbbで書いた例です。 background-image: linear-gradient( top, #ffffff 0%, #a3daf5 50%, #75c7f0 51%, #19a1e6 100% );

    CSSでグラデーションを使うときにhsl()が便利すぎる。(CSS おれおれ Advent Calendar 2012 – 19日目) | Ginpen.com
  • CSS Loupe(おまけ)とCSSプログラミングの制作について – No.1026

    CSS Programming Advent Calendar 2012の19日目、一週間ぶりです。元バスケ部の友人に「そんなに綺麗なフォームでそんなに入らない意味がわからない」といわれたことがあるくらい美しいフォームに定評のある1026です。CSSフリースローお楽しみ頂けたでしょうか? さて、今日は元々宣言していたパズルがポシャったのでかるいやつを、ということでCSS Loupeを作りました。JSでたまにあるこういうもののPure CSS版です。 クリスマスっぽい画像を探したら、全体的に赤でちょっと拡大がわかりにくくなってしまったでしょうか… フィルターかけるボタンとかつけようかとも思ったのですが、付けたところでルーペとしてどうにかなるわけではない(という言い訳で若干面倒くさい)ので辞めました。 適当な解説 画像の上にdivを敷き詰めて、hoverするdivに合わせてルーペが移動。拡大画

  • 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;が

    13日目 : CSS Programming Advent Calendar 2012
  • 1