Grid Overlay: The Lasy Way

グリッド・オーバーレイ: 自堕落な手法で

before擬似要素を利用したグリッド・オーバーレイを作成してみました。pointer-eventsプロパティでnoneを指定することによって、グリッド画像が手前にあるのにも関わらず普通に文字列を選択したりリンクをクリックしたりできるようになります。

View Demo: Grid Overlay: The Lazy Way

詳しくはデモページを読んでください。グリッド画像はCSSグラデーションなので、最後にちょろっと書いてあるようにグリッドサイズは変更可能です。溝とカラムの比率は変更できませんが……。

poiner-eventsプロパティはなかなか奥が深そうです。

追記

ダブルクリックでグリッドをトグル出来るようにしてみたのでデモにも反映させました。

<style>
  body.hide-grid::before {
    background-image: none;
  }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
  $(function () {
    $("body").dblclick(function () {
      $("body").toggleClass("hide-grid");
    });
  });
</script>

jQueryでは擬似要素を扱うことはできないのでbody要素でクラスをトグルしてやってグリッドの表示を切り替えてます。スタイル追加するところまでまとめてJavaScriptにしようかと思いましたが、それだともう960 Gridder使えばいいじゃないかという話になっちゃうのでやめました……。