Recent searches
Search options
CSS の conic-gradient は、円グラフみたいなベタ塗りに使おうとするとジャギーをごまかしにくいんだよねえ。linear-gradient と radial-gradient は境界を短いグラデーションとして描けばいいけど、conic-gradient は中心からの距離に依って幅が違うから、同じ方法が使えない（少なくともあまり効果的でない）。
今の Mofu UI では、ブーストされた投稿のプロフ画像の重ね合わせに radial-gradient による mask を使ってて、境界に 0.6 画素の幅を持たせています。半径 25 画素の円を描きたいので、実際には「24.7px」から「25.3px」までのグラデーションにする。
中心位置を僅かにずらして半透明の conic-gradient を何枚か重ねるという手が考えられる。複雑…。
何で境界の幅を 0.6 画素にしてるかというと、
・ 画素等倍の表示器で充分にアンチエイリアスされる
・ 物理画素の密度が CSS‐画素の二倍（長さ当たり）になっている表示器でボンヤリしない
・ 値が扱いやすい（プラス 0.3 とマイナス 0.3 を指定すればいい）
…という感じです。
conic-gradient でもドーナツ状にして使う場合とかは、中心からの距離に依る幅の違いが制限されるから、短いグラデーションを挟むだけの方法で実用的な効果が得られそう。
@tizerm@mofu.kemo.no@sayunu あまりにもちゃんとCSSやHTMLと向き合うのが久しぶりすぎて「今のCSSこんなこともできんの！？」の連続です……知識がおじいちゃん……
@tizerm 昔に比べたら色んな事ができるようになったねえ。calc、var、flex、transition、昔は背景画像も一枚だったし拡縮できなかったしな…。