[css]透過グラデーションを綺麗にする案

photoshopでもグラデーションは悩みの種。WEB制作においては画像やらcssやら、複数箇所で気にしなきゃいけないから面倒ですね。

対象とか経緯とか

個人的によく使うのは透明度だけを指定するグラデーション。画像とかを背景色になじませる感じで、::beforeとかに仕込んだりする。大味でいい場合は普通にやればいいんだけど、それこそ画像に重ねるとなんかもっさりして微妙な感じがしたりする。ちょっとした幅ならまだ気にならないけど、100pxとかになると気になってくる。どうにかならないの、って話。

ということで、透明度操作のグラデーションをいい感じにするためのハウツー。

参考

要するに、始点と終点だけの指定じゃなくて刻んで書いたらいい感じになるよ、という話。

ベース

    background: linear-gradient(to right,
    rgba(【RGB】, 1) 0%,
    rgba(【RGB】, 0.738) 19%,
    rgba(【RGB】, 0.541) 34%,
    rgba(【RGB】, 0.382) 47%,
    rgba(【RGB】, 0.278) 56.5%,
    rgba(【RGB】, 0.194) 65%,
    rgba(【RGB】, 0.126) 73%,
    rgba(【RGB】, 0.075) 80.2%,
    rgba(【RGB】, 0.042) 86.1%,
    rgba(【RGB】, 0.021) 91%,
    rgba(【RGB】, 0.008) 95.2%,
    rgba(【RGB】, 0.002) 98.2%,
    rgba(【RGB】, 0) 100%
    );

1行目の「to right」はグラデーションの向きによって変える。この場合、左側が不透明で右側が透明になる。

透明度だけいじるから「【RGB】」は同じ内容を入れる。変数を入れたらいいじゃんって話だけどコンパイルとかめんどくさがるCSS直書き派なんで、こういうときはエディタの置換で書き換える。参考元は16進数のやつを入れてたけど動かなかったんで、普通にRGBの書式で書いたほうがいいと思います。

厳密に正しい表現かは置いておいて、単純に端から端まで均一で綺麗なグラデーションを作りたい場合のサンプル。途中から急に変化させる、濃くして薄くしてを連続させたいみたいなことをしたい場合には使えないので注意。これでやりたかったら<div>とかを並べてそれぞれにグラデーションを付与して幅をいじって向きをいじって、ってことになるね。めんどいから絶対やらないけど。

コメント

タイトルとURLをコピーしました