[기타] 나만의 하스스톤 영웅 인장

하스스톤 영웅 방식으로 인장을 만들 수 있습니다.

초상화를 클릭하면 감정표현을 할 수 있고, 우측 아이콘을 클릭하면 마격을 줄 수 있습니다.

* 인장예시 1 *

감탄! 이런! 위협! 감사 칭찬 인사

법무관 피닉스

엔 타로 아둔!

정말 멋지군!

포기하지 않는다면 실수는 부끄러운 게 아닐세!

기사단에게 감히 대항하는가?

고맙네!

대단한 기량일세!

그대를 만나 기쁘군!

마무리 일격!

초상화를 클릭하면 감정표현을 할 수 있습니다.

* 인장예시 2 - 감정표현 수정 *

레이너아르타니스케리건제라툴태사다르초월체

히오스 피닉스

나는 살고, 죽고, 또 산다!

나는 아직 한창이라네!

만나서 반갑네! 젊은 집행권이여.

복수는 나의 것이다!

아둔 토리다스, 암흑 정무관이여.

오직 그대를 위해 내 목숨을 바치겠네!

함께 초월체를 처치하세나!

고맙네!

초상화를 클릭하면 감정표현을 할 수 있습니다.

(인장 구조 특성상 상단 인장이랑 동일하게 반응합니다. 하나만 있으면 문제없어요.)

* 이용방법 *

소스코드 하단의 코드를 복사한 후 빨간 글자부분을 수정하시고 이용하시면 됩니다.

(한글이나 워드에 붙여넣기 하시면 빨간 글자를 그대로 보실 수 있을겁니다.)

* 소스코드 *

<div id="background" style="width:455px;height:270px;padding-top:5px;position:relative;background-image:url('뒷배경 이미지 URL');background-size:cover;font-weight:bold;transform-style:3d-perspective;perspective:600px;">

<div data-inven-id="panel_cover" style="width:80px;height:230px;margin:10px 5px 0px 5px;float:left;">

<div data-inven-id="panel" style="overflow:hidden;float:right;width:100%;height:100%;transform:scale(0);transform-origin:100% 50%;transition:transform 0.1s;">

<a href="#" style="display:block;width:80px;height:30px;margin-bottom:10px;background:white;border:2px black solid;border-radius:5px;box-sizing:border-box;text-align:center;line-height:26px;font-weight:bold;cursor:pointer;color:black;text-decoration:none;"

data-inven-click-css="{

'panel':{'transform':'scale(0)'},

'speak0,speak2,speak3,speak4,speak5,speak6,speak_lastattack':{'transform':'scale(0)','width':'0','height':'0','margin':'0','padding':'0','opacity':'0.01'},

'speak1':{'transform':'scale(1)','width':'170px','height':'120px','margin':'10px 5px 0 5px','padding':'8px','opacity':'1'}

}"

data-inven-over-css="{'_SELF_':{'background':'#B2FFFF','text-decoration':'none'}}" data-inven-out-css="{'_SELF_':{'background':'white'}}">

감정표현 1번 명칭

</a>

<a href="#" style="display:block;width:80px;height:30px;margin-bottom:10px;background:white;border:2px black solid;border-radius:5px;box-sizing:border-box;text-align:center;line-height:26px;font-weight:bold;cursor:pointer;color:black;text-decoration:none;"

data-inven-click-css="{

'panel':{'transform':'scale(0)'},

'speak0,speak1,speak3,speak4,speak5,speak6,speak_lastattack':{'transform':'scale(0)','width':'0','height':'0','margin':'0','padding':'0','opacity':'0.01'},

'speak2':{'transform':'scale(1)','width':'170px','height':'120px','margin':'10px 5px 0 5px','padding':'8px','opacity':'1'}

}"

data-inven-over-css="{'_SELF_':{'background':'#B2FFFF','text-decoration':'none'}}" data-inven-out-css="{'_SELF_':{'background':'white'}}">

감정표현 2번 명칭

</a>

<a href="#" style="display:block;width:80px;height:30px;margin-bottom:10px;background:white;border:2px black solid;border-radius:5px;box-sizing:border-box;text-align:center;line-height:26px;font-weight:bold;cursor:pointer;color:black;text-decoration:none;"

data-inven-click-css="{

'panel':{'transform':'scale(0)'},

'speak0,speak1,speak2,speak4,speak5,speak6,speak_lastattack':{'transform':'scale(0)','width':'0','height':'0','margin':'0','padding':'0','opacity':'0.01'},

