틀:그라데이션 글씨: 두 판 사이의 차이

편집 요약 없음
편집 요약 없음
 
1번째 줄: 1번째 줄:
{{namucat|김찬/제작한 틀|문법 편의 틀}}
{{namucat|김찬/제작한 틀|문법 편의 틀}}
{{틀 도움}}
{{틀 도움}}
{{넘겨주기|틀=.|font-gradient}}
<onlyinclude><span style="background: {{{1|}}}; -webkit-background-clip: text; color: transparent;">{{{2|}}}</span></onlyinclude>
<onlyinclude><span style="background: {{{1|}}}; -webkit-background-clip: text; color: transparent;">{{{2|}}}</span></onlyinclude>
{{목차제거}}
{{목차제거}}
== 설명 ==
== 설명 ==
이 틀은 <code><nowiki>{{font-gradient}}</nowiki></code>으로도 사용할 수 있습니다.
글씨 자체에 그라데이션 효과를 입힐 수 있는 틀입니다.
글씨 자체에 그라데이션 효과를 입힐 수 있는 틀입니다.


{{tt|<nowiki>{{그라데이션 글씨|그라데이션 문법|내용}}</nowiki>}}으로 입력합니다. 그라데이션 문법은 {{tt|<nowiki>background: {{{1|}}}</nowiki>}}에 해당하기 때문에 linear-gradient 또는 radial-gradient부터 완전히 입력해야 합니다.
{{tt|<nowiki>{{그라데이션 글씨|그라데이션 문법|내용}}</nowiki>}}으로 입력합니다. 그라데이션 문법은 {{tt|<nowiki>background: {{{1|}}}</nowiki>}}에 해당하기 때문에 linear-gradient 또는 radial-gradient부터 완전히 입력해야 합니다.
== 그라데이션 문법 ==
기본적으로 {{tt|<nowiki>background: [모양]-gradient([형태], [색깔], [색깔]);</nowiki>}}의 형식으로 이루어집니다.
그라데이션의 모양은 선형 그라데이션인 linear와 원형 그라데이션인 radial이 있습니다. 여기서는 선형 그라데이션에 대해서만 설명합니다.
괄호 안에서 가장 처음 입력하는 값은 <u>각도</u>입니다. 각도 단위인 deg를 이용하여 45deg, 90deg, 135deg 등을 입력할 수도 있고, 혹은 '왼쪽에서 오른쪽'을 뜻하는 to right, '위에서 아래'를 뜻하는 to bottom 등을 입력할 수도 있습니다.
{{folding|id=deg-exp|div=off}}
* 방향
** 왼쪽에서 오른쪽: {{tt|to right}}
** 오른쪽에서 왼쪽: {{tt|to left}}
** 위에서 아래: {{tt|to bottom}}
** 아래에서 위: {{tt|to top}}
** 북동쪽 방향 대각선: {{tt|to top right}} 또는 {{tt|to right top}}
** 동남쪽 방향 대각선: {{tt|to bottom right}} 또는 {{tt|to right bottom}}
** 남서쪽 방향 대각선: {{tt|to bottom left}} 또는 {{tt|to left bottom}}
** 북서쪽 방향 대각선: {{tt|to top left}} 또는 {{tt|to left top}}
* 각도
** 북쪽 방향: {{tt|0deg}}
** 북동쪽 방향: {{tt|45deg}}
** 동쪽 방향: {{tt|90deg}}
** 남동쪽 방향: {{tt|135deg}}
** 남쪽 방향: {{tt|180deg}}
** 남서쪽 방향: {{tt|225deg}}
** 서쪽 방향: {{tt|270deg}}
** 북서쪽 방향: {{tt|315deg}}{{folding끝}}
색깔 입력에는 제한이 없습니다. 몇 개의 색깔을 입력하든 상관 없습니다. 색깔 옆에 한 칸을 띄우고 퍼센티지를 입력하면 색깔이 차지하는 비율을 조정할 수도 있습니다. 예를 들어 괄호 안을 (to right, red 30%, blue 80%)처럼 입력하면, 왼쪽에서 {{color|red|red}}로 시작하고, 30% 지점에서 점점 blue로 바뀌다가, 80% 지점에서 완전히 {{color|blue|blue}}로 바뀌는 그라데이션을 의미합니다.
오른쪽에 입력한 퍼센티지가 왼쪽과 같거나 왼쪽보다 낮을 경우, 그라데이션 효과가 사라지고 왼쪽에 입력한 퍼센티지의 위치에서 두 색에 경계가 생겨 나누어집니다. 백분율 막대 등을 디자인 할 때 활용활 수 있습니다.
linear-gradient 앞에 repeating-을 붙이면 반복되는 그라데이션을 만들 수 있습니다.


== 사용 예제 ==
== 사용 예제 ==
{|class="wikitable"=
{|{{style|class=wiki}}
|-
|-
!입력
!입력

2024년 12월 16일 (월) 22:47 기준 최신판

:그라데이션 글씨
사용문서
새로고침
넘겨주기
이동하기

 이 틀은 {{font-gradient}}(으)로도 사용할 수 있습니다.

설명

글씨 자체에 그라데이션 효과를 입힐 수 있는 틀입니다.

{{그라데이션 글씨|그라데이션 문법|내용}}으로 입력합니다. 그라데이션 문법은 background: {{{1|}}}에 해당하기 때문에 linear-gradient 또는 radial-gradient부터 완전히 입력해야 합니다.

사용 예제

입력 출력
{{font-gradient|linear-gradient(135deg, red, orange, yellow, green, blue, navy, purple);|'''무지개색 총공격이다!'''}}
무지개색 총공격이다!
[[제이위키|{{font-gradient|linear-gradient(to right, #fb0055, #ff9b00);|'''제이위키'''}}]]
제이위키
{{font-gradient|linear-gradient(to right, var(--namu--text), transparent);|이 문장은 점점 사라집니다. 안 돼 사라지지 마아아}} 이 문장은 점점 사라집니다. 안 돼 사라지지 마아아
{{font-gradient|linear-gradient(to right, lime, cyan);|'''이 문장은 연두색에서 청록색으로 바뀌어 갑니다.'''}} 이 문장은 연두색에서 청록색으로 바뀌어 갑니다.

둘러보기

+
김찬 제작 틀
[ A~Z & etc. ]
[ ㄱ~ㅅ ]
[ ㅇ~ㅎ ]
※ 더 이상 사용하지 않거나 사용할 필요가 없는 경우 취소선 처리
※ 일부 극히 단순한 틀은 본 틀 목록에 미포함
이 문서의 내용 중 전체 또는 일부는 틀:그라데이션 글씨/설명문서 문서의 336557판에서 가져왔습니다. 문서 역사 보러가기