『Dental Clinic』の模写コーディング ボタンの色が徐々に変える方法が分からない。

Question

お忙しい中ありがとうございます。

現在使用　アプリケーション・機種情報

Mac OS Catalina(今の時代は違います)・ Google Chome・Visual Studio Code

前提・実現したいこと

Dental Clinicの模写コーディングをしていまして、現在トップページのボタン部分を作っていまして理想はこんな感じにしたいのですが今はわかりません...なのでteratailで質問をさせていただきました。

該当のソースコード

					<div class="navi">
						<!-- ナビゲーション ここから -->
						<ul>
							<li><a href="index.html" class="first"><span class="titleJa">トップページ</span><span class="titleEn">HOME</span></a></li>
							<li><a href="clinic.html"><span class="titleJa">医院紹介</span><span class="titleEn">CLINIC</span></a></li>
							<li><a href="service.html"><span class="titleJa">診療案内</span><span class="titleEn">SERVICE</span></a></li>
							<li><a href="https://saruwakakun.com/wsss" target="_blank"><span class="titleJa">院長・スタッフ紹介</span><span class="titleEn">STAFF</span></a></li>
							<li><a href="access.html" class="last"><span class="titleJa">アクセス</span><span class="titleEn">ACCESS</span></a></li>
						</ul>
						<!-- ナビゲーション ここまで -->
					</div>

.navi ul li {
    display: inline-block;
    color: #4D82C4;
    background: linear-gradient(#05FBFF, #1D62F0 ) fixed;
    text-align: center;
    opacity: 1;   
}

試したこと

(例)

.navi {
   background: linear-gradient(#05FBFF, #1D62F0 ) fixed;
}

のように変えてみましたが変化はありませんでした。

補足情報

出来ればでいいのですが最初と最後のBOXの部分が角が丸くしたいのですがそこも分からないので出来れば教えていただけないでしょうかよろしくお願いします。
もし分かる人がいれば教えていただけないでしょうかよろしくお願いします。

Comments

[m.ts10806]

CSSこれだけですか？

[Rwight]

えーとまだ作り終えていないので...

[Rwight]

今現在大体の部分のCSSの編集をさせていただきました。

Answer 1

色がちょっと近い（同系統）気がします。
#05FBFF
#1D62F0

もっとわかりやすい色にすると適用されているのが分かります。

   background: linear-gradient(#fff, #000 ) fixed;

linear-gradientの仕様とか確認した感じ、<color-hint>とか%によって変化の中央点を調整すれば、今の指定でも変化が分かりやすくなるかもしれません。

fixed外すと結構分かりやすくなりましたよ。

Comments

[Rwight]

[ m.ts 10806さん ]お忙しい中、ご回答ありがとうございます。
このCSSのコードで試してみようと思います。ありがとうございました。

[m.ts10806]

少し試した結果を追記してます。
fixedつけると同系色の効果減るのかもしれませんね。

[Rwight]

[ m.ts 10806さん ]ありがとうございます。
でもまだ問題点はありますがもう少ししたらまた質問するかもしれませんのでまたその時もよろしくお願いします。

[m.ts10806]

リンクとして提示したMDNの仕様書は読んで、いろいろ試してみると良いです。
オプションは相互作用、干渉することもあるので、関係性なども試して確認しておきたいですね（一番簡単な例が、backgroundのcolorとimageは併用不可能とか）

[Rwight]

[ m.ts 10806さん ]色々教えてくださってありがとうございました。????‍♂️
また質問をした時はまた教えてもらえないでしょうかよろしくお願いします。

[m.ts10806]

あくまで不特定多数からアドバイスを厚意で得る場なので、
必ず答えるという保証はないです。
自分の都合の良い時間に独り占めできる「選任」をお求めでしたら、メンターを使った方が良いでしょう（「家庭教師」のようなものなのでもちろんそれなりの対価は必要）