自動作成
顔アイコン(32×32)
各種素材
各種ドット絵素材
その他
枠（旧table)素材
1 11
邪悪
内容
<div class="wicked001">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.wicked001{
position:relative;
padding:17px 18px;
background-color:white;
background-clip:content-box;
}
div.wicked001::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:url(w001_01.png),url(w001_02.png),url(w001_03.png),url(w001_04.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top left,top right,bottom left,bottom right;
}
div.wicked001::after{
content:"";
position:absolute;
top:38px;
left:13px;
width:calc(100% - 26px);
height:calc(100% - 76px);
background-image:url(w001_06.png),url(w001_06.png);
background-repeat:repeat-y,repeat-y;
background-position:top left,top right;
}
div.wicked001 .waku_content{
box-sizing:border-box;
position:relative;
top:-6px;
left:15px;
margin-bottom:-12px;
width:calc(100% - 30px);
height:100%;
background-image:
url(w001_05.png),url(w001_05.png);
background-repeat:repeat-x,repeat-x;
background-position:top left,bottom left;
}
div.wicked001 .waku_content2{
box-sizing:border-box;
padding:20px;
min-height:100px;
}
ダウンロードしました。
内容
<div class="wicked002">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.wicked002{
position:relative;
background-clip:content-box;
background-color:#886f5b;
padding:16px;
}
div.wicked002::before{
content:"";
position:absolute;
width:100%; height:100%;
top:0px; left:0px;
background-image:url(w002_01.png),url(w002_03.png),url(w002_06.png),url(w002_08.png);
background-repeat:no-repeat,no-repeat;
background-position:top left,top right,bottom left,bottom right;
}
div.wicked002::after{
content:"";
position:absolute;
width:100%;
height:calc(100% - 74px);
top:37px;
left:0px;
background-image:url(w002_04.png),url(w002_05.png);;
background-repeat:repeat-y,repeat-y;
background-position:bottom left,bottom right;
}
div.wicked002 .waku_content{
background-clip:content-box;
position:relative;
top:-16px;
left:20px;
width:calc(100% - 40px);
height:calc(100% - 100px);
margin-bottom:-32px;
background-image:
url(w002_02.png),url(w002_07.png);
background-repeat:repeat-x,repeat-x;
background-position:top left,bottom left;
}
div.wicked002 .waku_content2{
box-sizing:border-box;
padding:30px 0;
min-height:120px;
color:white;
}
ダウンロードしました。
内側の透過処理はしていません。
<div class="wicked003">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.wicked003{
position:relative;
margin:0px 35px;
padding:19px 0;
background-image:
url(w003_02.png),url(w003_09.png);
background-repeat:repeat-x,repeat-x;
background-position:top,bottom;
}
div.wicked003::before{
content:"";
position:absolute;
width:calc(100% + 62px);
height:19px;
left:-31px;
top:0;
background-image:url(w003_01.png),url(w003_03.png);
background-repeat:no-repeat,no-repeat;
background-position:left,right;
}
div.wicked003 .waku_content{
background-color:transparent;
background-image:
url(w003_06.png),url(w003_07.png);
background-repeat:repeat-y,repeat-y;
background-position:top 0 left 3px,right 3px top 0;
margin:0 -34px -5px -34px;
padding:0 30px
}
div.wicked003 .waku_content::before{
content:"";
position:absolute;
width:calc(100% + 62px);
height:100%;
left:-31px;
bottom:0;
background-image:url(w003_08.png),url(w003_10.png),url(w003_04.png),url(w003_05.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-position:bottom left,bottom right,left 0px top 19px,right 0px top 19px;
}
div.wicked003 .waku_content2{
box-sizing:border-box;
min-height:100px;
color:white;
background-image:url(w003_11.png);
padding:5px 10px;
}
ダウンロードしました。
gifアニメ仕様の為、gif画像使用。内側の透過処理（画像部分）はしていませんが、いつかやろうと思っています。
<div class="wicked004">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.wicked004{
position:relative;
margin:0px 45px;
padding:49px 0 23px;
background-image:
url(w004_02.gif),url(w004_07.gif);
background-repeat:repeat-x,repeat-x;
background-position:top,bottom;
}
div.wicked004::before{
content:"";
position:absolute;
width:calc(100% + 90px);
height:49px;
left:-45px;
top:0;
background-image:url(w004_01.gif),url(w004_03.gif);
background-repeat:no-repeat,no-repeat;
background-position:left,right;
}
div.wicked004 .waku_content{
background-color:transparent;
background-image:
url(w004_04.gif),url(w004_05.gif);
background-repeat:repeat-y,repeat-y;
background-position:top left,right top;
margin:0 -45px -0px -45px;
padding:0 33px;
}
div.wicked004 .waku_content::before{
content:"";
height:49px;
position:absolute;
width:calc(100% + 90px);
left:-45px;
bottom:0;
background-image:url(w004_06.gif),url(w004_08.gif);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-position:bottom left,bottom right;
}
div.wicked004 .waku_content2{
box-sizing:border-box;
min-height:100px;
color:white;
background-color:#cf74ad;
padding:5px 10px;
}
ダウンロードしました。
new。ハロウィン仕様。内側の透過処理は対応していますが、特殊のため、テストボタンでの確認ができません。グラデーションの色はＣＳＳで設定しています。
<div class="wicked005">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.wicked005{
position:relative;
background-color:black;
margin-top:78px;
padding:10px;
}
div.wicked005 .waku_content{
box-sizing:border-box;
border-radius:40px;
min-height:150px;
background: -moz-linear-gradient(bottom, #cc33ff, #003399 30%, #003399 60%, #003399);
background: -webkit-linear-gradient(bottom, #cc33ff, #003399 30%, #003399 60%, #003399);
background: linear-gradient(bottom, #cc33ff, #003399 30%, #003399 60%, #003399);
}
div.wicked005 .waku_content::before{
margin-top:-32px;
content:"";
display:block;
background-image:url(w005_02.png);
background-repeat:repeat-x;
background-position:left top;
width:100%;
height:50px;
}
div.wicked005 .waku_content::after{
content:"";
box-sizing:border-box;
position:absolute;
width:100%;
height:150px;
left:0; bottom:10px;
background-image:url(w005_07.png),url(w005_08.png);
background-repeat:repeat-x,no-repeat;
background-position:left bottom,right 20px bottom 20px;
}
div.wicked005 .waku_content2{
box-sizing:border-box;
min-height:150px;
color:white;
padding:0 20px;
background:transparent;
}
div.wicked005 .waku_content2::before{
position:absolute;
content:"";
width:calc(100% + 20px);
height:132px;
left:-10px;
top:-77px;
background-image:url(w005_01.png),url(w005_03.png),url(w005_04.png),
url(w005_05.png),url(w005_06.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat-x;
background-position:top 0px left 50%,left 0 top 70px,right 20px top 60px,top 55px left 0px,top 55px right 0px;
}
ダウンロードしました。
内容
<div class="wicked006">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.wicked006{
box-sizing:border-box;
position:relative;
padding:33px 44px;
background-color:white;
background-clip:content-box;
}
div.wicked006::before{
content:"";
box-sizing:border-box;
position:absolute;
width:calc(100% - 68px); height:calc(100% - 58px);
left:34px;
top:29px;
background-clip:content-box;
background-image:url(w006_02.png),url(w006_02.png),
url(w006_04.png),url(w006_04.png);
background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;
background-position:top left,bottom left,top left,top right;
}
div.wicked006::after{
content:"";
width:100%;
height:100%;
position:absolute;
left:0px; top:0px;
background-image:url(w006_01.png),url(w006_03.png),url(w006_05.png),url(w006_06.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top 3px left 3px,top 3px right 3px,bottom 3px left 3px,bottom 3px right 3px;
}
div.wicked006 .waku_content2{
box-sizing:border-box;
min-height:150px;
padding:30px;
}
ダウンロードしました。
内容
<div class="wicked007">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.wicked007{
box-sizing:border-box;
position:relative;
padding:110px 30px;
background-color:black;
background-clip:content-box;
}
div.wicked007::before{
content:"";
box-sizing:border-box;
position:absolute;
width:calc(100% - 20px); height:calc(100% - 95px);
left:10px;
top:95px;
background-clip:content-box;
background-image:url(w007_07.png),url(w007_08.png);
background-repeat:repeat-x,repeat-x;
background-position:top left,bottom 92px left 0;
}
div.wicked007::after{
content:"";
width:100%;
height:100%;
position:absolute;
left:0px; top:0px;
background-image:url(w007_01.png),url(w007_02.png),url(w007_03.png),url(w007_04.png),
url(w007_09.png),url(w007_10.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top 92px left 0,top 92px right 0,bottom 92px left 0,bottom 92px right 0,top center,bottom 30px left 50%;
}
div.wicked007 .waku_content{
box-sizing:border-box;
width:calc(100% + 50px);
margin-left:-25px;
background-image:url(w007_05.png),url(w007_06.png);
background-repeat:repeat-y,repeat-y;
background-position:top left,top right;
}
div.wicked007 .waku_content2{
box-sizing:border-box;
height:100%;
padding:52px;
color:white;
}
ダウンロードしました。
戦いの日々のアシュトウをイメージした毒テーブル(笑)。
<div class="wicked008">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.wicked008{
box-sizing:border-box;
position:relative;
padding:77px;
background-color:#e5e4da;
background-clip:content-box;
}
div.wicked008::before{
content:"";
box-sizing:border-box;
position:absolute;
width:calc(100% - 110px); height:calc(100% - 102px);
left:55px;
top:50px;
background-clip:content-box;
background-image:url(w008_05.png),url(w008_06.png),
url(w008_07.png),url(w008_08.png);
background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;
background-position:top left,bottom left,top 35px left 0,top 35px right 0;
}
div.wicked008::after{
content:"";
width:100%;
height:100%;
position:absolute;
left:0px; top:0px;
background-image:url(w008_01.png),url(w008_02.png),url(w008_03.png),url(w008_04.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top left,top right,bottom left,bottom right;
}
div.wicked008 .waku_content2{
box-sizing:border-box;
min-height:300px;
padding:30px;
background-image:url(w008_09.png);
background-repeat:no-repeat;
background-position:bottom 10px right 10px;
}
ダウンロードしました。
内容
<div class="wicked009">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.wicked009{
box-sizing:border-box;
position:relative;
padding:80px 0 70px;
background-color:black;
background-clip:content-box;
}
div.wicked009::before{
content:"";
box-sizing:border-box;
position:absolute;
width:100%; height:calc(100% - 70px);
top:70px;
background-clip:content-box;
background-image:url(w009_01.png),url(w009_01.png);
background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;
background-position:top left,bottom left,top left,top right;
}
div.wicked009::after{
content:"";
width:100%;
height:100%;
position:absolute;
left:0px; top:0px;
background-image:url(w009_02.png),url(w009_03.png),url(w009_04.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top 40px left 50%,top 10px left 30px,top 0 right 10px;
}
div.wicked009 .waku_content2{
box-sizing:border-box;
min-height:200px;
padding:75px 30px 40px;
color:white;
}
ダウンロードしました。
内容
<div class="wicked010">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.wicked010{
box-sizing:border-box;
position:relative;
background-color:white;
padding:55px 30px 40px 30px;
background-clip:content-box;
}
div.wicked010::before{
content:"";
z-index:2;
box-sizing:border-box;
position:absolute;
top:0; left:0;
width:100%;
height:100%;
background-image:url(w010_01.png),url(w010_02.png),url(w010_03.png),url(w010_04.png)
,url(w010_05.png),url(w010_06.png),url(w010_10.png),url(w010_10.png)
,url(w010_10.png),url(w010_11.png),url(w010_11.png),url(w010_11.png),url(w010_13.png);
background-repeat:no-repeat;
background-position:top 0 left 30px,top 0 right 30px,top 55px left 0,top 55px right 0,bottom 40px left 0,bottom 40px right 0,
top calc(10% + 50px) left 0,bottom calc(10% + 30px) left 0,top calc(50% + 10px) left 0,top calc(10% + 50px) right 0,bottom calc(10% + 30px) right 0,top calc(50% + 10px) right 0,bottom 11px left 50%;
}
div.wicked010::after{
content:"";
box-sizing:border-box;
position:absolute;
top:86px; left:0;
width:100%;
height:calc(100% - 174px);
background-image:url(w010_08.png),url(w010_09.png);
background-repeat:repeat-y,repeat-y;
background-position:top left,top right;
}
div.wicked010 .waku_content{
position:relative;
z-index:1;
left:30px;
width:calc(100% - 60px);
height:100%;
background-image:url(w010_07.png),url(w010_12.png);
background-repeat:repeat-x,repeat-x;
background-position:top left,bottom left;
}
div.wicked010 .waku_content2{
box-sizing:border-box;
min-height:230px;
padding:30px 5px 50px;
}
ダウンロードしました。
1 11
