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

枠素材 simple

1 11 

シンプル

無題ドキュメント
内容
<div class="simple001"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.simple001{ padding:10px; position:relative; } div.simple001::before{ content:""; box-sizing:border-box; position:absolute; top:0; left:0; width:100%; height:100%; background-image:url(s001_01.png),url(s001_02.png), url(s001_03.png),url(s001_04.png), url(s001_05.png),url(s001_06.png), url(s001_07.png),url(s001_08.png); background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-x,repeat-y,repeat-y; background-position:top left,top right,left bottom,right bottom,top,bottom,left,right; } div.simple001 .waku_content2{ box-sizing:border-box; background-color:white; min-height:150px; padding:10px; }
        
ダウンロードしました。
無題ドキュメント
内側の透過処理対応はしてないです。
<div class="simple002"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.simple002{ background-image: url(s002_01.png),url(s002_02.png), url(s002_03.png),url(s002_04.png), url(s002_05.png),url(s002_06.png), url(s002_07.png),url(s002_08.png); background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-x,repeat-y,repeat-y; background-position:top left,top right,left bottom,right bottom,top,bottom,left,right; padding:4px; border-radius:6px; } div.simple002 .waku_content2{ box-sizing:border-box; background-image:url(s002_09.png); padding:10px; min-height:100px; }
         
