롤20 폰트 css - lol20 ponteu css

추가 2021.03.13 아침

백업할 겸 올리는거에요 대충.. 갈겼음.

포타..에서 즐찾편하게 하시라고!! 포타에도 옮겼어요 https://whadis-6ox.postype.com/post/11168963

기본은 이것입니다...

[쓰고 싶은 말](#" style="property1:value;property2:value;property3:value;)

https://app.roll20.net/forum/post/5899495/roll20-tips-and-tricks-innovative-solutions-to-common-problems/?pageforid=9119412#post-9119412

-html 컬러 코드 픽커: https://html-color-codes.info/Korean/

색상 코드 집는 곳 #여섯자로 나와주십니다. #코드 부분을 바꾸는 것으로 색상을 쉽게 변경할 수 있어요. 색상 바꾸는 것만 여러개 등록하고 싶으시다면 아래 코드를 넣으세요..

#?{색상|
색상이름,코드여섯자리|
색상이름,코드여섯자리}

매크로 하나로 여러 코드를 정리해 쓰고 싶다면..

[?{ 할말|}](#" style="?{효과|효과설명,코드})

이걸 하면 됩니다. )나 ,가 코드 안에 더 들어가는 경우에는 좀 손을 봐주셔야 돌아가요 (ㅠㅠ~~)

+매크로 안에는

[?{ 할말|}](#" style="?{효과|
효과설명,코드|
효과설명,코드|
효과설명,코드})

이렇게 넣어두면.. 보기도 정리하기도 쉽겠죠..

TIP::

letter-spacing: 숫자px; 넣으면 자간을 조절할 수 있다네요. 재밌어요.. 

 display:block; 이걸 넣으면 블록같은 거 두줄이 넘겼을 때 한 박스로 이쁘게 합쳐줍니다.

text-decoration:none; 이거 추가하면 마우스 댔을 때 줄 안생긴다고함....

그리고 대충 아래가 제가 넣으려고 긁은 매크로

숨기기

