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

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

분류:

틀:그라데이션 글씨
사용문서	새로고침
넘겨주기	이동하기
2024-12-16에 마지막으로 수정됨

이 틀은 {{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. ]

etc.
틀:,,	틀:--	~~틀:--2~~	틀:^^
틀:?div
A~M
틀:background-image	틀:bg	틀:BMI	틀:center
틀:cursor	틀:DDAY	틀:div	~~틀:ffms~~
틀:font awesome 5	틀:full block	틀:gradient-ex	틀:hex to rgb
틀:invert-img	틀:jp	틀:leet	틀:librecat
틀:list margin remove	틀:MBTI
N~Z
틀:namucat	틀:namulist	틀:namutoc	틀:nowiki
틀:nowiki2	틀:ol	틀:onbold	틀:PC 열람 권장
틀:pf-c	틀:pre	틀:rgb to hex	틀:rotate
틀:selflink	틀:snowfalling	틀:span	틀:style
틀:syntaxhighlight	틀:thumbs	틀:title	틀:tp
틀:tt	틀:u	틀:widen	틀:wingdings

[ ㄱ~ㅅ ]

ㄱ
틀:가로 목록	틀:가로세로비	틀:가로줄	틀:가입일 유저박스
틀:가짜 링크	틀:가짜 문단	틀:강조점	틀:강조점2
틀:갤러리 (김찬)	틀:공백	틀:관련 문서 틀 제목	틀:괄호
틀:광과민성 주의	틀:군대 유저박스 (상세)	틀:굵게	틀:그라데이션 글씨
틀:글리치	틀:글배경	틀:글씨 테두리
ㄴ
틀:나무링크	틀:나무마크 틀	틀:나무위키 둘러보기	틀:나무위키 접기
틀:나무위키 접기2 (제목 / 내용)	틀:나무위키 테이블	틀:나무위키 텍스트 크기	틀:나무위키 틀 접기 (애니메이션)
틀:나무위키 틀 접기 끝	틀:나무위키식 문서 상태 틀	틀:내비게이션 바 색상	~~틀:너비맞춤~~
틀:넘겨주기	틀:넘겨주기 안내	틀:네온 글씨
ㄷ
~~틀:다크모드~~	틀:대화담벼락	틀:댓글 금지	틀:둥근 이미지
틀:등급 유저박스
ㄹ
틀:루비 문자
ㅁ
틀:막대 그래프	틀:말풍선	틀:말풍선 각주 (버튼 / 내용 / 시작 / 끝)	틀:메타 분류
틀:메타 틀	틀:명도	틀:모바일 테이블 (/tag)	틀:모바일 테이블 끝 (/tag)
~~틀:목차제거~~	틀:문단	틀:문단접기	틀:문단접기2
틀:문단접기3	틀:문서 가져옴	틀:문서 보충	틀:미공개
틀:미디어위키 접기 V2	틀:밑줄 없는 링크
ㅂ
틀:반복	틀:반응형 style	틀:반전	틀:반전2
틀:배경색 명도 조절	틀:백분율	틀:버튼	틀:별점
틀:복사방지	틀:부계정 유저박스	~~틀:분류 바로가기~~	~~틀:분류앵커~~
틀:불법2	틀:블러2	틀:블러3	틀:블러4
틀:블링크	틀:비공식 설정	틀:빈 이미지
ㅅ
틀:사건사고	틀:산문적 문서	틀:상징색	~~틀:색상 수평줄~~
틀:성적 요소	틀:세계관 무관	틀:세계관 별점	틀:소설 (시작 / 끝 / 버튼 / 클립보드)
틀:소셜 프로필	틀:소속단체 유저박스	틀:수평줄 꾸미기	틀:순차형3
틀:스포일러 강조	틀:실루엣	틀:씹덕주의

[ ㅇ~ㅎ ]

ㅇ
틀:안내문	틀:알림창	틀:오류창	틀:외부 라이선스
틀:외부링크숨김	틀:원형 그래프	틀:유저박스 틀	틀:이미지 가림
틀:이미지 넣기 (/tag)	틀:이미지 변화	틀:이미지 여백 제거	틀:인용문D
틀:인용문N → 틀:인용문1	틀:인용문SCP	틀:인용문W
ㅈ
틀:접기변화	틀:조사	틀:주의 가림막	틀:줄바꿈
ㅊ
틀:체크리스트
ㅋ
틀:커스텀 목록	틀:코드 예제	틀:코드 예제 끝
ㅌ
틀:테두리 그라데이션	틀:텍스트 가림	틀:툴팁	틀:툴팁2
틀:틀 도움
ㅍ
틀:파일	틀:팬그램	틀:펼치기 접기/multi (제목 / 내용)	틀:폰트
틀:폴리비오스 암호	틀:표 안의 표
ㅎ
틀:하위 문서3	틀:하이라이트	틀:혐오적 요소	틀:호감도
틀:흑백

※ 더 이상 사용하지 않거나 사용할 필요가 없는 경우 취소선 처리
※ 일부 극히 단순한 틀은 본 틀 목록에 미포함

이 문서의 내용 중 전체 또는 일부는 틀:그라데이션 글씨/설명문서 문서의 336557판에서 가져왔습니다. 문서 역사 보러가기

@@ 1번째 줄: / 1번째 줄: @@
+{{namucat|김찬/제작한 틀|문법 편의 틀}}
+{{틀 도움}}
+{{넘겨주기|틀=.|font-gradient}}
 <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부터 완전히 입력해야 합니다.
+{{tt|<nowiki>{{그라데이션 글씨|그라데이션 문법|내용}}</nowiki>}}으로 입력합니다. 그라데이션 문법은 {{tt|<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"=
+{|{{style|class=wiki}}
 |-
 !입력
@@ 51번째 줄: / 18번째 줄: @@
 |<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>
+|<nowiki>[[제이위키|{{font-gradient|linear-gradient(to right, #fb0055, #ff9b00);|'''제이위키'''}}]]</nowiki>
-|<center>[[제이위키|{{div|style="display: inline-block;"|{{font-gradient|linear-gradient(to right, #fb0055, #ff9b00);|'''제이위키'''}}}}]]</center>
+|<center>[[제이위키|{{font-gradient|linear-gradient(to right, #fb0055, #ff9b00);|'''제이위키'''}}]]</center>
 |-
-|<nowiki>{{font-gradient|linear-gradient(to right, #373a3c, white);|이 문장은 점점 사라집니다. 안 돼 사라지지 마아아}}</nowiki>
+|<nowiki>{{font-gradient|linear-gradient(to right, var(--namu--text), transparent);|이 문장은 점점 사라집니다. 안 돼 사라지지 마아아}}</nowiki>
-|{{font-gradient|linear-gradient(to right, #373a3c, white);|이 문장은 점점 사라집니다. 안 돼 사라지지 마아아}}
+|{{font-gradient|linear-gradient(to right, var(--namu--text), transparent);|이 문장은 점점 사라집니다. 안 돼 사라지지 마아아}}
 |-
 |<nowiki>{{font-gradient|linear-gradient(to right, lime, cyan);|'''이 문장은 연두색에서 청록색으로 바뀌어 갑니다.'''}}</nowiki>
@@ 63번째 줄: / 30번째 줄: @@
 == 둘러보기 ==
 {{김찬 제작 틀}}
+{{문서 가져옴|틀:그라데이션 글씨/설명문서|336557}}