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

枠素材 comical

1 

コミカル

無題ドキュメント
内容
<div class="comical001"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.comical001{ background-color:white; position:relative; margin:41px 41px 0; padding:16px 0 18px; background-image:url(c001_02.png),url(c001_07.png); background-repeat:repeat-x,repeat-x; background-position:top,bottom; } div.comical001::before{ content:""; position:absolute; left:-41px; top:-35px; display:block; width:calc(100% + 82px); height:51px; background-image:url(c001_01.png),url(c001_03.png),url(c001_09.png); background-repeat:no-repeat,no-repeat,no-repeat; background-position:top left,top right,top center; } div.comical001::after{ content:""; position:absolute; left:-41px; bottom:0; display:block; width:calc(100% + 82px); height:28px; background-image:url(c001_06.png),url(c001_08.png); background-repeat:no-repeat,no-repeat; background-position:bottom left,bottom right; } div.comical001 .waku_content{ box-sizing:border-box; position:relative; width:calc(100% + 82px); left:-41px; background-image:url(c001_04.png),url(c001_05.png); background-repeat:repeat-y,repeat-y; background-position:left,right; padding:0 41px; } div.comical001 .waku_content2{ box-sizing:border-box; width:100%; min-height:150px; padding:10px; }
         
ダウンロードしました。
無題ドキュメント
内容
<div class="comical002"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.comical002{ position:relative; background-color:white; margin:58px 32px 0; padding:30px 0px 33px; background-image:url(c002_03.png),url(c002_07.png); background-repeat:repeat-x,repeat-x; background-position:top left,bottom; } div.comical002::before{ content:""; position:absolute; left:-32px; top:-58px; display:block; width:calc(100% + 64px); height:88px; background-image:url(c002_01.png),url(c002_04.png),url(c002_02.png); background-repeat:no-repeat,no-repeat,no-repeat; background-position:bottom left,bottom right,bottom center; } div.comical002::after{ content:""; position:absolute; left:-32px; bottom:0; display:block; width:calc(100% + 64px); height:33px; background-image:url(c002_06.png),url(c002_08.png); background-repeat:no-repeat,no-repeat; background-position:bottom left,bottom right; } div.comical002 .waku_content{ box-sizing:border-box; position:relative; min-height:150px; left:-16px; width:calc(100% + 32px); background-image:url(c002_05.png),url(c002_05.png); background-repeat:repeat-y,repeat-y; background-position:top -1px left 0px,top -1px right 0px; padding:10px 41px; }
         
ダウンロードしました。
無題ドキュメント
背景色は指定してないです。
<div class="comical003"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.comical003{ box-sizing:border-box; margin:0; padding:50px 0 0; background-image:url(c003_01.png),url(c003_02.png); background-repeat:no-repeat,no-repeat; background-position:top left,top 50px right 0px; } div.comical003 .waku_content{ box-sizing:border-box; min-height:300px; padding:85px 75px; background-image:url(c003_03.png),url(c003_04.png); background-repeat:no-repeat,no-repeat; background-position:bottom left,bottom right; }
    
ダウンロードしました。
無題ドキュメント
GIFアニメが多いため、GIFにしています。
<div class="comical004"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.comical004{ position:relative; margin:50px 50px 35px; } div.comical004::before{ content:""; box-sizing:border-box; position:absolute; display:block; left:-50px; width:calc(100% + 100px); height:100%; background-image:url(c004_04.gif),url(c004_05.gif); background-repeat:repeat-y,repeat-y; backgrond-color:red; background-position:top 10px left -5px,top 10px right -5px; } div.comical004::after{ content:""; position:absolute; z-indenx:1; top:-40px; display:block; width:100%; height:calc(100% + 70px); background-image:url(c004_02.gif),url(c004_07.gif); background-repeat:repeat-x,repeat-x; background-position:top left,bottom left; } div.comical004 .waku_content{ content:""; display:block; width:100%; height:100%; } div.comical004 .waku_content::before{ content:""; width:calc(100% + 110px); height:calc(100% + 70px); position:absolute; z-index:2; left:-55px; top:-40px; background-image:url(c004_01.gif),url(c004_03.gif),url(c004_06.gif),url(c004_08.gif); background-repeat:no-repeat,no-repeat,no-repeat,no-repeat; background-position:top left,top right,bottom left,bottom right; } div.comical004 .waku_content2{ box-sizing:border-box; position:relative; left:-4px; width:calc(100% + 8px); background-color:white; min-height:200px; padding:30px; }
        
