CSS3グラデーションで右端だけフェードする線を作成する方法

2023/09/04 17:47

このQ&Aのポイント

CSS3グラデーションを使用して、右端のみフェードする線を作成する方法について教えてください。
具体的な手法やコード例を教えていただけると助かります。
また、フェードアウトする線を左端に配置する方法についても教えてください。

ベストアンサー

CSS3グラデーションで、右端だけフェードする線を

2013/03/06 00:25

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%);

re97
お礼率80% (601/744)

CSS
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/03/06 10:53 回答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()で指定した値を変化させれば良いです。

質問者

お礼 2013/03/15 17:40

回答ありがとうございましたー

関連するQ&A

CSS3 chromeでグラデーション
いつもお世話になっております。こちらのサイトに書かれている方法で、 http://monodez.com/create/gradient.html firefoxに対応した background: -moz-linear-gradient(left 45deg, #cff, #0ff);　/* Firefox用 */ というのがありました。これをchrome用のwebkitで同じように再現することはできませんか？ -webkit-gradient(linear, left top 45deg, right bottom, from(#cff,), to(#0ff)); や、 -webkit-gradient(linear, 45deg, from(#cff,), to(#0ff)); などではできませんでした・・・基本的なことで申し訳ありませんが、どなたかご教授ください。よろしくお願い致します。
- ベストアンサー
- CSS
CSS グラデーションが反映されない
DreamWeaverでサイトを制作しています。下記のように書いてもブラウザ上にグラデーションが反映されないのですが、どういった原因が考えられるのでしょうか？ #header{ color:#fff; background-color:#F60; 　　moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4); /* For WebKit (Safari, Google Chrome etc) */ 　background:-webkit- gradient(linear, top, bottom, from(#f60), color-stop(0.3,#C30), to(#fff)); 　/* For Mozilla/Gecko (Firefox etc) */ 　background: -moz- linear-gradient(-45deg, #f60, #fff); 　/* For Internet Explorer 5.5 - 7 */ 　filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F06000, endColorstr=#FFFFFFFF); 　/* For Internet Explorer 8 */ 　-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)"; } フォントについてやbox-shadow等は反映されるのですが、グラデーションだけが。。宜しくお願いします。
- ベストアンサー
- HTML
CSS見出し文字大きさ
CSSまったくの素人です。こちらのサイトからコピペした https://jajaaan.co.jp/css/css-headline/ 上下線グラデーションの見出しの文字の大きさを変更したいのですが方法がわかりません。 HTML <h3>CSS見出しデザイン</h3> CSS h3 { position: relative; padding: 1.5rem 2rem; color: #000000; text-shadow: 0px 15px 10px #ff8c04; -webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, .1); box-shadow: 0 2px 14px rgba(0, 0, 0, .1); } h3:before, h3:after { position: absolute; left: 0; width: 100%; height: 4px; content: ''; background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); } h3:before { top: 0; } h3:after { bottom: 0; } font-size:をどこへ記載すれば良いのでしょうか？よろしくお願いいたします。
- ベストアンサー
- CSS
ギザギザボーダーの向きを下向きにしたいのですが
CSS3初心者です。宜しくお願いします。 Jagged Border http://codepen.io/SomeStuffer/details/uwstc ヘッダーとフッターに配置したいのですが、ヘッダーでギザギザが逆にならなくて困ってます。画像のようにしたいのですが、CSSのどの部分を変更したらよいでしょうか。宜しくお願いします。 .jagged-border { position: relative; width: 100%; height: 50px; -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 2px); filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 2px); } .jagged-border:before { content: ""; display: block; position: absolute; top: -10px; width: 100%; height: 10px; } .lightgray-bg { background: #ECF0F1; } .lightgray-bg:before { background: -webkit-linear-gradient(45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%); background: linear-gradient(45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%); -webkit-background-size: 20px 40px; background-size: 20px 40px; } .white-bg { background: #FFF; } .white-bg:before { background: -webkit-linear-gradient(45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%); background: linear-gradient(45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%); -webkit-background-size: 20px 40px; background-size: 20px 40px; } .darkgray-bg { background: #C3C9CC; } .darkgray-bg:before { background: -webkit-linear-gradient(45deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%); background: linear-gradient(45deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%); -webkit-background-size: 20px 40px; background-size: 20px 40px; }
- 締切済み
- CSS
cssのボタンについて（IEで背景が表示されない）
リンク先を表示するためにcssでボタンを以下のように作製しました。 FireFoxでは正常にきちんと表示されるものの、 IE10で確認したところ、IEでは背景色が表示されませんでした。そこでzoom: 1;などを足すなどしてみたのですがやはり表示されません。どうしたらいいのかご指南いただけませんか？どうかよろしくお願いいたします。 a.btn { position: relative; background: -moz-linear-gradient(top,#0099CC 0%,#006699); background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699)); border: 2px solid #FFF; color: #FFF; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3); -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3); text-shadow: 0px 0px 3px rgba(0,0,0,0.5); padding: 10px 10px; margin: 4px 2px 4px 2px; ｝
- ベストアンサー
- CSS
CSSのカスタマイズについて
ライブドアブログを最近始めたのですが、素人にも関わらずカスタマイズしたいと思っています。タイトル部分を中央に揃えたいと思っているのですがどのようにしたらいいかさっぱりわかりません。カスタマイズのページをコピペします。よろしくお願いします。 /* ブログのヘッダー、タイトル、説明 ----------------------------------------------- */ #blog-header { margin-bottom: 40px; position: relative; } #blog-header-inner {} #blog-header-image { height: 400px; width: 100%; background-color: #287cba; background-image: -webkit-linear-gradient(#57bef5 0%, #287cba 100%); background-image: -moz-linear-gradient(#57bef5 0%, #287cba 100%); background-image: -ms-linear-gradient(#57bef5 0%, #287cba 100%); background-image: -o-linear-gradient(#57bef5 0%, #287cba 100%); background-image: linear-gradient(#57bef5 0%, #287cba 100%); } #blog-title { font-size: 40px; font-weight: bold; line-height: 1.4; margin: 30px 0; } #blog-title a { color: #000; } #blog-description { color: #979797; font-size: 14px; font-weight: normal; line-height: 1.6; margin: 30px 0; } #blog-description a { color: #979797; }
- 締切済み
- SE・インフラ・Webエンジニア
ブログの背景　グラデーションにするには（HTML）
gradient関数みたいなものを使って body , #sub h2 span , dl#pagetop-link a { background: -moz-linear-gradient(rgb(113, 183, 198) 0%, rgb(255, 255, 255) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(113, 183, 198)), color-stop(100%, rgb(255, 255, 255))); background-attachment:fixed } によってブログの背景にグラデーションをつけることができました。しかしこの関数はブラウザによっては機能しないようです。別のブラウザでも機能するようにするにはどうすればいいでしょうか？
- ベストアンサー
- ブログ
CSS/HTML で画像 2枚重ねた上に文字。
最近ホームページを作成しているのですが、画像 2 枚を重ねて、その上にリンク付きの文字をのせるにはどのようにしたらよいでしょうか。 CSS を構い始めたのは 1 週間程度なので、基礎的なこともわかってない部分があります。いろいろ試して、(3)が近いような気がしますが、(1)、(2)に付け加える形でもよいので、ご教授お願いします。以下、私が試した 3 パターンの方法です。数値、画像は適当な値です。 (1) 画像 1 枚の上に文字を入れた形。※画像 2 枚目を重ねられませんでした。 --------------------------- --- CSS --- #img1 { background-image : url(img1) ; background-repeat : no-repeat ; width : 100px; height : 100px; /* -- 各ブラウザ対応用 -- */ transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } --- HTML --- <DIV class="img1">タイトルなどのテキスト</div> --------------------------- (2) 画像を 2 枚重ねた形。 ※文字を上に載せれませんでした。 --------------------------- --- CSS --- #img1 { background-image : url(img1) ; background-repeat : no-repeat ; width : 100px; height : 100px; /* -- 各ブラウザ対応用 -- */ transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .img2 { padding: 50px 0 0 0px; /*2枚目の画像の位置調整*/ } --- HTML --- <div id="img1"> <img class="img2" src="red-star.png" width="横" height="高さ"> </div> --------------------------- (3) 画像 2 枚を重ねた上に文字を載せた場合。 ※思ったとおりに表示できました。が、何故か<a href="#">テスト</a> のリンクができません。。。 --------------------------- --- CSS --- #img1 { position: relative; bottom :-100px; left: -80px; width : 250px; height : 80px; transform: rotate( -15deg ); -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); z-index: 2; } #img2 { position: relative; bottom :90px; left: 80px; width : 200px; height : 40px; transform: rotate( -15deg ); -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); z-index: 1; } #MENU { position: relative; bottom :725px; left: -25px; transform: rotate( -15deg ); -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); z-index: 3; } --- HTML --- <div id="img1"><img src="img1" width="100" height="100"></div> <div id="img2"><img src="img1" width="100" height="100"></div> <div id="MENU"><a href="#">テスト</a></div> ---------------------------
- 締切済み
- HTML
monacaで使うcssの釦の色を変えたい
現在monacaのiOSのアプリ作成の練習しています。掲載したようなボタンのCSSを並べてみました。 <a class="button--large" href="mentenance_index.html">テスト1</a> <a class="button--large" href="mentenance_index.html">テスト2</a> <a class="button--large" href="mentenance_index.html">テスト3</a> このときにこのボタンの色を変えたいと思うのですが、 "css/style.css" このファイルのbutton--largeクラスのどの部分を修正すれば色は変わりますでしょうか？ちなみに、 .button--large { .....（中略）...... background-color: #1284ff; .....（中略）...... } この部分だと自分は思い、 background-color: #00008b;　　というダークブルーのような設定に変更してiphoneでデバッグしてみたのですが、色が変わってくれませんでした。この button02--large クラスの内容も掲載させて頂きます。どうぞ、ご教示の程よろしくお願い致します。 .button--large { text-align: center; position: relative; display: inline-block; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-background-clip: padding-box; background-clip: padding-box; padding: 0; margin: 0; font: inherit; color: inherit; background: transparent; border: none; font-family: 'Helvetica Neue', Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; height: auto; text-decoration: none; padding: 4px 20px; font-size: 16px; line-height: 36px; letter-spacing: 0; color: #fff; text-shadow: 0 1px none; vertical-align: middle; background-color: #1284ff; -webkit-box-shadow: none; box-shadow: none; border: none; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; -moz-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; -o-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; font-weight: 400; font-size: 16px; font-weight: 500; line-height: 36px; padding: 4px 20px; display: block; width: 100%; } .button--large:active { background-color: #1284ff; -webkit-box-shadow: none; box-shadow: none; color: #fff; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; opacity: 0.6; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .button--large:disabled { opacity: 0.3; cursor: default; pointer-events: none; } .button--large:hover { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .button--large:focus { -webkit-box-shadow: none; box-shadow: none; outline: 0; }
- ベストアンサー
- CSS
css3でボタンの中にアイコンを表示するには？
css3でリンクボタンのデザインを作っています。グラデーションや角の丸め、影の付け方はわかりました。しかしボタンの中にアイコンを入れる方法がネットを探しても全く見つかりません。アイコン画像を用意して、どのようにしてボタンの中に表示させればよいのでしょうか？（画像の赤い矢印で示した部分です）作っているcssは以下のような感じです。 a{ 　　border-top: 1px solid #57b4ff; 　　border-left: 1px solid #57b4ff; 　　border-right: 1px solid #0d78ff; 　　border-bottom: 1px solid #0d78ff; 　　-webkit-border-radius: 3px; 　　-moz-border-radius: 3px; 　　border-radius: 3px; 　　-webkit-box-shadow: 1px 1px 2px #a2c1dc; 　　-moz-box-shadow: 1px 1px 2px #a2c1dc; 　　background: -moz-linear-gradient(top, #fff, #ccc); 　　background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); } よろしくお願い致します。
- ベストアンサー
- CSS