- ベストアンサー
CSS3で三角形にシャドウをつけた場合、下に四角い影がつく問題について
- CSS3を使用して三角形を作成し、シャドウをつけると、三角形の下に四角い影がついてしまう問題があります。
- この問題には解決策が存在せず、現在のCSS3の仕様ではこのような挙動となります。
- 影を無くすためには、別の方法で三角形を作成するか、JavaScriptなどの他のテクニックを使用する必要があります。
- korinakkum
- お礼率72% (8/11)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- 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
- CSS3の新しい書き方教えてください。
ネットで見ていたところ以下の記述を見つけました。 どうやらCSS3の記述らしいのです。 border: 1px solid #333; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 3px; という記述は何となく分かるのですが、その頭にある・・・。 -webkit- という記述は何を意味するのでしょうか？？ -moz- もそうですね・・・。 先頭の、border: 1px solid #333; に付随する記述だよ！みたいな感じでしょうか？ どなたかお分かりになる方いらっしゃいましたらアドバイスをお願いします。 また、何か参考になるサイトなどもご存知であれば、合わせてお教えいただけますと幸いです。 どうぞ、宜しくお願いします。
- ベストアンサー
- 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の書き方について
Jquery のポップアッププラグインであるPopboxを使おうとしています。 http://gristmill.github.io/jquery-popbox/ 実装は出来たのですが、下記の改造で戸惑っています。 ●デフォルトでは、クリックしたボタンから吹き出しの形で、ボタンより下にポップアップが表示されます。 ●当方の希望 クリックしたボタンの場所にかかわらず、スマートフォンの表示枠の一番上から表示させたいです。 CSSのどこを弄ると当方の希望の状況になるでしょうか? よろしくお願いいたします。 <style> .popbox { margin:0px auto; text-align:center; position:relative; } .collapse { position:static; } .open { background:#DDD; border:solid 1px #FFF; border-radius:5px; box-shadow: 0px 0px 5px #CCC; background:-webkit-gradient(linear,left top,left bottom,from(#f4f4f4),to(#e8e8e8)); background:-moz-linear-gradient(top,#f4f4f4,#e8e8e8); background:linear-gradient(top,#f4f4f4,#e8e8e8); padding:8px; } .box { width:280px; display:block; display:none; background:#FFF; border:solid 1px #BBBBBB; border-radius:5px; box-shadow:0px 0px 15px #999; position:absolute; } .box a.close { color:red; font-size:12px; font-family:arial; text-decoration:underline; } .arrow { width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 11px solid #FFF; position:absolute; left:1px; top:-10px; z-index:1001; } .arrow-border { width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 11px solid #BBBBBB; position:absolute; top:-12px; z-index:1000; } </style> <script type='text/javascript' charset='utf-8'> $(document).ready(function(){ $('.popbox').popbox(); }); </script> <h1>PopBox</h1> <div class='popbox'> <a class='open' href='#'> <img src='images/plus.png' style='width:14px;position:relative;'> Click Here! </a> <div class='collapse'> <div class='box'> <div class='arrow'></div> <div class='arrow-border'></div> 表示内容 </div> </div> </div>
- ベストアンサー
- CSS
- floatとclearを使ったレイアウト作成について
http://www.ario-nishiarai.jp/ 上記のサイトのようなページ中央より下のレイアウトを作りたいと思い、下記のようにコーディングしました。 <html> <head> <title>Ｗｅｂ</title> <style type="text/css"> .container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:760px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <div class="content2"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </body> </html> box1、box2、box3、box4のボックスは左側に、news、topicsのボックスは中央に、box5、box6のボックスは右側にレイアウトしたいと思っています。 floatとclearを使って作成するのだと思うのですが、どうコーディングしたら良いのかわかりません。 どこをどう直したら良いかアドバイスいただけますようお願いします。
- ベストアンサー
- 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] last-childについて
html5とcss3にてスマートフォンサイト制作をしております。 リスト要素を使いメニューを作っていますが、一番下の要素だけボーダーを削除したいと 思っていますが、うまくいきません。 詳しい方、ご教授いただけませんでしょうか。 よろしくお願い致します。 ---------------------------------------------------------- [HTML] <nav> <ul id="navi"> <a href="#"><li>メニュー1</li></a> <a href="#"><li>メニュー2</li></a> <a href="#"><li>メニュー3</li></a> <a href="#"><li>メニュー4</li></a> <a href="#"><li>メニュー5</li></a> </ul> </nav> [CSS] nav { display: block; width: 300px; margin-right: auto; margin-left: auto; margin-bottom: 18px; } #navi { border-radius: 8px; -webkit-border-radius: 8px; border: 1px solid #CCCCCC; background: -webkit-gradient(linear, left top,left bottom, from(#FFFFFF), to(#E7E7E7)); background-color: #FFFFFF; } #navi a { text-decoration: none; color: #646464; font-size: 1.31em; text-indent: 16px; height: 33px; line-height: 33px; } #navi li { border-bottom: 1px solid #CCCCCC; } #navi li:last-child { border-bottom-style: none; }
- ベストアンサー
- CSS
- CSSでドロップシャドウ
CSS で写真の周りにふちと影を付けたいのですが Firefox1.5 だとうまくいくのですが、 IE6 だと padding: 4px; が反映されず、ふちの無い写真になってしまいます。どなたかコツを教えていただけないでしょうか？ --HTML-- <div class="img-shadow"> <img src="./1.jpg" alt="" width="200" height="150" /> </div> --CSS-- .img-shadow { float:left; background: url(shadowAlpha.png) no-repeat bottom right !important; background: url(shadow.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; margin: 10px 0 0 5px; } .img-shadow img { display: block; position: relative; background-color: #ffffff; border: 1px solid #999999; margin: -6px 6px 6px -6px; padding: 4px; ←ここが怪しい }
- 締切済み
- HTML
- CSS3で困ってます！
現在、HTML5でサイト書き出し中です。CSS3も使っているのですが、大きな問題が発生いたしまして… 背景のボックスの大きさがbodyの大きさに追随しないんです。ボックスからINFOMATION欄などが飛び出してしまってデザイン的によろしくない感じです。 ボックス要素は、divのidのtopに対して与えています。topはペ0次全部のコンテンツをまとめるためのものです。 今日一日、CSSのソースとにらめっこしたのですがわかりませんでした。皆さんなら、わかると思い頼らせて頂くことにいたしました。どこが間違っているかわかりません！教えてください（涙） CSSは、 @charset "utf-8"; /* CSS Document */ *{ font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } a{ text-decoration:none; } div#top{ width: 920px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; box-shadow: 3px 3px 10px #666; -moz-box-shadow: 3px 3px 10px #666; -webkit-box-shadow: 3px 3px 10px #666; -o-box-shadow: 3px 3px 10px #666; text-align:left; margin:0 auto; } div#header{ text-align:center; } div#banner{ width: 900px; margin: 0px auto; } div#menu{ width: 900px; margin: 0px auto; } div#menu ul { float:left; margin:0; padding:0; height: 40px; text-align:center; } div#menu li { margin:0; padding:0; float:left; font-size:90%; text-align:center; list-style-type:none; width: 225px; -webkit-transition-property: background-color; -webkit-transition-duration: 0.25s; -moz-transition-property: background-color; -moz-transition-duration: 0.25s; -o-transition-property: background-color; -o-transition-duration: 0.25s; background-color: #3C0; height: 40px; } div#menu li span { font-family:verdana; font-size:140%; color:#fff; line-height: 40px; } div#menu li:hover{ background-color: #0F0; } div#contents{ width:900px; height: auto; margin:0 auto; padding: 10px 0; } div#info { float:left; width:450px; } div#info h2{ font-size: 25px; width: 450px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; background-color:#090; color: #FFF; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; margin-top: 0px; text-align:left; } div#info dl dt { clear:left; float:left; width:7em; padding:10px 0.5em; } div#info dl dd { margin-left:0; padding:10px 0.5em 10px 8em; background:#fff url(images/bg_info_line.gif) 0 100% repeat-x; } div#news{ float: right; width: 430px; text-align:left; } こんな感じです。 実際のページはここにあります。 http://skino.cyber-ninja.jp/test/
- ベストアンサー
- CSS
- box-shadowの質問です。
box-shadow: -webkit-box-shadow: -moz-box-shadow: chome Firefox opera safari はつくのですが でシャドウを付けているのですがIEだけがシャドウがつきません。 どうすればIEもシャドウがつくのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
お礼
ありがとうございました！ もうひとつ△を作ってグラデーションをかけるのは思いつきませんでした！！ 発想が出てくるのがすごいです！目からウロコでした。 やってみますv 参考サイトのURLまでありがとうございます！ 自分もまだまだ勉強中です。 CSS3まだまだPCブラウザでは実用的じゃないのかもしれないのですが スマートフォンだとかなり対応しているみたいなので、勉強してみようと思いまして；