テキスト汚し

css

Khmerang.com - CSS-Technique: Worn Type
ブックマーク経由で見た.
ただhtmlが

<h2><span></span>Worn Text</h2>

と空spanが入って気持ち悪い. 更に, はてなでは使えない. はてなで使えると言うと,

<h2><a href="#">Worn Text</a></h2>

位だろうなと思って色々試してみた.
h2とその下のaをz-indexで順番を入れ替える場合はFirefoxでのみ見える.
aの前に:beforeで空要素を作ってそれをaの上に重ねる場合はOperaでのみ大丈夫. こっちはFirefoxでテキストが消えて真っ白になる. 不思議だ.

12/25:
正しくは.

<h2>Worn Text</h2>

というhtmlに対して,

h2:before {
 content: " ";
}

と指定すると

<h2><span class="generated"> </span>Worn Text</h2>

となる筈なのでFirefox, Opera, Safariで正しく動作するかと思ったら, Firefoxが駄目. Operaは問題無し. Safariは未確認. Firefoxの実装がおかしいのか?

以下, ソース.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Khmerang.com: Worn Text CSS Example</title>
  <style type="text/css">
   /* http://www.khmerang.com/index.php?p=95 */
   h2#worn1 {
   font:3em/1em Times, serif;
   font-weight: bold;
   margin:0;
   position: relative;
   overflow: hidden;
   float: left;
   }
   h2#worn1 span {
   position: absolute;
   width: 100%;
   height: 1em;
   background: url(wornpattern.gif);
   }
   p {
   clear: left;
   }

   /* Variant - no empty span */
   h2#worn2 {
   font:3em/1em Times, serif; font-weight: bold;
   width: 10em;  height: 1em;
   margin:0; padding: 0;
   z-index: 0;
   position: relative;
   background: transparent url(wornpattern.gif);
   }
   h2#worn2 a {
   display: block;
   width: auto;
   height: 1em;
   position: absolute;
   top: 0px; left: 0px;
   z-index: -1;
   text-decoration: none;
   }
   
   /* Variant - no empty span, using :before */
   h2#worn3 {
   font:3em/1em Times, serif;
   font-weight: bold;
   margin:0; padding: 0;
   width: 10em; height: 1em;
   position: relative;
   }
   h2#worn3 a {
   text-decoration: none;
   display: block;
   z-index: 2;
   position: absolute;
   top: 0; left: 0;
   border: 1px solid blue;
   }
   h2#worn3 a:before {
   content: " ";
   display: block;
   position: absolute;
   width: 100%;
   height: 1em;
   z-index: 5;
   background: transparent url(wornpattern.gif);
   border: 2px dashed red;
   }
  </style>
 </head>
 <body>
  <h1>Worn Text Sample</h1>
  <h2 id="worn1"><span></span>Worn Text</h2>
  <p>See the Khmerang.com article on
   <a href="http://www.khmerang.com/index.php?p=95">Worn text CSS</a>
   for more information on this CSS technique.
  </p>
  <h2 id="worn2"><a href="#">Worn Text</a></h2>
  <p>See the Khmerang.com article on
   <a href="http://www.khmerang.com/index.php?p=95">Worn text CSS</a>
   for more information on this CSS technique.
  </p>
  <h2 id="worn3"><a href="#">Worn Text</a></h2>
  <p>See the Khmerang.com article on
   <a href="http://www.khmerang.com/index.php?p=95">Worn text CSS</a>
   for more information on this CSS technique.
  </p>
 </body>
</html>