CSS filter brightnessなどなど
この内容は、筆者が『ゲームブックを作ったり遊んだりするサイト(アプリ』を作る四苦八苦の記録です。
さて前回まで"ngClass"やCSS変数を使えるようになり、ゲームブックの画像枠のデザインを色々いじれそうな気がして、頑張ったところの残念なお知らせです。
枠の種類(背景画像など)を指定する位は、ある程度前から出来ていた訳ですが、この画像に明度やグレイスケール化あるい(場合によってはアニメーションも付けられるのではないかと奮闘していた訳です。
作成途中のサイトです
https://aticlab.com/webapp/gamebook/home
それで実際の所、様々な効果をつけることに成功したのですが、ここで落とし穴がありました。
HTMLと言うのは、入れ子構造になっていて、大きな箱の中に中くらいの箱があり、その中に小さい箱があるようなイメージで考えて頂ければと思います。
今回のブックの”枠”は、ある程度外側にあるのですが、”枠”を明るくした場合でも中の”テキスト”まで明るくするわけにいかないのは、想像して頂けると思います。
ところが、”枠”を明るくするのに使用した"filter"と言う技術は、中の箱で解除できるようなものではありませんでした。
参考サイト
CSS | filterプロパティは子要素、疑似要素で解除はできない
https://1-notes.com/css-release-the-filter-property/
また、外を明るくしたのなら、中をその分暗くしてやればいいと言うアイデアも試しましたが、とても奇妙な結果(文字部分だけが明るくなったり背景の白が灰色になったり)になり、使えるようなものではないでした。この部分は、CSSの実装の誤りではなかろうか？と初心者ながらに思いました。
こうなると、出来ることは枠用の画像ごとにいくつか明度を変更させたものを別画像として用意する位かなと考えています。
とても、本当にとても勉強になりましたが、ちょっと徒労感が残る結末でした。