ダウンロードしました。
無題ドキュメント
内容
<div class="comical005"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.comical005{ position:relative; padding-top:30px; } div.comical005::before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-image:url(c005_01.png),url(c005_02.png),url(c005_02.png); background-repeat:no-repeat; background-position:top center,top 60% left 30px,top 60% right 30px; } div.comical005 .waku_content{ box-sizing:border-box; border-radius:40px; border:solid 5px white; padding:10px; background-color:#aaeeee; } div.comical005 .waku_content2{ box-sizing:border-box; min-height:200px; border-radius:40px; padding:60px 15px 10px; background-color:white; }
  
ダウンロードしました。
無題ドキュメント
内容
<div class="comical006"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.comical006{ position:relative; padding-top:100px; padding-bottom:6px; } div.comical006::before{ content:""; box-sizing:border-box; width:100%; height:calc(100% + 6px); top:0; left:0; z-index:2; position:absolute; background-image:url(c006_01.png),url(c006_03.png),url(c006_04.png); background-repeat:no-repeat,no-repeat,no-repeat; background-position:top 95px left 0,top 95px right 0,top center; } div.comical006::after{ content:""; z-index:1; position:absolute; width:calc(100% - 40px); height:calc(100% - 190px); top:95px; left:20px; background-image:url(c006_02.png); background-repeat:repeat-x; background-postion:top left; } div.comical006 .waku_content{ margin:29px 5px 0; background-color:white; background-image:url(c006_06.png),url(c006_05.png); background-repeat:no-repeat,repeat-x; background-position:bottom center,bottom left; border:solid 1px black; } div.comical006 .waku_content::before{ content:""; box-sizing:border-box; width:calc(100% - 20px); height:100%; top:0; left:10px; position:absolute; background-image:url(c006_07.png),url(c006_09.png),url(c006_08.png); background-repeat:no-repeat,no-repeat,repeat-x; background-position:bottom left,bottom right,bottom left; } div.comical006 .waku_content2{ box-sizing:border-box; padding:10px 10px 140px; min-height:200px; }
         
ダウンロードしました。
無題ドキュメント
内容
<div class="comical007"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.comical007{ box-sizing:border-box; position:relative; padding:100px 32px 20px; background-color:white; background-clip:content-box; } div.comical007::before{ content:""; box-sizing:border-box; position:absolute; width:calc(100% - 228px); height:100%; left:114px; top:0; background-image:url(c007_07.png),url(c007_08.png); background-repeat:repeat-x,repeat-x; background-position:top 80px left 0,bottom 6px left 0; } div.comical007::after{ content:""; box-sizing:border-box; position:absolute; width:100%; height:100%; left:0; top:0; background-image:url(c007_01.png),url(c007_02.png), url(c007_03.png),url(c007_04.png),url(c007_09.png); background-repeat:no-repeat,no-repeat,no-repeat,no-repeat; background-position:top left,top right,bottom left,bottom right,top center; } div.comical007 .waku_content{ position:relative; width:calc(100% + 64px); left:-32px; background-image:url(c007_05.png),url(c007_06.png); background-repeat:repeat-y,repeat-y; background-position:bottom left,bottom right; } div.comical007 .waku_content2{ box-sizing:border-box; padding:40px 65px; min-height:200px; }
         
ダウンロードしました。
無題ドキュメント
内容
<div class="comical008"> <div class="waku_content"> <div class="waku_content2"> 内容 </div> </div> </div> div.comical008{ box-sizing:border-box; position:relative; padding:210px 32px 80px; } div.comical008::before{ content:""; position:absolute; width:100%; height:100%; left:0; top:0; background-image:url(c008_01.png),url(c008_02.png); background-repeat:no-repeat,no-repeat; background-position:top center,bottom center; } div.comical008 .waku_content2{ min-height:350px; padding:20px; background-color:white; border:solid 1px #aaa; border-radius:20px; }
  
ダウンロードしました。

1 


戻る