CSS3グラデーションで、右端だけフェードする線を
CSS3グラデーションで、右端だけフェードする線を作成したいのですが、どうすれば良いでしょうか?
・下記リンク先では、中央に位置した線の両端がフェードアウトしているのですが、
これを左端に位置させ、線の右端部分だけをフェードアウトさせたいのですが、どうすれば良いでしょうか?
▽[CSS]画像無しで、両端にいくにつれ薄くなるラインを描くテクニック | コリス
http://coliss.com/articles/build-websites/operation/css/css-tutorial-fading-dark-gradient-by-cyberap.html
できれば、この部分を解説して欲しいのですが、アレでしたら、完成形だけでもどこかに上げていただけないでしょうか?
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%);
お礼
>width: と height: を入れるとどうでしょう。 これでもうまくいかず、すべて書き直したところ機能しました。 おそらく全角スペースが途中に入っていたためにブラウザが認識できなかったことが原因ではないかと思われます。 ご回答ありがとうございました。