|
|
| 1번째 줄: |
1번째 줄: |
| <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>으로도 사용할 수 있습니다.
| |
| | |
| 글씨 자체에 그라데이션 효과를 입힐 수 있는 틀입니다.
| |
| | |
| {{폰트|monospace|<nowiki>{{그라데이션 글씨|그라데이션 문법|내용}}</nowiki>}}으로 입력합니다. 그라데이션 문법은 {{폰트|monospace|<nowiki>background: {{{1|}}}</nowiki>}}에 해당하기 때문에 linear-gradient 또는 radial-gradient부터 완전히 입력해야 합니다.
| |
| | |
| == 그라데이션 문법 ==
| |
| 기본적으로 {{폰트|monospace|<nowiki>background: [모양]-gradient([형태], [색깔], [색깔]);</nowiki>}}의 형식으로 이루어집니다.
| |
| | |
| 그라데이션의 모양은 선형 그라데이션인 linear와 원형 그라데이션인 radial이 있습니다. 여기서는 선형 그라데이션에 대해서만 설명합니다.
| |
| | |
| 괄호 안에서 가장 처음 입력하는 값은 <u>각도</u>입니다. 각도 단위인 deg를 이용하여 45deg, 90deg, 135deg 등을 입력할 수도 있고, 혹은 '왼쪽에서 오른쪽'을 뜻하는 to right, '위에서 아래'를 뜻하는 to bottom 등을 입력할 수도 있습니다.
| |
| <div class="mw-customtoggle-deg-exp">'''[ 펼치기 · 접기 ]'''</div>
| |
| <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-deg-exp">
| |
| * 방향
| |
| ** 왼쪽에서 오른쪽: {{폰트|monospace|to right}}
| |
| ** 오른쪽에서 왼쪽: {{폰트|monospace|to left}}
| |
| ** 위에서 아래: {{폰트|monospace|to bottom}}
| |
| ** 아래에서 위: {{폰트|monospace|to top}}
| |
| ** 북동쪽 방향 대각선: {{폰트|monospace|to top right}} 또는 {{폰트|monospace|to right top}}
| |
| ** 동남쪽 방향 대각선: {{폰트|monospace|to bottom right}} 또는 {{폰트|monospace|to right bottom}}
| |
| ** 남서쪽 방향 대각선: {{폰트|monospace|to bottom left}} 또는 {{폰트|monospace|to left bottom}}
| |
| ** 북서쪽 방향 대각선: {{폰트|monospace|to top left}} 또는 {{폰트|monospace|to left top}}
| |
| * 각도
| |
| ** 북쪽 방향: {{폰트|monospace|0deg}}
| |
| ** 북동쪽 방향: {{폰트|monospace|45deg}}
| |
| ** 동쪽 방향: {{폰트|monospace|90deg}}
| |
| ** 남동쪽 방향: {{폰트|monospace|135deg}}
| |
| ** 남쪽 방향: {{폰트|monospace|180deg}}
| |
| ** 남서쪽 방향: {{폰트|monospace|225deg}}
| |
| ** 서쪽 방향: {{폰트|monospace|270deg}}
| |
| ** 북서쪽 방향: {{폰트|monospace|315deg}}</div>
| |
| {{widen}}
| |
| 색깔 입력에는 제한이 없습니다. 몇 개의 색깔을 입력하든 상관 없습니다. 색깔 옆에 한 칸을 띄우고 퍼센티지를 입력하면 색깔이 차지하는 비율을 조정할 수도 있습니다. 예를 들어 괄호 안을 (to right, red 30%, blue 80%)처럼 입력하면, 왼쪽에서 {{color|red|red}}로 시작하고, 30% 지점에서 점점 blue로 바뀌다가, 80% 지점에서 완전히 {{color|blue|blue}}로 바뀌는 그라데이션을 의미합니다.
| |
| | |
| 오른쪽에 입력한 퍼센티지가 왼쪽과 같거나 왼쪽보다 낮을 경우, 그라데이션 효과가 사라지고 왼쪽에 입력한 퍼센티지의 위치에서 두 색에 경계가 생겨 나누어집니다. 백분율 막대 등을 디자인 할 때 활용활 수 있습니다.
| |
| | |
| linear-gradient 앞에 repeating-을 붙이면 반복되는 그라데이션을 만들 수 있습니다.
| |
| | |
| == 사용 예제 ==
| |
| {|class="wikitable"=
| |
| |-
| |
| !입력
| |
| !출력
| |
| |-
| |
| |<nowiki>{{font-gradient|linear-gradient(135deg, red, orange, yellow, green, blue, navy, purple);|'''무지개색 총공격이다!'''}}</nowiki>
| |
| |<center>{{font-gradient|linear-gradient(135deg, red, orange, yellow, green, blue, navy, purple);|'''무지개색 총공격이다!'''}}</center>
| |
| |-
| |
| |<nowiki>[[제이위키|{{div|style="display: inline-block;"|{{font-gradient|linear-gradient(to right, #fb0055, #ff9b00);|'''제이위키'''}}}}]]</nowiki>
| |
| |<center>[[제이위키|{{div|style="display: inline-block;"|{{font-gradient|linear-gradient(to right, #fb0055, #ff9b00);|'''제이위키'''}}}}]]</center>
| |
| |-
| |
| |<nowiki>{{font-gradient|linear-gradient(to right, #373a3c, white);|이 문장은 점점 사라집니다. 안 돼 사라지지 마아아}}</nowiki>
| |
| |{{font-gradient|linear-gradient(to right, #373a3c, white);|이 문장은 점점 사라집니다. 안 돼 사라지지 마아아}}
| |
| |-
| |
| |<nowiki>{{font-gradient|linear-gradient(to right, lime, cyan);|'''이 문장은 연두색에서 청록색으로 바뀌어 갑니다.'''}}</nowiki>
| |
| |{{font-gradient|linear-gradient(to right, lime, cyan);|'''이 문장은 연두색에서 청록색으로 바뀌어 갑니다.'''}}
| |
| |}
| |
| | |
| == 둘러보기 ==
| |
| {{김찬 제작 틀}}
| |
