CSSで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック | コリス

17コメント 2019-11-26 09:40 コリス

CSSで斜めのラインを実装する時は、ちょっとした工夫が必要です。 画像やSVGでなく、CSSで実装すると角度やカラーを変更できる利点がありますが、斜めのラインがジャギってギザギザになってしまうことがあ

ツイッターのコメント(17)

linear-gradientで角度を設定した時に境界線がギザギザになるやつ、ここで紹介されている方法だと綺麗に直せなくないですか?
こんなんどうやって見つけてるんだ…いつもありがとうコリス
✅斜めのラインがギザギザを滑らかにするテクニック

CSSグラデーションでも、斜めの実装ができますが、ギザギザが出来てしまうのが難点だったのですが、滑らかにすることが出来るんですね❗
これ地味に助かるやつやん /
Discover(Google)から
これは実践的なテクニック。
>2番目の%に小数点を追加すると、グラデーションにわずかなぼかしが加わります。このぼかしが目立ちすぎないように、使用状況に応じて調整する必要はありますが、視覚的に滑らかなグラデーションになります!
地味だけどこういうハックの積み重ねなのよね、、


Cssで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック
@_incolors 1年くらい越しの疑問が解決するやつです。もうしてましたかね😅
Retinaディスプレイでは違いが分からないのではと思ったけど、よく見れば分かるな…
このテクニックは覚えておくといいやつ!!
こんな方法があったんですね!
SVGにしなくてもこれなら斜めのラインができるので頻繁に使うことになりそうです。

Cssで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック
以上
 
PR
PR