人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

TwitterBootstrap3で丸加工した画像の周りに影をつける方法を教えてください。
画像は例です。

1396325119
●拡大する

●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● 匿名回答1号

添付されたような丸く作った画像に影を付けるということでしょうか?
まず、画像は丸く作ろうが透過処理しようが、Webに貼り付ける時は四角のオブジェとして認識されるのはご存知ですよね?

ドロップシャドウなどはCSS単体で出来るのでそれ単品のクラスはBootstrapに存在しません。
CSSで角丸にしてbox-shadowをかければCSSだけで円状のドロップシャドウを再現することはできます。

border-radius: 100px; /*画像の直径*/
box-shadow: 0 5px 5px rgba(0,0,0,0.2);

あとはabsoluteで浮かせて配置すれば添付画像のようなレイアウトもCSSだけで可能です。

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