[?{할말|}](#" style="color:rgba(0,0,0,0);text-shadow:5px 0px 10px black,-5px 0px 10px black;font-size:12px;line-height:12px;text-decoration:none;)

[?{할말|}](#" style="color:black;border:1px solid black;background-color:black;)

멋지게 뭔가 알려주기

[?{할말|}](#" style="border:1px solid black;background-color:?{배경색상|화이트,white|베이지,beige};margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;)

[?{할말|}](#" style="border-style:groove;border-color:#ffffff;padding:5px;background-color:#ffffff;font-size:15px;text-align:center;user-select:none;display:block;text-decoration:none;)

[?{할말|}](#" style="border-style:inset;border-color:#ffffff;padding:5px;background-color:#ffffff;font-size:15px;text-align:center;user-select:none;display:block;text-decoration:none;)

[?{할말|}](#" style="border-style:outset;border-color:#ffffff;padding:5px;background-color:#ffffff;font-size:15px;text-align:center;user-select:none;display:block;text-decoration:none;)

글자 꾸미고 강조하기

[?{ 할말|}](#" style="?{효과|
검은 그림자,color:white;font-size:20px;line-height:20px;text-shadow:3px 1px 6px #000000,-5px 1px 10px #000000;text-decoration:none;|
분홍 그림자,color:white;font-size:20px;line-height:20px;text-shadow:3px 0px 6px #FE2E64,-5px 0px 10px #F5BCA9;text-decoration:none;}

[?{ 할말|}](#" style="color:?{색상|
붉은 강조,brown|
검은 강조,black|
파란 강조,blue};font-size:25px;font-weight:bold;display:block;text-align:center;line-height:25px;text-decoration:none;)

[?{할말|}](#" style="color:white; text-shadow:1px 3px 2px #ff0000,2px 1px 2px #0100ff,5px 1px 0px #40FF00;text-decoration:none;)

[?{할말|}](#" style="border-bottom:1px solid ?{컬러|블루,#688FF4|레드,#cf0000};padding:0.1em;text-decoration:none;)

풍선

[●](#" style="color:white;font-size:10px;text-shadow:1px 1px 1px #000000;text-decoration:none;)[●](#" style="color:white;font-size:15px;text-shadow:1px 1px 1px #000000;text-decoration:none;)[●](#" style="color:white;font-size:20px;text-shadow:1px 1px 1px #000000;text-decoration:none;)[?{할말|}](#" style="order:1px solid black;border-radius:7px;padding:5px;box-shadow:1px 1px 1px 1px grey;line-height:30px;background-color:#ffffff;text-decoration:none;)

더보기

[ ](#" style="order:1px solid black;border-radius:1px;padding:1px;box-shadow:1px 1px 1px 1px grey;line-height:30px;text-decoration:none;)[ ](#" style="order:1px solid black;border-radius:3px;padding:3px;box-shadow:1px 1px 1px 1px grey;line-height:30px;text-decoration:none;)[?{할말|}](#" style="border:1px solid black;border-radius:5px;padding:5px;box-shadow:1px 1px 1px 1px grey;line-height:30px;text-decoration:none;)

[●●● ](#" style="color:white;font-size:20px;text-shadow:1px 1px 1px #000000)[?{할말|}](#" style="border:1px solid black;border-radius:5px;padding:5px;box-shadow:1px 1px 1px 1px grey;line-height:30px;background-color:#ffffff;text-decoration:none;)

[ ](#" style="order:1px solid black;font-size:2px;border-radius:10px;padding:2px;box-shadow:1px 1px 1px 1px grey;line-height:30px;background-color:#ffffff) [ ](#" style="border:1px solid black;font-size:2px;border-radius:10px;padding:2px;box-shadow:1px 1px 1px 1px grey;line-height:30px;background-color:#ffffff)  [?{할말|}](#" style="order:1px solid black;border-radius:5px;padding:5px;box-shadow:1px 1px 1px 1px grey;line-height:30px;background-color:#ffffff;text-decoration:none;)

@dada__trpg님께서 보내주셨어요..

[ ](#" style="display: inline-block;vertical-align:bottom;border-radius:2px;padding:2px;box-shadow:1px 1px 1px 1px;line-height:0.5;font-size:0.5em;position:absolute;bottom:10px;left:20px;)[ ](#" style="display:inline-block;vertical-align:bottom;border-radius:4px;padding:4px;box-shadow:1px 1px 1px 1px;line-height:0.9;font-size:0.9em;position:absolute;bottom:10px;left:26px;)[?{할말|}](#" style="display:inline-block;vertical-align:bottom;border-radius:5px;padding:5px;box-shadow:1px 1px 1px 1px;line-height:1.4;margin-left: 20px;)

[?{할말|}](#" style="border-radius:15px 15px 15px 0;border:3px solid #FFAD5B;text-decoration:none;padding:0.5em 0.6em;color:#FF8000;line-height:25px)

[?{할말|}](#" style="border-radius:5em;padding:0.6em 1em;text-decoration:none;background:#F9F9F9;line-height:30px;box-shadow:1px 2px 10px rgba(0,0,0,0.2)

[?{할말|}](#" style="border-radius: 15px 15px 15px 0;padding:0.6em 1em;text-decoration:none;background:#F9F9F9;line-height:30px;box-shadow:1px 2px 10px rgba(0,0,0,0.2)

[?{할말|}](#" style="border-radius: 15px 15px 15px 0;border-bottom:5px solid #B9C4C4;padding:0.5em;background:#CEDADA;line-height:30px;text-decoration:none;)

[?{할말|}](#" style="position: relative;background:#ffffff;border-radius:.4em;padding:10px;user-select:none;display:block;line-height:20px;text-decoration:none;) [ ](#" style="content:'';position:absolute;border:12px solid transparent;border-right-color:#ffffff;border-left:0;border-bottom:0;margin-top:-25px;margin-left:-10px;text-decoration:none;)

테두리 및 칸

[?{ 할말|}](#" style="border:1px solid black;border-radius:5px;padding:5px;box-shadow:1px 1px 1px 1px grey;line-height:15px;display:inline-block;text-decoration:none;)

[?{ 할말|}](#" style="border:1px solid black;padding:2px;line-height:30px;text-decoration:none;)

점선으로 바꾸고 싶다면 solid → dashed

[?{할말|}](#" style="border:3px double #000000;padding:2px;line-height:30px;text-decoration:none;)

[?{ 할말|}](#" style="border-right:#ff0000 1px solid;border-left:#00ff00 1px solid;border-top:#ffff00 1px solid;border-bottom:#0000ff 1px solid;text-decoration:none;)

[?{할말|}](#" style="background: #F9F7F6;border-left:0.5em solid #cf0000;padding:0.5em;text-decoration:none;)

[?{할말|}](#" style="border-radius:0 15px 15px 0;border-left:inset;padding:0.6em;background:#EBEEF0;line-height:25px;text-decoration:none;)

[?{할말|}](#" style="color: #ffffff;font-size:15px;font-weight:bold;background-color:?{색상|레드,#cf0000|블랙,#000000};margin:1px;text-align:center;user-select:none;display:block;padding:5px;text-decoration:none;)

혹시 글색도 바꾸고 싶으신가요..

[?{할말|}](#" style="color:?{글자색|
흰색,#ffffff|
검은색,#00000};font-size:15px;font-weight:bold;background-color:?{배경색|
레드,#cf0000|
블랙,#000000|
화이트,#ffffff};margin:1px;text-align:center;user-select:none;display:block;padding:5px;text-decoration:none;)

[내용](#" style="color:#000; text-align:center;border-right:#000 1px solid;border-left:#000 1px solid;border-top:#000 1px solid;border-bottom:#fff 1px solid;border-radius:10px 10px 0px 0px;padding:5px;display:block;text-decoration:none;background-color:#fff;)
[내용](#" style="color:#000;text-align:center;border-right:#000 1px solid;border-left:#000 1px solid;border-top:#fff 1px solid;border-bottom:#fff 1px solid;padding:5px;display:block;text-decoration:none;background-color:#fff;)
[내용](#" style="color:#000; text-align:center;border-right:#000 1px solid;border-left:#000 1px solid;border-top:#fff 1px solid;border-bottom:#000 1px solid;border-radius:0px 0px 10px 10px;padding:5px;display:block;text-decoration:none;background-color:#fff;)

엔터 없이 붙여쓰면 떨어지는 공백 없이 딱 붙어 나옵니다.

%게이지 or 체력바

주콰님이 도와주셨습니다.. 당신은 GOD...

?{퍼센트| 100%,[100%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-color:#C9151E| 90%,[90%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image:linear-gradient(45deg,#C9151E 90%,#D1EAFF 90%| 80%,[80%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image:linear-gradient(45deg,#C9151E 80%,#D1EAFF 80%| 70%,[70%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image:linear-gradient(45deg,#C9151E 70%,#D1EAFF 70%| 60%,[60%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image:linear-gradient(45deg,#C9151E 60%,#D1EAFF 60%| 50%,[50%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image:linear-gradient(45deg,#C9151E 50%,#D1EAFF 50%| 40%,[40%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(45deg,#C9151E 40%,#D1EAFF 40%| 30%,[30%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image:linear-gradient(45deg,#C9151E 30%,#D1EAFF 30%| 20%,[20%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image:linear-gradient(45deg,#C9151E 20%,#D1EAFF 20%| 10%,[10%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;text-decoration:none;background-image:linear-gradient(45deg,#C9151E 10%,#D1EAFF 10%| 0%,[0%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-color:#000000})

?{퍼센트| 100%,[100%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-color:#C9151E)| 90%,[90%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image:linear-gradient(to right,#C9151E 90%,#000000 90%)| 80%,[80%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image:linear-gradient(to right,#C9151E 80%,#000000 80%)| 70%,[70%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image:linear-gradient(to right,#C9151E 70%,#000000 70%)| 60%,[60%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image:linear-gradient(to right,#C9151E 60%,#000000 60%)| 50%,[50%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image:linear-gradient(to right,#C9151E 50%,#000000 50%)| 40%,[40%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image:linear-gradient(to right,#C9151E 40%,#000000 40%)| 30%,[30%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image:linear-gradient(to right,#C9151E 30%,#000000 30%)| 20%,[20%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image:linear-gradient(to right,#C9151E 20%,#000000 20%)| 10%,[10%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image:linear-gradient(to right,#C9151E 10%,#000000 10%)| 0%,[0%](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-color:#000000)}

그라데이션

[?{할말|}](#" style="border:1px solid; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(to right, #FFB9B9, #FFFDBB ))

[?{할말|}](#" style="border:1px solid;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image:linear-gradient(135deg,#FFB9B9,#FFD3B6,#FFFDBB,#B4ECB4,#ACE1FF,#F6C3FF ))

[?{할말|}](#" style="border:1px solid;margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image:repeating-linear-gradient(45deg,#ffffff 6%,#ffffff 12%,#C9151E 12%,#C9151E 18%,#000000 18%,#000000 24% ))

[?{할말|}](#" style="color:#ffffff;border:1px solid black;margin:1px;text-align:center;user-select:none;display:block;padding:20px;text-decoration:none;background-image:radial-gradient(circle at 50% 10%,#000 30%,transparent 30%),linear-gradient(to top,#000,#fff ))

배경이미지 넣기.. 넣을 이미지가 없어서

background-image: url('주소')

대충 이거... 하면 어떻게.. 되는 것 같긴해요.. 넣을 게 없네 

타텍님의 은혜

타텍님이 알려주신 갓 사이트 html-css-js.com/css/generator/text-shadow/

[?{할말|}](#" style="color: #000000;font-size:25px;font-weight:bold;display:block;text-align:center;text-decoration:none;text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18; line-height:25px)

[?{할말|}](#" style="color: #e0dfdc;background: #556677;text-align:center; border: 1px solid black; border-radius:5px; padding:10px;text-decoration:none; line-height:25px;letter-spacing: .1em;text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9)

재밌다 재밌어 

여기말고 옆집 피화님네에도 있어요 여기도 구경해보세요 phwatrpg1.postype.com/post/9405822