fb
文字のサイズ フォントを小さくする 現在の文字の大きさ フォントを大きくする
bargerIcon

枠素材 normal

1 11 

いろいろ

無題ドキュメント
透過処理(画像部分)はしてないです。
<div class="normal001"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.normal001{ box-sizing:border-box; position:relative; margin:0 20px 0 20px; padding:20px 0; background-image:url(n001_02.png),url(n001_07.png); background-repeat:repeat-x,repeat-x; background-position:top,bottom; background-color:white; } div.normal001::before{ content:""; position:absolute; width:calc(100% + 40px); height:20px; left:-20px; top:0px; background-image:url(n001_01.png),url(n001_03.png); background-repeat:no-repeat,no-repeat; background-position:top left,top right; } div.normal001 .waku_content{ background-color:transparent; background-image:url(n001_04.png),url(n001_05.png),url(n001_09.png); background-repeat:repeat-y,repeat-y,repeat; background-position:left,right; margin:0 -20px; } div.normal001 .waku_content::before{ content:""; position:absolute; width:calc(100% + 40px); height:20px; left:-20px; bottom:0; background-image:url(n001_06.png),url(n001_08.png); background-repeat:no-repeat,no-repeat; background-position:bottom left,bottom right; } div.normal001 .waku_content2{ box-sizing:normal; padding:10px 30px; min-height:100px; }
         
