티스토리 본문 작성 스타일 제목구분 서식모음 # 5

티스토리 본문 제목 서식 # 5

제목구분 서식모음을 많은 분들이 좋아해 주셔서 벌써 5번째 공개입니다.

이번에도 좋은 정보였다면 공감버튼 눌러주시는 거 아시죠!?

글자 그라데이션 스타일

<h3 style="background: linear-gradient(to right, #5673bd, #ffa7a3, #A7A3FF, #671cc4, #5673bd, #ffa7a3, #A7A3FF, #671cc4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold;" data-ke-size="size23">글자 그라데이션 스타일</h3>
<p data-ke-size="size16">&nbsp;</p>

배경색 그라데이션

<h3 data-ke-size="size23"><span style="background: linear-gradient(to right, #f54f3d, #8568e1); color: #fff; font-weight: bold; padding: 15px 23px 15px 20px; border-radius: 0px 0px 0px 0px;">배경색 그라데이션</span></h3>
<p data-ke-size="size16">&nbsp;</p>

배경색 세로 그라데이션

<h3 data-ke-size="size23"><span style="background: linear-gradient(#f54f3d, #8568e1); color: #fff; font-weight: bold; padding: 15px 23px 15px 20px; border-radius: 0px 0px 0px 0px;">배경색 세로 그라데이션</span></h3>
<p data-ke-size="size16">&nbsp;</p>

소제목입니다.

<h3 data-ke-size="size23"><span style="border-radius: 0px 20px 20px 0px; padding: 0.5em 1em 0.5em 0.5em; background: #fdf2f1; border-left: 10px solid #f54f3d; margin: 0.5em 0em; color: #f54f3d; font-weight: bold;">소제목입니다.</span></h3>
<p data-ke-size="size16">&nbsp;</p>

소제목 스타일

<h3 style="display: inline-block; padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; color: #8568e1; border-left: 10px solid #8568e1; background-color: #f2f2f2; border-radius: 0px 20px 20px 0px; font-weight: bold;" data-ke-size="size23">소제목 B스타일</h3>
<p data-ke-size="size16">&nbsp;</p>

말풍선 테두리

<h3 style="display: inline-block; border-radius: 15px 15px 15px 0; border: 3px solid #FFAD5B; padding: 0.5em 1em 0.5em 0.8em; color: #ff8000; font-weight: bold;" data-ke-size="size23">말풍선 테두리</h3>
<p data-ke-size="size16">&nbsp;</p>

말풍선 테두리 2

<h3 style="display: inline-block; border-radius: 15px 15px 15px 0; border: 3px solid #846add; padding: 0.5em 1em 0.5em 0.8em; color: #846add; font-weight: bold;" data-ke-size="size23">말풍선 테두리</h3>
<p data-ke-size="size16">&nbsp;</p>

box-shadow 말풍선 테두리

<h3 style="display: inline-block; border-radius: 15px 15px 15px 0; padding: 0.5em 1em 0.5em 0.8em; border: 1px solid #00AFAE; background: #D8FFFF; box-shadow: 2px 2px 2px 0px #00AFAE; color: #00afae; font-weight: bold;" data-ke-size="size23">box-shadow 말풍선 테두리</h3>
<p data-ke-size="size16">&nbsp;</p>

box-shadow 말풍선 테두리 2

<h3 style="display: inline-block; border-radius: 15px 15px 15px 0; padding: 0.5em 1em 0.5em 0.8em; border: 2px solid #FF9800; box-shadow: 2px 3px 3px 0px #FF9800; color: #000000; font-weight: bold;" data-ke-size="size23">box-shadow 말풍선 테두리</h3>
<p data-ke-size="size16">&nbsp;</p>

깔끔한 인텍스 스타일

<h3 data-ke-size="size23"><span style="border-radius: 15px 15px 0 0; border-bottom: 5px solid #B2E0F7; padding: 0.5em 1em; background: #D8EFFB; font-weight: bold;">깔끔한 인텍스 스타일</span></h3>
<p data-ke-size="size16">&nbsp;</p>

버튼 스타일

<h3 data-ke-size="size23"><span style="border-radius: 5em; padding: 0.5em 1em; background: #F2F2F2; box-shadow: 0.2em 0.15em 0.3em #999; margin-left: 5px; font-weight: bold;">버튼 스타일</span></h3>
<p data-ke-size="size16">&nbsp;</p>

버튼 스타일 2

<h3 data-ke-size="size23"><span style="border-radius: 1em; padding: 0.6em 1em; background: linear-gradient(#b0dc8e 0%, #b0dc8e 50%, #209f8b 50%, #209f8b 100%); box-shadow: #999999 0.2em 0.15em 0.3em; margin-left: 5px; font-weight: bold; color: #ffffff;">버튼 스타일</span></h3>
<p data-ke-size="size16">&nbsp;</p>

마음에 드시는 스타일을 찾으셨나요?
만약에 이번에 없으셨다면, 다음에는
마음에 드는 서식을 가지고 오도록 하겠습니다.
그럼 오늘 좋은 시간 되시기 바랍니다.