- ベストアンサー
CSS３で角丸写真にシャドーを付ける方法
- 写真を角丸加工して影を付けたい場合、フォトショップなどで加工したものを貼り付けるしかないのでしょうか。
- 写真を角丸にすると、長方形のスペースは残ってしまうため、正確な角丸写真を作成するのは難しいです。
- 写真の角丸化にはCSSの「border-radius」を使用することができますが、影を付ける方法は限られています。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- kosukejlampnet
- ベストアンサー率44% (126/282)
<div> <img src="" /> </div> のとき、 div { display:inline; border-radius:5px; overflow:hidden; } とします。
お礼
お返事ありがとうございました。
関連するQ&A
- CSS3で三角形の描画にシャドウをつけると
CSS3で三角形を作って、シャドウをつけると 三角の下に四角い影がついてしまうのですが、これはどうにもならないのでしょうか？ "▲"の下に"□"こんな感じで影が付きます。 ソースは以下のとおりです。 width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; -moz-box-shadow:0 0 3px #cccccc; -webkit-box-shadow:0 0 3px #cccccc; box-shadow:0 0 3px #cccccc; アドバイスお願いします。
- ベストアンサー
- HTML
- 【CSS】画像を重ねたいのですが動きません
ウェブサイトを作っているのですが、 positionを使って、ひとの写真と影の画像を重ねたいのですが、影がピクリとも動いてくれません。 ちなみに他のスタイルはCSSから読み込めているので、 CSSのインポートエラーではないようです。 難しいことをしているわけではないと思いつつも、 二時間くらいここで止まっておりまして、悲しいです・・・。 下記のコードを書いております。 ご教示頂ければ幸いです。 よろしくお願いいたします。 ☆HTML <div id="staffphoto"> <img src="写真.jpg" width="160" border="0"> <img src="影.gif" border="0" width="160" class="shadow"> </div> ☆CSS #staffphoto{ position: relative; } #staffphoto img.shadow{ position: absolute; top: 5px; left: 5px; }
- ベストアンサー
- CSS
- 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
- CSS 角丸
こんばんは はじめましてyokppssです。 Dreamweaverを使用いたしています。 早速ご質問ですが よくHPで拝見する 角丸ボックス どちらが良いのですか CSSだけ それともコーナーを四点入れるのとどうなんでしょうか？ ずれ込みはないのでしょうか？疑問ばかりですみません。 私が希望するのは、ボーダーだけを１ｐｘで表示して 中抜きのような薄い色合いの感じで仕上げてコメントが入るよう致したいのですが CSSとHTMLを使用するとしたらどう記述すればいいのですか。 ライトサイドの中に入れ込みたいのですがどちらが的確ですか？ いずれにせよ、CSS html記述法 または的確なお知恵をお借りしたいものです。 宜しくお願い致します。
- 締切済み
- ホームページ作成ソフト
- 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の新しい書き方教えてください。
ネットで見ていたところ以下の記述を見つけました。 どうやら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で背景に角丸長方形を置く方法
CSSで背景に角丸長方形を置く場合はどのようにすればいいのでしょうか？ テーブルだと一番上と一番下、さらにその他の部分と分けて背景をつければ大丈夫だと思いますが、CSSだとどのようにして作るのでしょうか？ やっぱり3つのdivで分けて作成するしかないのでしょうか？ http://www.takasu.co.jp/about_operation/price/index.html また、上記の参考サイトのようになあにテーブルが入っている場合はどうすればいいのですか？ テーブルを途中で区切るわけにもいかなそうですし・・・ どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- 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化？
既存のテーブルレイアウトのサイトを、 CSSレイアウトに変更しようと思っています。 大体は大丈夫なのですが、問題は角丸テーブル。 縦横自由伸張の(影付き)角丸テーブルなので、 一番単純な部分でも9個のtdがある状態です。 これはどういうふうにしたら良いでしょうか。 9個のDIVというのは複雑すぎますし… 何か良い案があればアドバイスをお願いします。
- ベストアンサー
- HTML
- 「>」を使った記述はCSS3からのもの？
とあるサンプルサイトのCSSを見たところ、 #global-nav > ul > li:first-child a { border-radius:6px 0 0 0; } というCSS3の角丸設定のものがありました。 一番最初にあるリンクが貼られているli要素に角丸を設定というのは何となく分かるのですが、「#global-nav > ul > li」の「>」を使ったような記述を初めて見ました。 これはどういった意味を表しているのでしょうか？ 「#global-nav」にある「ul」の「li」という意味のものであれば、「>」は別に記載する必要性はないと思うのですが…また、この記述もCSS3からのものなのでしょうか？ ご存じ方、ご教授いただければ幸いです。 よろしくお願いします。
- ベストアンサー
- HTML
お礼
お返事ありがとうございます。 教えた頂いたＣＳＳで望みの結果が出ました。 ありがとうございました。