ダウンロードしました。
無題ドキュメント
内容
<div class="normal002"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.normal002{ box-sizing:border-box; position:relative; margin:20px 9px 0 9px; padding:9px 0; background-image: url(n002_02.png),url(n002_02.png); background-repeat:repeat-x,repeat-x; background-position:top,bottom; } div.normal002::before{ content:""; position:absolute; width:100%; height:25px; left:-9px; top:-16px; background-image:url(n002_01.png),url(n002_07.png); background-repeat:no-repeat,no-repeat; background-position:bottom left,top center; } div.normal002::after{ content:""; position:absolute; width:9px; height:9px; right:-9px; top:0; background-image:url(n002_03.png); } div.normal002 .waku_content{ background-image: url(n002_04.png),url(n002_04.png); background-repeat:repeat-y,repeat-y,no-repeat; background-position:left,right,top; margin:0 -9px; padding:0 9px; } div.normal002 .waku_content::before{ content:""; position:absolute; width:calc(100% + 18px); height:9px; left:-9px; bottom:0; background-image:url(n002_05.png),url(n002_06.png); background-repeat:no-repeat,no-repeat; background-position:bottom left,bottom right; } div.normal002 .waku_content2{ box-sizing:border-box; padding:10px; background-color:#888; color:white; min-height:100px; }
       
ダウンロードしました。
無題ドキュメント
内容
<div class="normal003"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.normal003{ box-sizing:border-box; position:relative; margin:115px 40px 25px; background-color:#88642f; } div.normal003::before{ content:""; position:absolute; top:-115px; left:0px; width:100%; height:calc(100% + 140px); background-image: url(n003_02.png),url(n003_06.png); background-repeat:repeat-x,repeat-x; background-position:top,bottom 0px left 0; } div.normal003::after{ content:""; top:-115px; left:-34px; position:absolute; width:calc(100% + 68px); height:calc(100% + 140px); background-image:url(n003_01.png),url(n003_03.png), url(n003_05.png),url(n003_07.png); background-repeat:no-repeat,no-repeat,no-repeat,no-repeat; background-position:top left,top right,bottom left ,bottom right; } div.normal003 .waku_content{ background-image: url(n003_04.png),url(n003_04.png); background-repeat:repeat-y,repeat-y,no-repeat; background-position:left,right; } div.normal003 .waku_content2{ box-sizing:border-box; color:white; padding:30px 30px 100px; min-height:200px; }
       
ダウンロードしました。
無題ドキュメント
別カラーも付属
<div class="normal004"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.normal004{ position:relative; padding:14px; } div.normal004::before{ content:""; position:absolute; width:30px; height:26px; left:calc(50% - 15px); top:0px; background:url(n004_02.png); } div.normal004 .waku_content{ background:url(n004_01.png); padding:14px; border:solid 1px black; border-radius:10px; } div.normal004 .waku_content2{ background-color:white; padding:10px; border:solid 1px black; border-radius:10px; min-height:100px; }
   
ダウンロードしました。
無題ドキュメント
new。
<div class="normal005"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.normal005{ background-image: url(n005_02.png),url(n005_03.png),url(n005_05.png),url(n005_06.png); background-repeat:no-repeat,no-repeat,no-repeat,no-repeat; background-position:top center,bottom center,top 50% left 20px,top 50% right 20px; padding:30px 46px; } div.normal005 .waku_content{ position:relative; background-image: url(n005_01.png),url(n005_01.png),url(n005_04.png),url(n005_04.png); background-repeat:repeat-x,repeat-x,repeat-y,repeat-y,no-repeat,no-repeat,no-repeat; background-position:top left,bottom left,top left,top right; padding:16px 18px; } div.normal005 .waku_content::before{ content:""; width:calc(100% + 90px); height:42px; position:absolute; top:-15px; left:-45px; background: url(n005_07.png),url(n005_08.png); background-repeat:no-repeat,no-repeat; background-position:top left,top right; } div.normal005 .waku_content::after{ content:""; width:calc(100% + 90px); height:42px; position:absolute; bottom:-15px; left:-45px; background: url(n005_09.png),url(n005_10.png); background-repeat:no-repeat,no-repeat; background-position:top left,top right; } div.normal005 .waku_content2{ box-sizing:border-box; min-height:100px; padding:10px; background-color:white; }
          
ダウンロードしました。
無題ドキュメント
内容
<div class="normal006"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.normal006{ position:relative; background-color:white; padding:30px 40px; background-clip:content-box; } div.normal006::before{ content:""; width:100%; height:100%; position:absolute; left:0px; top:0px; background-image:url(n006_01.png),url(n006_03.png), url(n006_06.png),url(n006_08.png); background-repeat:no-repeat,no-repeat; background-position:top left,top right,bottom left,bottom right; } div.normal006::after{ content:""; position:absolute; top:0px; left:63px; display:block; width:calc(100% - 126px); height:100%; background-image:url(n006_02.png),url(n006_07.png); background-repeat:repeat-x,repeat-x; background-position:top left,right bottom; } div.normal006 .waku_content{ display:block; position:relative; top:21px; left:-40px; margin-bottom:42px; width:calc(100% + 80px); background-image:url(n006_04.png),url(n006_05.png); background-repeat:repeat-y,repeat-y; background-position:top left,top right; } div.normal006 .waku_content2{ box-sizing:border-box; padding:10px 70px; min-height:155px; }
        
ダウンロードしました。
無題ドキュメント
切れ目が目立つので目立たせない場合は、サイズ固定などで解決できます。
<div class="normal007"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.normal007{ position:relative; background-color:#efe2bb; padding:30px 20px; background-clip:content-box; } div.normal007::before{ content:""; width:100%; height:100%; position:absolute; left:0px; top:0px; background-image:url(n007_01.gif),url(n007_03.gif), url(n007_06.png),url(n007_08.png); background-repeat:no-repeat,no-repeat; background-position:top left,top right,bottom left,bottom right; } div.normal007::after{ content:""; position:absolute; top:0px; left:99px; display:block; width:calc(100% - 187px); height:100%; background-image:url(n007_02.png),url(n007_07.png); background-repeat:repeat-x,repeat-x; background-position:top left,bottom left; } div.normal007 .waku_content{ box-sizing:border-box; display:block; position:relative; top:32px; left:-20px; width:calc(100% + 40px); margin-bottom:66px; background-image:url(n007_04.png),url(n007_05.png); background-repeat:repeat-y,repeat-y; background-position:top left,top right; } div.normal007 .waku_content2{ box-sizing:border-box; padding:20px 80px; min-height:228px; }
        
ダウンロードしました。
無題ドキュメント
シンプルにするか迷ったが動いてるのでこちらに。
<div class="normal008"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.normal008{ box-sizing:border-box; position:relative; padding:24px 16px 2px 16px; background-color:white; background-clip:content-box; background-image:url(n008_09.png); background-repeat:repeat-x; background-position:bottom left; } div.normal008::before{ content:""; position:absolute; top:14px; left:17px; display:block; width:calc(100% - 34px); height:calc(100% - 14px); background-image:url(n008_02.gif),url(n008_06.png); background-repeat:repeat-x,repeat-x; background-position:top left,bottom left; } div.normal008::after{ content:""; width:100%; height:100%; position:absolute; left:0px; top:0px; background-image:url(n008_01.gif),url(n008_03.gif), url(n008_05.png),url(n008_07.png); background-repeat:no-repeat,no-repeat; background-position:top left,top right,bottom left,bottom right; } div.normal008 .waku_content{ box-sizing:border-box; display:block; position:relative; top:0; left:-12px; padding:0 12px 0 12px; width:calc(100% + 24px); margin-bottom:10px; background-image:url(n008_04.png),url(n008_04.png); background-repeat:repeat-y,repeat-y; background-position:top left,top right; } div.normal008 .waku_content2{ box-sizing:border-box; margin:0 1px; border-top:solid 1px black; min-height:150px; padding:10px; background-image:url(n008_08.png); background-repeat:repeat-x; background-position:top left; }
         
ダウンロードしました。
無題ドキュメント
よく見ると動いてます。
<div class="normal009"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.normal009{ box-sizing:border-box; position:relative; padding:31px 33px 30px 33px; color:white; background-color:#006633; background-clip:content-box; } div.normal009::before{ content:""; width:100%; height:100%; position:absolute; left:0px; top:0px; background-image:url(n009_01.gif),url(n009_03.gif), url(n009_06.gif),url(n009_08.gif); background-repeat:no-repeat,no-repeat; background-position:top left,top right,bottom left,bottom right; } div.normal009::after{ content:""; position:absolute; top:0px; left:43px; display:block; width:calc(100% - 86px); height:100%; background-image:url(n009_02.gif),url(n009_07.gif); background-repeat:repeat-x,repeat-x; background-position:top left,bottom left; } div.normal009 .waku_content{ box-sizing:border-box; display:block; position:relative; top:10px; left:-33px; width:calc(100% + 66px); margin-bottom:20px; background-image:url(n009_04.gif),url(n009_05.gif); background-repeat:repeat-y,repeat-y; background-position:top left,top right; } div.normal009 .waku_content2{ box-sizing:border-box; min-height:150px; padding:0px 45px; }
        
ダウンロードしました。
無題ドキュメント
内容
<div class="normal010"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.normal010{ box-sizing:border-box; position:relative; background-color:white; padding:26px 15px 25px; background-clip:content-box; background-image:url(n010_06.png),url(n010_06.png), url(n010_07.png),url(n010_07.png); background-repeat:repeat-x,repeat-x,repeat-y,repeat-y; background-position:top 26px left 0px,bottom 25px left 0px,top 0px left 15px,top 0px right 15px; } div.normal010::before{ content:""; width:100%; height:100%; position:absolute; left:0px; top:0px; background-image:url(n010_01.png),url(n010_01.png),url(n010_02.png),url(n010_03.png), url(n010_04.png),url(n010_05.png); background-repeat:no-repeat,no-repeat,no-repeat,no-repeat; background-position:top 0px left 20%,top 0px right 20%,top 15px left 2px,top 15px right 2px,bottom 15px left 2px,bottom 15px right 2px; } div.normal010 .waku_content2{ box-sizing:border-box; min-height:150px; padding:30px; }
       
ダウンロードしました。

1 11 


戻る