プログラミング css

15

サムネイルの上にcssを置いたホバーでトランジションを実行して、ホバーで背景のグラデーションがフェードインするようにします。トランジションは機能しませんが、単純にrgba()値に変更すると、うまく機能します。グラデーションはサポートされていませんか？画像も使ってみましたが、画像が遷移しません。別の投稿で誰かがやったように、それが可能であることは知っていますが、正確にはわかりません。任意のヘルプ>使用するCSSは次のとおりです。 #container div a { -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear; position: absolute; width: 200px; height: 150px; border: 1px #000 solid; margin: 30px; z-index: 2 } #container div a:hover { background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, …

215 css gradient css-transitions

15

順序付けられていないリストを2列で表示する方法は？

次のHTMLで、リストを2列として表示する最も簡単な方法は何ですか？ <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul> 望ましい表示： A B C D E このソリューションは、Internet Explorerで機能する必要があります。

215 html css html-lists css-multicolumn-layout

23

Chrome / MacでDOMの再描画/更新を強制する

時々、Chromeは完全に有効なHTML / CSSを正しく表示しないか、まったく表示しません。多くの場合、DOMインスペクタを掘り下げるだけで、その方法のエラーを認識して正しく再描画できます。そのため、マークアップが適切である可能性があります。これは私が取り組んでいるプロジェクトで頻繁に（そして予想通り）十分に発生し、特定の状況でコードを強制的に再描画するように配置しました。これは、ほとんどのブラウザーとOSの組み合わせで機能します。 el.style.cssText += ';-webkit-transform:rotateZ(0deg)' el.offsetHeight el.style.cssText += ';-webkit-transform:none' のように、未使用のCSSプロパティを調整し、再描画を強制する情報を要求してから、プロパティの調整を解除します。残念ながら、Mac向けChromeの背後にいる明るいチームは、再描画せずにそのoffsetHeightを取得する方法を見つけたようです。したがって、他の点では有用なハックを殺します。これまでのところ、Chrome / Macで同じ効果を得るために思いついた最善の方法は、次の醜さです。 $(el).css("border", "solid 1px transparent"); setTimeout(function() { $(el).css("border", "solid 0px transparent"); }, 1000); のように、実際に要素を少しジャンプさせ、次に1秒間冷やしてからジャンプし直します。さらに悪いことに、そのタイムアウトを500ミリ秒未満に（目立たない程度に）落とすと、ブラウザーが元の状態に戻る前に再描画に取り掛からなくなるため、期待した効果が得られないことがよくあります。誰かがこの再描画/更新ハックのより良いバージョン（できれば上記の最初の例に基づいたもの）をChrome / Macで動作するように提供したいと思いませんか？

215 javascript css macos dom google-chrome

6

iPadおよびiPhoneの入力ボタンのスタイル

CSSを使用してWebサイトの入力ボタンのスタイルを設定していますが、IOSデバイスでは、スタイルがMacのデフォルトボタンに置き換えられています。iOSのボタンのスタイルを設定する方法、または送信ボタンのように動作するハイパーリンクを作成する方法はありますか？

214 iphone css ios ipad

3

@mediaメディアクエリとASP.NET MVCかみそり構文の衝突

Razorビューエンジンを使用してASP.NET MVCで実行する大規模なサイトを持っています。サイト全体のすべての一般的なスタイリングを含む基本スタイルシートがあります。ただし、場合によっては、ページ固有のスタイル<head>があります。通常、これは1行または2行です。私はCSSを<head>厳密に分離していないので特に好きではありませんが、1行または2行は、そのページに固有のものなので、別のファイルを添付して帯域幅を追加する必要はありません。ページ固有のメディアクエリをに挿入したいの<head>ですが、メディアクエリが@記号と角かっこ{}を使用しているため、かみそりの構文と競合しています。 @section cphPageHead{ <style> /* PAGE SPECIFIC CSS */ ... @media only screen and (max-width : 960px) <-- the @ symbol here is clashing! { ... } } </style> } これを回避する方法はありますか？

