WEBﾍﾟｰｼﾞにﾚｲﾔｰでﾏｽｸをかけたような効果(？)を用いることはできますか？ <div style="width:100px; height:100px; overflow:hidden;"> <iframe src="layer1.html…

人力検索はてな

ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら

WEBﾍﾟｰｼﾞにﾚｲﾔｰでﾏｽｸをかけたような効果(？)を用いることはできますか？
<div style="width:100px; height:100px; overflow:hidden;"> <iframe src="layer1.html"></iframe></div>
のような感じだと100px×100pxの正方形の中にlayer1.htmlの内容(の一部)を表示できると思うのですが､この正方形を任意の形(例えば丸型など)にする方法があったら教えていただきたいです！
ちょっと意図するものと違いますが､
http://www.twofishillustration.com/
の丸の中に通常のhtmlが表示されて､そのｴﾘｱは通常の操作が行える､といったｲﾒｰｼﾞです｡

●質問者: tomoaki69
●ｶﾃｺﾞﾘ:ｲﾝﾀｰﾈｯﾄｳｪﾌﾞ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

▽1 ● Cherenkov
●100ﾎﾟｲﾝﾄ

手軽にやるなら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>

tomoaki69さんのｺﾒﾝﾄ
まずは回答ありがとうございます｡ demoを見ても角丸が効いておらず､ん？と思ったのですが､chromeで見ると問題ありませんでした｡いろいろと面白いやり方があることを知ることができ､なんとなくｲﾒｰｼﾞを実現できそうな気になっております｡ご存じかもしれませんが､下記参考まで｡ http://css-tricks.com/examples/ShapesOfCSS/

▽2 ● kodairabase
●100ﾎﾟｲﾝﾄ

mask-box-imageﾌﾟﾛﾊﾟﾃｨを使ってみてください｡

文字･画像にﾏｽｸをかける(1)
http://cssoboegaki.netkatuyou.com/css3/1465/

tomoaki69さんのｺﾒﾝﾄ
まずは回答ありがとうございます｡かなりｲﾒｰｼﾞに近いものでしたが､ divの中に置いたiframeには適用しないようでした｡文字や画像を配置した時には､いろいろ面白い効果が出せそうです！ﾘﾝｸいただいた先のﾍﾟｰｼﾞにも書いてありましたが､各ﾌﾞﾗｳｻﾞが対応してくれると､心置きなく活用できそうです｡大変参考になりました｡