- 締切済み
before afterを使って影を表示できません
スタイルシートでbefore afterを使って影を表示できません こちらのサイトを参考にしました。 http://coliss.com/articles/build-websites/operation/css/css3-box-shadows-effects-by-paulund.html こちらのeffect1は簡単にできます。 before afterを使わず、影をだすことはできますが、before afterを使って影を表示できません。 また、こちらのサイトを参考にしましたが、ダメでした。 http://nicolasgallagher.com/css-drop-shadows-without-images/ コピペしても、コードを削ってもうまくいきません。 ブラウザを変えても、Wordpressのテーマを変えてもダメです。 すいませんが、何か試せることや解決方法がありましたら、ご教授ください。
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- DrFell
- ベストアンサー率55% (305/551)
- DrFell
- ベストアンサー率55% (305/551)
>コピペしても、コードを削ってもうまくいきません。 これの意味がわかりません。こういう場合はコピペしたソースを出さないと、応えようがありません。現に見本のページのデモではちゃんと表示されているのですから、コピペの仕方が悪いとしか思えません。 私もコピペしてみましたが、lon79 さんの状況が再現できませんでした。 <style type="text/css"> /*簡単な実験はちゃんと出来ています。引用符の定義をしていなかっただけでは？*/ blockquote{/*これ足しました。*/ quotes: "『" "』" ; } blockquote:before { content: open-quote; } blockquote:after { content: close-quote; } /*2つめの見本のサイトをコピペし、引用に適用しました。 使用したのはVertical curvesの一部。あと組み合わせを辞めました。*/ .drop-shadow { position:relative; float:left; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; } .drop-shadow:before, .drop-shadow:after { content:""; position:absolute; z-index:-2; } .drop-shadow:before { top:10px; bottom:10px; left:0; right:0; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-box-shadow:0 0 15px rgba(0,0,0,0.6); box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-border-radius:10px / 100px; border-radius:10px / 100px; } </style> <body> <blockquote>引用</blockquote> <blockquote class="drop-shadow">引用</blockquote> </body>
お礼
たびたびありがとうございます。 blockquoteの引用府は申し訳ございません。定義がなかっただけです。。 こちらは解決しました。 DrFellさんのソースで試してみました。 影はHtmlファイルで作成すると、正常に表示できます。 Htmlで外部cssしても、正常に表示されます。 しかし、Wordpressの外部cssに書き込むと、影は表示されず背景しか表示されません。 いずれも同じコードをコピペーしています。 ただ、blockquoteの引用府はWordpressでもうまくいきます。 デフォルトの状態なので、あまりないと思われますが、優先度の問題を疑い、 !importantがあることを知り、追記しましたが、うまくいきませんでした。 検索してみてもそのようなことは書いていないのですが、他に何か追記する必要があるのでしょうか。 テーマはデフォルトにTwenty Tenに戻しています。 Wordpressバージョンは3.41です。 確認しているブラウザはFirefox、chromeなどです。いずれも表示されません。 コードも追記させてもらいます。 Twenty Ten: スタイルシート (style.css) blockquote{ quotes: "『" "』" ; } blockquote:before { content: open-quote; } blockquote:after { content: close-quote; } .drop-shadow { position:relative; float:left; width:40%; padding:1em; margin:2em 10px 4em; background:#f2f2f2; //背景が白のため一応変更 !important; //追記 } .drop-shadow:before, .drop-shadow:after { content:""; position:absolute; z-index:-2; !important; //追記 } .drop-shadow:before { top:10px; bottom:10px; left:0; right:0; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-box-shadow:0 0 15px rgba(0,0,0,0.6); box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-border-radius:10px / 100px; border-radius:10px / 100px; !important; //追記 } wordpressの記事 <blockquote>引用府は表示されます</blockquote> <blockquote class="drop-shadow">影は表示されず。。。</blockquote> <div class="drop-shadow">影は表示されず。。。</div> おかげさまで、現在、htmlだと正常に表示されるところまでは確認しています。 恐れ入りますが、WPでもうまく表示できるよう、どなたかご助言いただけると幸いです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞ただ、afterを使って表示できません。今のところ、まだ解決できていません。 サンプル試してみましたか？:hover擬似クラス、:after擬似要素にで生成し影を付けています。 contentプロパティは、セレクタの主体によって生成される要素のdisplayも変わります。 box-shadowは、box--すなわちblockなどに対してのもので、inline要素のテキストにはtext-shadowプロパティになります。
お礼
たびたびありがとうございました。 おっしゃるコードでhtmlを作成したところ、マウスオーバーすれば影がでますが、 今、やろうとしていること(Wordpressでbeforeとafterを使って影をだす)の現状を打開できません。さっき、極力簡単なテストとして、 html <blockquote>引用</blockquote> css blockquote:before { content: open-quote; } blockquote:after { content: close-quote; } を試しても、両側に引用府が表示できせんでした。。。 引き続き、どなたかお願いします。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
擬似要素でも問題ないはずです。 ・・・boxでないとか・・・ <!doctype html> <head> <meta charset="utf-8"> <title>サンプル</title> <meta name="description" content=""> <meta name="author" content="IRUKA"> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <link rel="stylesheet" href="css/style.css"> <style media="screen"> <!-- nav ul li{position:relative;} nav ul li a:hover:after{content:attr(title)"\Aいろいろあるよ";display:block;width:200px;height:60px;position:absolute;top:0;left:100px;box-shadow:10px 10px 10px rgba(0,0,0,0.8);border:gray solid 1px;border-radius:0.5em;background-color:white;white-space:pre;z-index:10;padding:0.5em 1em;} --> </style> </head> <body> <header> <h1 id="title">Your title</h1> <nav> <ul> <li><a href="#some" title="なんたらのページへ">Some</a></li> <li><a href="#nav" title="サイトマップ">navigation</a> <li><a href="#link" title="リンク集へ">links</a></li> </ul> </nav> </header> <section> <aside> <h3>Something aside</h3> </aside> <h2>A smaller heading</h2> <p> </p> </section> <section> <h2>A smaller heading</h2> <p> </p> </section> <footer> <h3>A nice footer</h3> </footer> </body> </html>
お礼
ご回答ありがとうございます。 ちょっとどのように参考にいいのかわからない部分もあったのですが、 -box-shadowのみであれば、表示できています。 ただ、afterを使って表示できません。今のところ、まだ解決できていません。
お礼
たびたびありがとうございます。恐縮です(><)。 cssの基本は、素人ですが、前にcssの詳細度については一度独学で勉強したことがあります。 プロの人からみると、ぜんぜん足りないのかもしれませんが、 計算して優先度を決めているぐらいはわかります。 優先度の問題でよく反映されないことがあることは知っています。 importantはすいません。あまりよく調べず、安易に使ってしまいました。 wordpressでも、下記のようにbefore・afterを使わなければ、影は表示できます。 .shadow { -webkit-box-shadow: 0 10px 6px -6px #777; -moz-box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; } そこで、擬似要素の詳細度が原因で影が表示されていない、 という点を疑ったのですが、調べてみると、 擬似要素に詳細度はつかないと書かれていました。。 それなので、詳細度は原因ではなかったと思っているのですが、、、 すいませんが、その後、数時間調べたり、試行錯誤したのですが、解決できず、 またハマっている状態です。。。