214 css asp.net-mvc-3 razor media-queries

14

子要素に影響を与えずに背景画像の不透明度を設定します

子要素の不透明度に影響を与えずに背景画像の不透明度を設定することは可能ですか？例フッターのすべてのリンクにはカスタムの箇条書き（背景画像）が必要であり、カスタムの箇条書きの不透明度は50％にする必要があります。 HTML <div id="footer"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </div> CSS #footer ul li { background: url(/images/arrow.png) no-repeat 0 50%; } 私が試したことリストアイテムの不透明度を50％に設定してみましたが、リンクテキストの不透明度も50％になり、子要素の不透明度をリセットする方法がないようです。 #footer ul li { background: url(/images/arrow.png) no-repeat 0 50%; /* will also set …

214 css opacity

7

コンテンツがオーバーフローしているフレックスボックスをスクロールする

上記のレイアウトを実現するために使用しているコードは次のとおりです。 .header { height: 50px; } .body { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; display: flex; } .sidebar { width: 140px; } .main { flex: 1; display: flex; flex-direction: column; } .content { flex: 1; display: flex; } .column { padding: 20px; border-right: 1px solid #999; …

214 css layout multiple-columns flexbox

26

cssまたはjqueryを使用してフォーカス時にプレースホルダーテキストを自動的に非表示にするにはどうすればよいですか？

これは、Chromeを除くすべてのブラウザで自動的に行われます。特にChromeをターゲットにする必要があると思います。解決策はありますか？でない場合、CSS、その後でjQueryの？敬具。

213 jquery css html google-chrome placeholder

5

Sass-背景の不透明度のために16進数をRGBaに変換

次のSassミックスインがあります。これは、RGBaの例を半分完全に変更したものです。 @mixin background-opacity($color, $opacity: .3) { background: rgb(200, 54, 54); /* The Fallback */ background: rgba(200, 54, 54, $opacity); } 私は$opacity大丈夫ですが、今は$color部品に行き詰まっています。ミックスインに送信する色はRGBではなくHEXになります。私の使用例は： element { @include background-opacity(#333, .5); } このミックスイン内でHEX値を使用するにはどうすればよいですか？

213 css sass background-color mixins rgba

10

疑似要素のクリックイベントのみを検出

私のコードは： p { position: relative; background-color: blue; } p:before { content: ''; position: absolute; left:100%; width: 10px; height: 100%; background-color: red; } このフィドルを参照してください：http : //jsfiddle.net/ZWw3Z/5/ 疑似要素（赤いビット）でのみクリックイベントをトリガーしたいと思います。つまり、青色のビットでクリックイベントがトリガーされないようにします。

213 javascript jquery css

6

CSSセレクター/ HTML属性にダッシュが推奨されるのはなぜですか？

以前は、HTMLでクラスとIDの属性を定義するために常にアンダースコアを使用してきました。ここ数年、私はダッシュに切り替えました。ほとんどがコミュニティのトレンドに合わせるためでした。必ずしも自分にとって意味があるからではありませんでした。ダッシュにはもっと欠点があるといつも思っていましたが、利点はわかりませんでした。コード補完と編集ほとんどのエディターはダッシュを単語の区切り文字として扱うため、必要な記号にタブで移動できません。クラスが「featured-product」であるとすると、「」をオートコンプリートしfeatured、ハイフンを入力して「product」を完成させる必要があります。下線付きの " featured_product"は1つの単語として扱われるため、1つのステップで埋めることができます。ドキュメント内を移動する場合も同様です。単語でジャンプしたり、クラス名をダブルクリックしたりすると、ハイフンで区切られます。（より一般的には、クラスとIDをトークンと見なすため、トークンをハイフンで簡単に分割できるようにしても意味がありません。）算術演算子のあいまいさダッシュを使用すると、JavaScriptのフォーム要素へのオブジェクトプロパティアクセスが無効になります。これはアンダースコアでのみ可能です： form.first_name.value='Stormageddon'; （確かに私はこの方法でフォーム要素にアクセスしませんが、ダッシュとアンダースコアを普遍的な規則として決定するときは、誰かがそうする可能性があることを考慮してください。） Sass（特にCompassフレームワーク全体）のような言語は、変数名であっても、標準としてダッシュを使用しています。最初はアンダースコアも使用していました。これが別の方法で解析されるという事実は、奇妙な印象を受けます。 $list-item-10 $list-item - 10 言語間の変数の命名との不一致昔underscored_namesは、PHP、Ruby、HTML / CSS、JavaScriptで変数を記述していたものです。これは便利で一貫性がありましたが、ここでも「適合する」ために次のように使用します。 dash-case HTML / CSS camelCase JavaScriptで underscore_case PHPとRuby これはあまり気になりませんが、なぜこれらが一見故意にずれてしまったのかと思います。少なくともアンダースコアを使用すると、一貫性を維持することができました。 var featured_product = $('#featured_product'); // instead of var featuredProduct = $('#featured-product'); 違いにより、文字列を不必要に翻訳しなければならない状況と、バグの可能性が生じます。だから私は尋ねます：なぜコミュニティはほぼ普遍的にダッシュに落ち着きました、そしてアンダースコアを上回る理由がありますか？これが始まった頃から関連する質問がありますが、私はそれが単なる趣味の問題ではない（またはそうであるべきではなかった）と考えています。それが本当に趣味の問題だったのなら、なぜ私たち全員がこの条約を決めたのかを理解したいと思います。

213 html css coding-style naming-conventions

14

背景画像の上に半透明のカラーレイヤーがありますか？

DIVがあり、パターンを背景として使用したいと思います。このパターンは灰色です。もう少し素敵にするために、薄い透明色の「レイヤー」を重ねます。以下は私が試したものですが、うまくいきませんでした。背景画像の上に色付きのレイヤーを配置する方法はありますか？ここに私のCSSがあります： background: url('../img/bg/diagonalnoise.png'); background-color: rgba(248, 247, 216, 0.7);

213 css background-image background-color

7

より大きなグリフィコン

Twitterブートストラップ3.0（2.3.xではない）でより大きなグリフィコンを作成するにはどうすればよいですか。このコードは私のグリフィコンを大きくします： <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-th-list"> </span> </button> スパンのみを使用しているときにbtn-lgクラスを使用せずにこのサイズを取得するにはどうすればよいですか？これは小さなグリフィコンを与えます： <span class="glyphicon glyphicon-link"></span>

212 css twitter-bootstrap twitter-bootstrap-3 glyphicons

16

dtとddを同じ行に配置する方法

CSSを使用して、次のスタイルを設定するにはどうすればよいですか。 <dl> <dt>Mercury</dt> <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd> <dt>Venus</dt> <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd> <dt>Earth</dt> <dd>Earth (1 AU) is …

212 html css

3

CSSはフレックスボックスで1つのアイテムを右に揃えます

https://jsfiddle.net/vhem8scs/ フレックスボックスを使用して、2つのアイテムを左揃えにし、1つのアイテムを右揃えにすることはできますか？リンクはそれをより明確に示しています。最後の例は私が達成したいものです。フレックスボックスには、1つのコードブロックがあります。floatでは、4つのコードブロックがあります。それがflexboxを好む理由の1つです。 HTML <div class="wrap"> <div>One</div> <div>Two</div> <div>Three</div> </div>  <div class="result"> <div>One</div> <div>Two</div> <div>Three</div> </div> CSS .wrap { display: flex; background: #ccc; width: 100%; justify-content: space-between; } .result { background: #ccc; margin-top: 20px; } .result:after { content: ''; display: table; clear: both; } .result div …

212 css alignment flexbox

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

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