2016-06-23 13 views
2

要素を100%から0%の不透明度で上から下にフェードインする方法や回避策はありますか?線グラデーションの背景に似ていますが、要素自体の透明度(背景色ではありません)。CSSの要素に透明度グラデーションを行う方法は?

The idea is that on the hover state, it would brighten up, and when clicked, move up to the spot of the active popup

アイデアがあります

+0

ウェブ上には多くの「CSSグラデーションジェネレーター」があります。あなたは正しい色/透明を得るために見つけることができます。その後、ツールキット(例:jQuery)を使って移行プロセスを管理します。 HTML5はグラデーションとトランジションを良好にサポートしています。 –

+1

Chrisに感謝します。背景色の線形グラデーションを参照していると思いますか?私が見たすべてのグラデーションジェネレータは、背景色のCSSコードを生成します。しかし、私は要素の中の子供たちに不透明度を適用する要素に不透明度勾配を作成するためにCSSを使用する方法を見つけていません。これを行うにはCSSプロパティが組み込まれているとは思わないが、いくつかのクールなトリックは、他のCSSコンセプトのためにスタックオーバーフローで人々がここに来たので、私はコミュニティに尋ねると思った。 – Gisheri

+0

はい、あなたは正しい。 (半)透明なCSSの背景色は、コンテンツや子には影響しません。 'opacity' CSS要素は、私はあなたがこれで勾配を行うことができるとは思わないでしょう。 –

答えて

0

ホバー状態で、それが明るくなり、そして、クリックすると、アクティブなポップアップのスポットまで移動することで、オンラインでのCSSジェネレータの多くなぜドン」あなたはそれを使用します。

ここにはヘルプリンクがあり、そこに行き、希望するグラデーションを生成します。

http://www.colorzilla.com/gradient-editor/

0

[OK]を、私は透明性の二つの異なるタイプを参照して、最初のものはちょうどそのようアルファCSSです:

div { 
     opacity: 0.5; 
     filter: alpha(opacity=50); 
    } 

このスタイルはentiredのdivは(カスタム対話を共有して透明に)、ページのボタンにリニアグラデーションスタイルを作成するもう1つのCSS:

#bottom_fade { z-index: 99; 
      position: fixed;  
      bottom: 0%; 
      background-image: url("bottom-fade.png"); 
      /*in your case use a grey image with transparency*/ 
    } 

またはあなたがあなたのページのすべてのボタンをカバーし、線形グラデーションを追加DIV使用することができます。うまくいけば、このスニペットは、あなたが、よろしく役立ちます

#grad { 
    background: red; /* For browsers that do not support gradients */ 
    background: -webkit-linear-gradient(red, yellow); 
    /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(red, yellow); 
    /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(red, yellow); 
    /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(red, yellow); /* Standard syntax */ 
} 

を。

関連する問題