ダウンロードしました。
無題ドキュメント
画像は未使用です。
<div class="simple003"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.simple003{ box-sizing:border-box; position:relative; background-color:#d1c9af; border-radius:40px 0; padding:4px 4px; } div.simple003::before{ content:"+"; color:#d1c9af; position:absolute; left:15px; top:15px; } div.simple003::after{ content:"+"; color:#d1c9af; position:absolute; right:15px; bottom:10px } div.simple003 .waku_content{ box-sizing:border-box; background-color:#ede9dd; border-radius:40px 0; border:solid 2px white; min-height:100px; padding:20px; }

画像は使用していません。

ダウンロードしました。
無題ドキュメント
内容
<div class="simple004"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.simple004{ position:relative; margin:0px 17px; padding:17px 0 17px 0; background-image: url(s004_05.png),url(s004_06.png); background-repeat:repeat-x,repeat-x; background-position:top 3px left 0,bottom 3px right 0; } div.simple004::before{ content:""; box-sizing:border-box; position:absolute; width:calc(100% + 34px); height:100%; left:-17px; top:0; background-image:url(s004_01.png),url(s004_02.png), url(s004_03.png),url(s004_04.png); background-repeat:no-repeat,no-repeat; background-position:top 3px left 3px,top 3px right 3px,bottom 3px left 3px,bottom 3px right 3px; } div.simple004 .waku_content{ background-image: url(s004_07.png),url(s004_08.png); background-color:transparent; background-repeat:repeat-y,repeat-y; background-position:left 3px top 0px,right 3px bottom 0px; margin:0 -17px; padding:0px 17px; } div.simple004 .waku_content2{ box-sizing:border-box; padding:8px; background-color:white; min-height:100px; }
        
ダウンロードしました。
無題ドキュメント
画像は1つだけです。
<div class="simple005"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.simple005{ padding:15px; position:relative; } div.simple005::before{ content:""; box-sizing:border-box; display:block; width:100%; height:31px; position:absolute; top:0px; left:0px; background-image: url(s005_01.png),url(s005_01.png); background-repeat:no-repeat,no-repeat; background-position:top left,top right; } div.simple005::after{ display:block; box-sizing:border-box; content:""; width:100%; height:31px; position:absolute; bottom:3px; right:0; background-image: url(s005_01.png),url(s005_01.png); background-repeat:no-repeat,no-repeat; background-position:top left,top right; } div.simple005 .waku_content{ border:solid 2px black; background-color:#b3d0f8; padding:6px; } div.simple005 .waku_content2{ box-sizing:border-box; min-height:100px; padding:10px; background-color:white; }
 
ダウンロードしました。
無題ドキュメント
内容
<div class="simple006"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.simple006{ position:relative; background-image: url(s006_01.png),url(s006_02.png), url(s006_03.png),url(s006_04.png); background-repeat:no-repeat,no-repeat,no-repeat,no-repeat; background-position:top 5px left 5px,top 5px right 5px,left 5px bottom 5px,right 5px bottom 5px; padding:15px; } div.simple006::before{ content:""; box-sizing:border-box; position:absolute; display:block; top:5px; left:17px; width:calc(100% - 34px); height:calc(100% - 10px); background-image:url(s006_05.png),url(s006_06.png); background-repeat:repeat-x,repeat-x; background-position:top left,bottom left; } div.simple006::after{ content:""; box-sizing:border-box; position:absolute; display:block; top:20px; left:0; width:100%; height:calc(100% - 40px);; background-image:url(s006_07.png),url(s006_08.png); background-repeat:repeat-y,repeat-y; background-position:top 0 left 5px,top 0 right 5px; } div.simple006 .waku_content{ box-sizing:border-box; background-color:white; padding:10px; min-height:100px; }
        
ダウンロードしました。
無題ドキュメント
内容
<div class="simple007"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.simple007{ position:relative; background-image: url(s007_01.png),url(s007_03.png); background-repeat:no-repeat,no-repeat; background-position:top left,top right; padding:16px 16px 0; } div.simple007::before{ content:""; box-sizing:border-box; position:absolute; display:block; top:0; left:16px; width:calc(100% - 32px); height:100%; background-image:url(s007_02.png); background-repeat:repeat-x; background-position:top left; border-bottom:solid 1px black; } div.simple007::after{ content:""; box-sizing:border-box; position:absolute; display:block; top:16px; left:10px; width:calc(100% - 20px); height:calc(100% - 16px); background-image:url(s007_04.png),url(s007_04.png); background-repeat:repeat-y,repeat-y; background-position:left,right; border-bottom:solid 1px black; } div.simple007 .waku_content{ background-color:white; padding:10px; min-height:100px; box-sizing:border-box; }
    
ダウンロードしました。
無題ドキュメント
内容
<div class="simple008"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.simple008{ position:relative; background-image: url(s008_01.png),url(s008_03.png); background-repeat:no-repeat,no-repeat; background-position:top left,bottom left; padding:16px 0 16px; } div.simple008::before{ content:""; box-sizing:border-box; position:absolute; display:block; top:16px; left:0; height:calc(100% - 32px); width:100%; background-image:url(s008_02.png); background-repeat:repeat-y; background-position:top left; border-right:solid 1px black; } div.simple008::after{ content:""; box-sizing:border-box; position:absolute; display:block; top:10px; left:16px; height:calc(100% - 20px); width:calc(100% - 16px); background-image:url(s008_04.png),url(s008_04.png); background-repeat:repeat-x,repeat-x; background-position:top,bottom; border-right:solid 1px black; } div.simple008 .waku_content{ box-sizing:border-box; background-color:white; padding:10px 10px 10px 25px; min-height:100px; }
    
ダウンロードしました。
無題ドキュメント
複雑な形状だったので、内側の透過処理対応(画像部分)はしてないです。
<div class="simple009"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.simple009{ position:relative; background-image: url(s009_01.png),url(s009_03.png), url(s009_06.png),url(s009_08.png); background-repeat:no-repeat,no-repeat,no-repeat,no-repeat; background-position:top left,top right,left bottom,right bottom; padding:13px 21px; } div.simple009::before{ content:""; box-sizing:border-box; position:absolute; display:block; top:0; left:21px; width:calc(100% - 42px); height:100%; background-image:url(s009_02.png),url(s009_07.png); background-repeat:repeat-x,repeat-x; background-position:top left,bottom left; } div.simple009::after{ content:""; box-sizing:border-box; position:absolute; display:block; top:21px; left:0; width:100%; height:calc(100% - 42px); background-image:url(s009_04.png),url(s009_05.png); background-repeat:repeat-y,repeat-y; background-position:top left,top right; } div.simple009 .waku_content{ box-sizing:border-box; background-color:white; padding:10px 5px; min-height:100px; }
        
ダウンロードしました。
無題ドキュメント
複雑な形状だったので、内側の透過処理対応(画像部分)はしてないです。
<div class="simple010"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.simple010{ position:relative; background-image: url(s010_01.png),url(s010_02.png), url(s010_03.png),url(s010_04.png); background-repeat:no-repeat,no-repeat,no-repeat,no-repeat; background-position:top left,top right,left bottom,right bottom; padding:16px; } div.simple010::before{ box-sizing:border-box; content:""; position:absolute; display:block; top:0; left:17px; width:calc(100% - 34px); height:100%; background-image:url(s010_05.png),url(s010_06.png); background-repeat:repeat-x,repeat-x; background-position:top left,bottom left; } div.simple010::after{ box-sizing:border-box; content:""; position:absolute; top:17px; left:0; width:100%; height:calc(100% - 34px); background-image:url(s010_07.png),url(s010_08.png); background-repeat:repeat-y,repeat-y; background-position:top left,top right; } div.simple010 .waku_content{ background-color:#ccb98f; padding:10px 5px; min-height:100px; box-sizing:border-box; }
        
ダウンロードしました。

1 11 


戻る