ここ最近、css のネタばかり書いてるな〜と思ったら、ホームページ制作の仕事ばかりしていることに気がついた。
別に悪いことではないが、どんなホームページデザインでも、模写することができると豪語していたのですが、ある要素を作ることがどうしてもできなくて、困って、解決できたので、備忘録しておきます。
今回の目的
いったいどんな要素だったのかというと、ホームページのバナーで表示する
画像のフチをボカすというので次のような感じのデザインでした。
※フチボカしの感じが伝わればOKなので、画像は今テキトーに作ったものです。
２つの画像を組み合わせて小さい方の画像のフチボカシぐらいできるだろうと思っていました。
そして、今どきのCSSなら簡単だろうと思っていたところ、めちゃくちゃ難しかったという事をコーディングを始めた後に思い知ることになります。
そして、どこのサイトにも書かれていないので、自分で作ってブログ公開しておくことにしました。
事前準備
まず基本となる背景画像と、その上にフチをボカす画像を用意します。
背景画像
フチをボカす画像
sample.html
<div class='blur-edge'>
<img class='bg' src="bg.jpg"/>
<div class='blur'><img class='item' src="character.jpg"/></div>
</div>
sample.css
.blur-edge{
position:relative;
}
.blur-edge .blur{
width:auto;
height:50%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.blur-edge .blur img.item{
width:100%;
height:100%;
object-fit:cover;
}
表示（ぼかし前）
ほとんどのサイトで紹介されているボカし方法
上記のサンプルコードに次のようなコードを追記すると、フチのボカしを作ることができます。
.blur-edge .blur{
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.blur-edge .blur::after{
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 10px 15px #FFF;
}
ボカしたい画像を囲むためのdivタグを上位階層に配置するのがポイントです。
※画像のサイズと同じにします。
フチができても、背景色が白いものにしか適応できません。
今回のサンプルの様に背景画像がある場合は、フチを透明色でボカしてくれないと何の意味もないんです。
blur + blend-mode
そこで、考えたのが、次のやりかたです。
mix-blend-mode:multiply
.blur-edge .blur{
mix-blend-mode: multiply;
}
mix-blend-mode:darken
.blur-edge .blur{
mix-blend-mode: darken;
}
mix-blend-mode:lighten
.blur-edge .blur{
mix-blend-mode: lighten;
}
mix-blend-mode:screen
.blur-edge .blur{
mix-blend-mode: screen;
}
他にもいろいろなモード設定があるので、リファレンスサイトで、背景に馴染むモノを探して、ドンピシャがあれば、これでいいんですが、背景画像の色味とボカしたい画像の色味の関係で、この設定が変わってきます。
mix-blend-mode リファレンスサイト
https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode
mask
四苦八苦した挙げ句、以下の方法で、完璧にフチのボカしができることが分かりました。
.blur-edge .blur{
--size-blur:20%;
-webkit-mask-image: linear-gradient( 0deg, transparent 0%, white var(--size-blur) calc(100% - var(--size-blur)), transparent 100%);
}
.blur-edge .blur img{
-webkit-mask-image: linear-gradient( 90deg, transparent 0%, white var(--size-blur) calc(100% - var(--size-blur)), transparent 100%);
}
解説
imgタグに直接記述する方法で、できなかったのがくやしいですが、mask-imageのグラデーション指定で、上下と左右をそれぞれ透明設定することで実現できました。
１階層でできる方法があれば、この記事に追記したいと思います。
