タグ付けされた質問 「css」

開いているタブに他のタブと区別するための影を付けたいタブ付きナビゲーションバーがあります。また、タブセクション全体に単一の影（下の水平線を参照）が表示され、開いているタブを除くすべてのタブの下部が陰になるようにしたいと思います。 CSS3のbox-shadowプロパティを使用してこれを行いますが、必要な部分だけをシェーディングする方法を理解できません。 通常、開いているタブの下部の影をコンテンツ領域（高いz-index）で覆いますが、この場合、コンテンツ領域自体に影があり、タブを覆い隠すだけです。 タブのレイアウト _______ _______ _______ | | | | | | ____ | _______ | __ | | __ | _______ | ______ シャドーライン。 影は水平線から上がり、垂直線の外側になります。 _______ | | _______________ | | _________________ これがライブの例です： 天才、助けはありますか？

115 html  css  shadow 

.item:hover { zoom: 1; filter: alpha(opacity=50); opacity: 0.5; -webkit-transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -ms-transition: opacity .15s ease-in-out; -o-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; } これは、ホバーインしたときだけ不透明度をアニメーション化し、オブジェクトをマウスで離れたときはアニメーション化しないのはなぜですか？ デモはこちら：http : //jsfiddle.net/7uR8z/ ​

115 css  css-transitions 

::CSSで二重コロン（）はどういう意味ですか？ 例えば： input[type=text]::-ms-clear { display: none; }

115 css 

次のコードがあります div { width:200px; border-bottom:1px solid magenta; height:50px; } デモ div幅は200pxなので、border-bottomも200pxですが、div幅を変更せずにborder-bottomを100pxだけにしたい場合はどうすればよいですか？

115 html  css 

