hogashi.*

日記から何から

text-shadowで文字の影だけ見せる

 CSS の text-shadow は、ぼかしは無しでずらすだけというのもできる。なので、めちゃくちゃずらすと文字が複製されたように見える。 MDN で書かれている例だとこう。

text-shadow: 5px 10px;

f:id:hogashi:20210619063151p:plain

https://developer.mozilla.org/ja/docs/Web/CSS/text-shadow

 つまりこういうことができる。画面外とかに文字を隠して、影だけを見せる。影の色も指定できるので好きな色にもできる。 https://atom-copper-cement.glitch.me/

お試し iframe コーナー

f:id:hogashi:20210619064649p:plain
Cmd-A の様子

 影の部分は、カーソルをホバーしても I 形のカーソルにならないし、文字選択もできないように見える。あと、影の後ろに他の文字をこっそり置くと、全然違う文字を選択させることもできる (例では HELLO, WORLD は影で、 SECRET STRING を白色で後ろに置いている)。

 実は元の文字も HTML 文書的には存在するので、カーソルをうまくドラッグしたり、 Cmd-A とかしたりすると、実は選択できる。何に使えるかはわからない。