CSS3グラデーションで、右端だけフェードする線を作成したいのですが、どうすれば良いでしょうか?
・下記リンク先では、中央に位置した線の両端がフェードアウトしているのですが、
これを左端に位置させ、線の右端部分だけをフェードアウトさせたいのですが、どうすれば良いでしょうか?
▽[CSS]画像無しで、両端にいくにつれ薄くなるラインを描くテクニック | コリス
http://coliss.com/articles/build-websites/operat …
できれば、この部分を解説して欲しいのですが、アレでしたら、完成形だけでもどこかに上げていただけないでしょうか?
background-image:
linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)),
linear-gradient(0deg, rgba(214,198,175,0), rgba(214,198,175,0.8) 50%, rgba(214,198,175,0)),
radial-gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%);
background-image:
-o-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)),
-o-linear-gradient(0deg, rgba(214,198,175,0), rgba(214,198,175,0.8) 50%, rgba(214,198,175,0)),
-o-radial-gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%);
background-image:
-ms-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)),
-ms-linear-gradient(0deg, rgba(214,198,175,0), rgba(214,198,175,0.8) 50%, rgba(214,198,175,0)),
-ms-radial-gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%);
background-image:
-moz-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)),
-moz-linear-gradient(0deg, rgba(214,198,175,0), rgba(214,198,175,0.8) 50%, rgba(214,198,175,0)),
-moz-radial-gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%);
background-image:
-webkit-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)),
-webkit-linear-gradient(0deg, rgba(214,198,175,0), rgba(214,198,175,0.8) 50%, rgba(214,198,175,0)),
-webkit-radial-gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%);
No.1ベストアンサー
- 回答日時:
フェードアウトとは、時間経過によって変化することですよ。
ならtransition [transition-property transition-duration transition-timing-function transition-delay ]を使用することになります。
<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
のa要素をdisplay:blockにして配置し、linear-gradient()で指定した値を変化させれば良いです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript 画面に表示したらアニメーションを開始したい 3 2023/01/13 15:38
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- 数学 あってますか? 2 2022/05/30 19:01
- 数学 効用関数と直線:なぜ直線になる? 3 2022/06/04 20:39
- その他(プログラミング・Web制作) Pythonでのアニメーション 1 2023/06/01 15:58
- 物理学 物理 50Ωの抵抗、60mFのコンデンサ、100Vの起電力の電源、および、スイッチが直列に接続されて 2 2022/11/23 01:32
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
liタグの中に<p>タグやら<dl>を...
-
ulとliで囲った文字の一部を変...
-
親ページ側からインラインフレ...
-
html 横並びのリストを中央寄せ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
CSSが上手く反映されないみたい...
-
HTMLで組織図を作成する方法
-
URLにアクセスした際に指定した...
-
リストの数字のフォントサイズ...
-
UL OL タグのインデントについて
-
html/cssの、navを2段にする...
-
Dreamweaverで、ul要素の下に写...
-
javascriptのアコーディオンメ...
-
Webサイトにスライディングサイ...
-
jQuery等で背景をフル表示+ス...
-
display:table;を多段表示させたい
-
リスト(ul / li)タグの左イン...
-
<table>の高さ固定。情報増加時...
-
ieでのみCSSのcontentが効かない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
html <ul></ul>の並びで一行空...
-
ページを開いているときのリン...
-
HTML5のfooterに見出しを付けて...
-
html/cssの、navを2段にする...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報