WEBページにレイヤーでマスクをかけたような効果(?)を用いることはできますか?

<div style="width:100px; height:100px; overflow:hidden;"> <iframe src="layer1.html"></iframe></div>
のような感じだと100px×100pxの正方形の中にlayer1.htmlの内容(の一部)を表示できると思うのですが、この正方形を任意の形(例えば丸型など)にする方法があったら教えていただきたいです!
ちょっと意図するものと違いますが、
http://www.twofishillustration.com/
の丸の中に通常のhtmlが表示されて、そのエリアは通常の操作が行える、といったイメージです。

回答の条件
  • 1人3回まで
  • 13歳以上
  • 登録:2011/11/30 03:43:37
  • 終了:2011/12/07 03:45:03

回答(2件)

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922011/11/30 12:52:25

ポイント100pt

手軽にやるならCSS3のborder-radiusはどうでしょう。「css 角丸」などでググればいろいろあります。
質問のリンク先はdiv要素の入れ子で、親divのbackground-imageにhttp://www.twofishillustration.com/portfolio2_images/circles.png
子divのbackground-imageに子供の画像になっています。


demo: http://jsfiddle.net/cherenkov/xUvW8/

<html>
<head>
<style>
#icontents {
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */  
}
</style>
</head>
<body>
<div id="icontents" style="width:100px; height:100px; overflow:hidden;">
<iframe src="layer1.html"></iframe>
</div>
</body>
id:tomoaki69

まずは回答ありがとうございます。
demoを見ても角丸が効いておらず、ん?と思ったのですが、chromeで見ると問題ありませんでした。
いろいろと面白いやり方があることを知ることができ、なんとなくイメージを実現できそうな気になっております。
ご存じかもしれませんが、下記参考まで。
http://css-tricks.com/examples/ShapesOfCSS/

2011/12/02 02:27:17
id:kodairabase No.2

kodairabase回答回数661ベストアンサー獲得回数802011/12/06 17:43:29

ポイント100pt

mask-box-imageプロパティを使ってみてください。

文字・画像にマスクをかける(1)
http://cssoboegaki.netkatuyou.com/css3/1465/

id:tomoaki69

まずは回答ありがとうございます。
かなりイメージに近いものでしたが、
divの中に置いたiframeには適用しないようでした。
文字や画像を配置した時には、いろいろ面白い効果が出せそうです!
リンクいただいた先のページにも書いてありましたが、各ブラウザが対応してくれると、心置きなく活用できそうです。
大変参考になりました。

2011/12/07 00:40:23

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません