円形グラデーション ページ16
##
グラデーションを円形にすることもできます。
その場合、radial-gradientを使います。
*
linear(リニアー)は、「直線の」
radial(ラジアル)は、「放射状の」
という意味があります。
円になるので、さらに設定が複雑で、難しくなります。
例として、真ん中が白、外側が赤のグラデーションを用意しました。
{
background:radial-gradient(ellipse closest-side at center,#fff,#f00);
}
1つずつ説明していきます。
・ellipseのところ
グラデーションの形を決めます。
設定できるのは、ellipse(だ円)と、circle(真円、完全の丸い円)の2つで、何も書かない場合はellipseになります。
・closest-sideのところ
グラデーションのサイズ、つまりグラデーションの終わるところを決めます。
以下の4つから選びます。
closest-side : 最も近い辺がグラデーションの終了位置となる
farthest-side : 最も遠い辺がグラデーションの終了位置となる
closest-corner : 最も近い角がグラデーションの終了位置となる
farthest-corner : 最も遠い角がグラデーションの終了位置となる
何も設定しないと、一番下のfarthest-cornerになります。
・at centerのところ
グラデーションの始まる位置を決めます。
画像などと同じになります。
at top left にすると、左上からグラデーションが始まります。
何も書かなければ、at centerで真ん中からスタートします。
・#fff、#f00のところ
色の設定です。
1つ目が、始まりの色で、例だとat center(真ん中)の色になり、2つ目が終わりの色で、例だとはじの色になります。
linear-gradientと同じく、3色以上も設定できます。
また、半角スペースで、どの色をどこまで、ということも設定できます。
円形のグラデーションの画像を用意するのはなかなか難しいので、CSSで設定すると楽ですね。
グラデーションの使い所の話ですが、em7は、主に画像にグラデーションを重ねて使っています。
色が濃い所に半透明の白をグラデーションでかけています。設定を変えれば画像の雰囲気を壊さずに一部分だけ色を薄くする事が出来るので便利です。
##
134人がお気に入り
この作品を見ている人にオススメ
「CSS」関連の作品
感想を書こう!(携帯番号など、個人情報等の書き込みを行った場合は法律により処罰の対象になります)
さくさく - 参考にさせていただきます。ありがとうございます! (12月13日 19時) (レス) id: 8125d01b3c (このIDを非表示/違反報告)
青い鳥 - 参考にさせてもらいました。関係ないんですけど100票目に評価しました (10月17日 17時) (レス) @page27 id: 55adadd6b3 (このIDを非表示/違反報告)
ぽんきち丸ドリーム号(プロフ) - 参考にさせていただきました、、!ありがとうございます!! (7月10日 9時) (レス) @page27 id: 2431247bf4 (このIDを非表示/違反報告)
雨の緑茶。(プロフ) - ゆゆゆ。さん» 失礼します。em7様とは関係のない者ですがご回答させていただきます。もう解決されているかなと思いますが、一応https://uranai.nosv.org/u.php/novel/hetadesum4/の「画像のサイズ変更」ページに載っているかと。 (2023年3月17日 14時) (レス) id: 2f0ba08fc2 (このIDを非表示/違反報告)
おはぎ(砂糖・おはぎサブ垢) - 参考にさせていただきました (2022年11月27日 11時) (レス) @page35 id: dfee7c88d4 (このIDを非表示/違反報告)
作品は全て携帯でも見れます
同じような小説を簡単に作れます → 作成
この小説のブログパーツ