'speak3':{'transform':'scale(1)','width':'170px','height':'120px','margin':'10px 5px 0 5px','padding':'8px','opacity':'1'}

}"

data-inven-over-css="{'_SELF_':{'background':'#B2FFFF','text-decoration':'none'}}" data-inven-out-css="{'_SELF_':{'background':'white'}}">

감정표현 3번 명칭

</a>

<a href="#" style="display:block;width:80px;height:30px;margin-bottom:10px;background:white;border:2px black solid;border-radius:5px;box-sizing:border-box;text-align:center;line-height:26px;font-weight:bold;cursor:pointer;color:black;text-decoration:none;"

data-inven-click-css="{

'panel':{'transform':'scale(0)'},

'speak0,speak1,speak2,speak3,speak5,speak6,speak_lastattack':{'transform':'scale(0)','width':'0','height':'0','margin':'0','padding':'0','opacity':'0.01'},

'speak4':{'transform':'scale(1)','width':'170px','height':'120px','margin':'10px 5px 0 5px','padding':'8px','opacity':'1'}

}"

data-inven-over-css="{'_SELF_':{'background':'#B2FFFF','text-decoration':'none'}}" data-inven-out-css="{'_SELF_':{'background':'white'}}">

감정표현 4번 명칭

</a>

<a href="#" style="display:block;width:80px;height:30px;margin-bottom:10px;background:white;border:2px black solid;border-radius:5px;box-sizing:border-box;text-align:center;line-height:26px;font-weight:bold;cursor:pointer;color:black;text-decoration:none;"

data-inven-click-css="{

'panel':{'transform':'scale(0)'},

'speak0,speak1,speak2,speak3,speak4,speak6,speak_lastattack':{'transform':'scale(0)','width':'0','height':'0','margin':'0','padding':'0','opacity':'0.01'},

'speak5':{'transform':'scale(1)','width':'170px','height':'120px','margin':'10px 5px 0 5px','padding':'8px','opacity':'1'}

}"

data-inven-over-css="{'_SELF_':{'background':'#B2FFFF','text-decoration':'none'}}" data-inven-out-css="{'_SELF_':{'background':'white'}}">

감정표현 5번 명칭

</a>

<a href="#" style="display:block;width:80px;height:30px;margin-bottom:10px;background:white;border:2px black solid;border-radius:5px;box-sizing:border-box;text-align:center;line-height:26px;font-weight:bold;cursor:pointer;color:black;text-decoration:none;"

data-inven-click-css="{

'panel':{'transform':'scale(0)'},

'speak0,speak1,speak2,speak3,speak4,speak5,speak_lastattack':{'transform':'scale(0)','width':'0','height':'0','margin':'0','padding':'0','opacity':'0.01'},

'speak6':{'transform':'scale(1)','width':'170px','height':'120px','margin':'10px 5px 0 5px','padding':'8px','opacity':'1'}

}"

data-inven-over-css="{'_SELF_':{'background':'#B2FFFF','text-decoration':'none'}}" data-inven-out-css="{'_SELF_':{'background':'white'}}">

감정표현 6번 명칭

</a>

</div>

</div>

<div data-inven-id="portrait-cover" style="float:left;width:180px;height:235px;margin:5px 0 0 0;border-radius:90px 90px 0 0;transition:box-shadow 0.2s,transform 0.2s;cursor:pointer;"

data-inven-over-css="{'_SELF_':{'box-shadow':'0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #228DFF, 0 0 14px #228DFF, 0 0 16px #228DFF, 0 0 20px #228DFF, 0 0 30px #228DFF'}}"

data-inven-out-css="{'_SELF_':{'box-shadow':''}}"

data-inven-click-css="{'panel':{'transform':'scale(1)'}}">

<a href="#" data-inven-hide="portrail" data-inven-show="panel"

style="display:block;width:180px;height:210px;background-image:url('영웅 초상화 이미지 URL');background-size:cover;border:5px gold inset;border-radius:90px 90px 0 0;box-sizing:border-box;">

</a>

<div style="width:180px;height:25px;background-color:#46372C;border:2px gold solid;border-top:0;box-sizing:border-box;color:white;font-size:14px;text-align:center;line-height:21px;">

영웅 이름

</div>

</div>

<div id="speak_cover" style="float:left;width:170px;height:150px;">

<div data-inven-id="speak0" style="overflow:hidden;width:170px;height:120px;padding:8px;box-sizing:border-box;font-size:18px;background:white;border:2px black solid;border-radius:20px 20px 20px 5px;margin:10px 5px 0 5px;float:left;transform:scale(1);transform-origin:0% 100%;transition:transform 0.3s;color:black;text-decoration:none;">