インラインスタイルで表示される形式のような、CSSルールのすべてのコンテンツを含む文字列を返したいのですが。特定のルールに何が含まれているかを知らなくてもこれを実行できるようにしたいので、スタイル名（.style.widthなど）でそれらを単に引き出すことはできません CSS： .test { width:80px; height:50px; background-color:#808080; } これまでのコード： function getStyle(className) { var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules for(var x=0;x<classes.length;x++) { if(classes[x].selectorText==className) { //this is where I can collect the style information, but how? } } } getStyle('.test')

115 javascript  html  css 

次のような複数のDIVを積み重ねることは可能ですか？ <div> <div></div> <div></div> <div></div> <div></div> </div> これらすべての内部DIVのX位置とY位置が同じになるようにするには？デフォルトでは、それらはすべて互いに下にあり、直前のDIVの高さだけY位置を増やします。 なんらかのフロートやディスプレイ、または他のトリックが噛み付くような気がします。 編集：親DIVには相対位置があるため、絶対位置を使用しても機能しないようです。

115 css  html  stack  css-float 

<ul>要素内では、行間の垂直方向の間隔をline-height属性でフォーマットできることは明らかです。 私の質問は、<ul>要素内で、リストアイテム間の垂直間隔を設定するにはどうすればよいですか？

115 html  css  html-lists 

CSS :hover のみを使用する反対の方法はありますか？以下のように：場合:hoverでon Mouse Enter、CSSは以下と等価ありますかon Mouse Leave？ 例： リストアイテムを使用するHTMLメニューがあります。アイテムの1つにカーソルを合わせると、CSSカラーアニメーションが表示さ#999れblackます。マウスが項目領域を離れたときに、アニメーションがからblackに変化するときに、反対の効果をどのように作成でき#999ますか jsFiddle （私はこの例だけではなく、「反対の:hover」問題全体に答えたいとは思いません。）

115 css  hover 

広く使用されているすべての電子メールクライアントで適切に表示されるHTML電子メールを作成しようとしています。メール全体を表で囲みます。幅は使用可能な幅の最大98％ですが、800ピクセル以下にする必要があります。このような： <table style="width:98%; max-width:800px;"> しかし、この Outlook 2007によると、CSSのwidthプロパティはサポートされていないため、そのようにはしていません。 代わりに、私はこれをやっています： <table width="98%"> CSSに依存せずに最大幅を設定する方法はありますか？

114 html  email  html-email  css 

私の質問は：ターゲットRGBカラーが与えられた場合、CSSフィルター#000のみを使用して黒（）をそのカラーに再調整する式は何ですかですか？ 回答を受け入れるには、ターゲットの色を引数として受け入れ、対応するCSS filter文字列を返す関数を（任意の言語で）提供する必要があります。 このコンテキストは、内のSVGの色を変更する必要があることbackground-imageです。この場合、KaTeXで特定のTeX数学機能をサポートすることです：https : //github.com/Khan/KaTeX/issues/587。 例 ターゲットの色が#ffff00（黄色）の場合、正しい解決策は次のとおりです。 filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg) （デモ） 非目標 アニメーション。 非CSSフィルターソリューション。 黒以外の色から始めます。 黒以外の色に何が起こるかを気にします。 これまでの結果 固定フィルターリストのパラメーターの総当たり検索：https ://stackoverflow.com/a/43959856/181228短所：非効率的、16,777,216の可能な色の一部のみを生成します（676,248とhueRotateStep=1）。 SPSAを使用したより高速な検索ソリューション：https : //stackoverflow.com/a/43960991/181228 賞金を獲得 drop-shadow解決策： https://stackoverflow.com/a/43959853/181228 短所：んがエッジ上では動作しませ。filterCSS以外の変更とマイナーなHTMLの変更が必要です。 ブルートフォース以外のソリューションを送信することで、引き続き承認済みの回答を得ることができます！ 資源 どのようにhue-rotateしてsepia計算されます。 https://stackoverflow.com/a/29521147/181228 例Rubyの実装： LUM_R = 0.2126; LUM_G = 0.7152; LUM_B = 0.0722 HUE_R = 0.1430; HUE_G = 0.1400; HUE_B …

114 javascript  css  math  algebra  css-filters 

CSSフレックスボックスモデルを使用して、画像の縦横比を維持するにはどうすればよいですか？ JSフィドル：http : //jsfiddle.net/xLc2Le0k/2/ コンテナの幅を満たすために、画像が伸縮することに注意してください。それは問題ありませんが、画像の縦横比を維持するために高さを伸縮させることもできますか HTML <div class="slider"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> </div> CSS .slider { display: flex; } .slider img { margin: 0 5px; }

114 html  css  flexbox 

インラインスタイル属性値によってこの要素を選択するためのCSSセレクターはありますか？ <div style='display:block'>...</div> 何かのようなもの div[cssAttribute=cssValue]

114 html  css  css-selectors  inline-styles 

どのように私は中央んdiv、親の内側に水平にdivしてCSS？ <div id='parent' style='width: 100%;'> <div id='child' style='width: 50px; height: 100px;'>Text</div> </div>

114 html  css 

CSSの三角形（境界線）にカスタムの16進数の色を使用しようとしています。ただし、ボーダープロパティを使用しているため、これをどのように行うかわかりません。互換性のために、javascriptとcss3を避けたいと思います。三角形の背景を白にし、1pxの境界線（三角形の斜めの辺の周り）に＃CAD5E0の色を付けます。これは可能ですか？ここに私がこれまで持っているものがあります： .container { margin-left: 15px; width: 200px; background: #FFFFFF; border: 1px solid #CAD5E0; padding: 4px; position: relative; min-height: 200px; } .container:after { content: ''; display: block; position: absolute; top: 10px; left: 100%; width: 0; height: 0; border-color: transparent transparent transparent #CAD5E0; border-style: solid; border-width: 10px; }​ 私のフィドル：http : //jsfiddle.net/4ZeCz/

114 css  border  css-shapes 

私があればことがわかったaか、新しいページへリンクしていないページ内のリンクは、ユーザーがそれをクリックすると、その後、要素の周りに点線が存在しますが、ときに、ページ内の他のユーザクリック何でも、それだけで消えますこれを削除するには？ 例： 要素の周りの点線に注意してくださいSection 2。

114 html  css