新・オタクAtomの作り方

これも以前紹介した方法のバージョンアップ版。

この方法では、CSSをごちゃごちゃ書き換える上に、いろんなテーマに対応することができなかった。これでは移植性が低いので、プログラマ的にはゴミである。

そこで解決策を考えた。

簡単に言ってしまえば、bodyの真上に1つレイヤーを作って、そこに載せればいいじゃん、という話だ。body::after要素のCSSを定義すればいいだけだし、最強っぽい。

しかしこれには2つ問題点がある。1つめは、マウスクリックが効かないという問題。これは  pointer-events: none; という指定をしてあげることで回避できる。

もう1つは、上に載せるために下のあるべきテキストが隠れてしまう(透過にしても薄くなってしまう)という問題である。これはブレンドモードを利用しよう。いろいろ試した結果、乗算モードが一番きれいになった。乗算モードであれば、背景が暗くても明るくてもだいたいマッチする。  mix-blend-mode: multiply; を指定してやればよい。他のを試したければ、このへんを参考にすると良い。

最終的にはこんな感じになった。

幅とか高さとかを指定してあげないとうまくいかなかったので、lessで直に計算してあげることにした。濃さが気に入らなければopacityを調整すれば十分。

実際に表示してみるとこんな感じ。どちらでもそんなに違和感がない。ぜひお試しあれ。

スクリーンショット 2016-04-28 14.23.48 スクリーンショット 2016-04-28 14.24.19

なお画像はしらたま先生の「あくびチノちゃん」を拡大して背景透過処理をしたもの。


カテゴリー: Atom

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です