감정표현 최초 내용

</div>

<div data-inven-id="speak1" style="overflow:hidden;width:0px;height:0px;padding:8px;box-sizing:border-box;font-size:18px;background:white;border:2px black solid;border-radius:20px 20px 20px 5px;float:left;transform:scale(0);transform-origin:0% 100%;transition:transform 0.3s;color:black;text-decoration:none;">

감정표현 1번 내용

</div>

<div data-inven-id="speak2" style="overflow:hidden;width:0px;height:0px;padding:8px;box-sizing:border-box;font-size:18px;background:white;border:2px black solid;border-radius:20px 20px 20px 5px;float:left;transform:scale(0);transform-origin:0% 100%;transition:transform 0.3s;color:black;text-decoration:none;">

감정표현 2번 내용

</div>

<div data-inven-id="speak3" style="overflow:hidden;width:0px;height:0px;padding:8px;box-sizing:border-box;font-size:18px;background:white;border:2px black solid;border-radius:20px 20px 20px 5px;float:left;transform:scale(0);transform-origin:0% 100%;transition:transform 0.3s;color:black;text-decoration:none;">

감정표현 3번 내용

</div>

<div data-inven-id="speak4" style="overflow:hidden;width:0px;height:0px;padding:8px;box-sizing:border-box;font-size:18px;background:white;border:2px black solid;border-radius:20px 20px 20px 5px;float:left;transform:scale(0);transform-origin:0% 100%;transition:transform 0.3s;color:black;text-decoration:none;">

감정표현 4번 내용

</div>

<div data-inven-id="speak5" style="overflow:hidden;width:0px;height:0px;padding:8px;box-sizing:border-box;font-size:18px;background:white;border:2px black solid;border-radius:20px 20px 20px 5px;float:left;transform:scale(0);transform-origin:0% 100%;transition:transform 0.3s;color:black;text-decoration:none;">

감정표현 5번 내용

</div>

<div data-inven-id="speak6" style="overflow:hidden;width:0px;height:0px;padding:8px;box-sizing:border-box;font-size:18px;background:white;border:2px black solid;border-radius:20px 20px 20px 5px;float:left;transform:scale(0);transform-origin:0% 100%;transition:transform 0.3s;color:black;text-decoration:none;">

감정표현 6번 내용

</div>

<div data-inven-id="speak_lastattack" style="overflow:hidden;width:0px;height:0px;padding:8px;box-sizing:border-box;font-size:18px;background:white;border:2px black solid;border-radius:20px 20px 20px 5px;float:left;transform:scale(0);transform-origin:0% 100%;transition:transform 0.3s;color:black;text-decoration:none;">

마무리일격 반응 내용

</div>

</div>

<div data-inven-action style="clear:right;float:right;margin:0 20px 0 0;border:0;" data-inven-nick-default="내 닉네임"

data-inven-click-css="{

'panel':{'transform':'scale(0)'},

'speak0,speak1,speak2,speak3,speak4,speak5,speak6':{'transform':'scale(0)','width':'0','height':'0','margin':'0','padding':'0','opacity':'0.01'},

'speak_lastattack':{'transform':'scale(1)','width':'170px','height':'120px','margin':'10px 5px 0 5px','padding':'8px','opacity':'1'}

}">

<span data-inven-attr-for="input" style="display:none;"></span>

<span data-inven-id="last-attack" data-inven-attr-for="last-attack-all" data-inven-text="마격"

style="width:80px;height:80px;border:10px #4F2F1C solid;border-radius:40px;transition:box-shadow 0.3s, color 0.3s;display:block;background-image:url('https://static.inven.co.kr/image_2011/hs/dataninfo/card/icon64/WoW_Chi_061_D.jpg?v=22611');background-size:cover;box-sizing:border-box;color:transparent;font-size:20px;font-weight:bold;"

data-inven-over-css="{'_SELF_':{'color':'#fff','box-shadow':'0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #228DFF, 0 0 14px #228DFF, 0 0 16px #228DFF, 0 0 20px #228DFF, 0 0 30px #228DFF'}}"

data-inven-out-css="{'_SELF_':{'color':'transparent','box-shadow':''}}">

</span>

</div>

<div style="width:100%;height:20px;margin-top:10px;clear:both;float:left;text-align:center;background-color:rgba(255,255,255,0.7);border:1px black solid;box-sizing:border-box;font-weight:bold;font-size:14px;line-height:20px;">초상화를 클릭하면 감정표현을 할 수 있습니다.</div>

</div>