틀:Gradient-ex

시각위키텍스트

2024년 6월 17일 (월) 22:07 판 (원본 보기) Kimchan (토론 | 기여) (새 문서: {{namucat|김찬/제작한 틀}} {{틀 도움}} <onlyinclude>{{#switch:{{{1|}}}<!-- 2022 연말시리즈 -->|2022 year end = linear-gradient(172deg, #be2537 5%, #f03a43 40%, #f47b5d 73%, #fac78c 75%)<!-- 2023 연말시리즈 -->|2023 year end = linear-gradient(60deg, #ff9b00 16%, #fb0055 16%, #fb0055 22%, #fb0055 22%, #fb0055 25%, #880e4f 25%, #880e4f 50%, transparent 50%), linear-gradient(120deg, #880e4f 75%, #fb0055 75%, #fb0055 78%, #fb0055 78%, #fb0055 84%, #ff9b00 84%)<!-...)		2025년 1월 19일 (일) 14:33 기준 최신판 (원본 보기) Kimchan (토론 | 기여) 편집 요약 없음
(같은 사용자의 중간 판 11개는 보이지 않습니다)
2번째 줄:		2번째 줄:
	{{틀 도움}}		{{틀 도움}}
	<onlyinclude>{{#switch:{{{1|}}}<!--		<onlyinclude>{{#switch:{{{1|}}}<!--
			김찬 시그니처
			-->|kimchan = linear-gradient(30deg, #111111 12%, transparent 12.5%, transparent 87%, #111111 87.5%, #111111), linear-gradient( 150deg, #111111 12%, transparent 12.5%, transparent 87%, #111111 87.5%, #111111), linear-gradient(30deg, #111111 12%, transparent 12.5%, transparent 87%, #111111 87.5%, #111111), linear-gradient(150deg, #111111 12%, transparent 12.5%, transparent 87%, #111111 87.5%, #111111), linear-gradient(60deg, #77777777 25%, transparent 25.5%, transparent 75%, #77777777 75%, #77777777), linear-gradient(60deg, #77777777 25%, transparent 25.5%, transparent 75%, #77777777 75%, #77777777); background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; background-color: #000000; background-size: 80px 140px; box-shadow: inset 0 0 100px rgba(255, 215, 0, 0.1);<!--
	2022 연말시리즈		2022 연말시리즈
8번째 줄:		11번째 줄:
	2023 연말시리즈		2023 연말시리즈
	-->|2023 year end = linear-gradient(60deg, #ff9b00 16%, #fb0055 16%, #fb0055 22%, #fb0055 22%, #fb0055 25%, #880e4f 25%, #880e4f 50%, transparent 50%), linear-gradient(120deg, #880e4f 75%, #fb0055 75%, #fb0055 78%, #fb0055 78%, #fb0055 84%, #ff9b00 84%)<!--		-->|2023 year end = linear-gradient(60deg, #ff9b00 16%, #fb0055 16%, #fb0055 22%, #fb0055 22%, #fb0055 25%, #880e4f 25%, #880e4f 50%, transparent 50%), linear-gradient(120deg, #880e4f 75%, #fb0055 75%, #fb0055 78%, #fb0055 78%, #fb0055 84%, #ff9b00 84%)<!--
			2024 연말시리즈
			-->|2024 year end = radial-gradient(circle at 50% -200%, #ef404a 50%, transparent 80%), linear-gradient(to bottom, #ef404a, #7256a4)<!--
	투명 배경		투명 배경
	-->|transparent = background-color: white; background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;<!--		-->|transparent = linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%), linear-gradient(white, white); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;<!--
	심플 태극기 (나무위키 대문기념일/2022 삼일절)		심플 태극기 (나무위키 대문기념일/2022 삼일절)
26번째 줄:		32번째 줄:
	여름 하늘 (나무위키 대문기념일/2024 어린이날)		여름 하늘 (나무위키 대문기념일/2024 어린이날)
	-->|summer sky = radial-gradient(circle at 85% 25%, #fff 0px, #fff 15px, rgba(0, 0, 0, 0) 35px), radial-gradient(circle at 72% 83%, #C5E1FC 0px, #C5E1FC 0.8px, rgba(0, 0, 0, 0) 2.8px), radial-gradient(circle at 71.5% 86%, #AED5FA 0px, #AED5FA 5.5px, rgba(0, 0, 0, 0) 7.5px), radial-gradient(circle at 69.8% 94%, #AED5FA 0px, #AED5FA 1px, rgba(0, 0, 0, 0) 3px), radial-gradient(circle at 69.5% 95%, #C7E2FC 0px, #C7E2FC 1px, rgba(0, 0, 0, 0) 3px), radial-gradient(circle at 68% 100%, #A6D1FB 0px, #A6D1FB 3px, rgba(0, 0, 0, 0) 5px), radial-gradient(circle at 77% 61%, #A8D2FB 0px, #A8D2FB 1px, rgba(0, 0, 0, 0) 3px), radial-gradient(circle at 75.5% 68%, #DCE9F4 0px, #DCE9F4 4px, rgba(0, 0, 0, 0) 6px), radial-gradient(circle at 75.2% 70%, #ABD2F4 0px, #ABD2F4 8px, rgba(0, 0, 0, 0) 10px), radial-gradient(circle at 72% 83%, #BFDEFC 0px, #BFDEFC 3px, rgba(0, 0, 0, 0) 5px), radial-gradient(circle at 82.5% 36.5%, #C5E0F9 0px, #C5E0F9 2.5px, rgba(0, 0, 0, 0) 4.5px), radial-gradient(circle at 81% 44%, #6BB4FA 0px, #6BB4FA 2.5px, rgba(0, 0, 0, 0) 4.5px), radial-gradient(circle at 80% 48%, #BFDEFD 0px, #BFDEFD 2.5px, rgba(0, 0, 0, 0) 4.5px), radial-gradient(circle at 77.5% 60%, #4EA5F8 0px, #4EA5F8 2px, rgba(0, 0, 0, 0) 4px), radial-gradient(circle at 77.5% 60%, #B4D8FC 0px, #B4D8FC 3px, rgba(0, 0, 0, 0) 5px), radial-gradient(circle at 74.6% 73.5%, #81BDF4 10px, #81BDF4 15px, rgba(0, 0, 0, 0) 17px), radial-gradient(circle at 68% 99%, #81BDF4 7px, #81BDF4 12px, rgba(0, 0, 0, 0) 14px), radial-gradient(circle at 85% 25%, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 70px, rgba(0, 0, 0, 0) 80px), linear-gradient(to top, #81BDF4, #0080FF)<!--		-->|summer sky = radial-gradient(circle at 85% 25%, #fff 0px, #fff 15px, rgba(0, 0, 0, 0) 35px), radial-gradient(circle at 72% 83%, #C5E1FC 0px, #C5E1FC 0.8px, rgba(0, 0, 0, 0) 2.8px), radial-gradient(circle at 71.5% 86%, #AED5FA 0px, #AED5FA 5.5px, rgba(0, 0, 0, 0) 7.5px), radial-gradient(circle at 69.8% 94%, #AED5FA 0px, #AED5FA 1px, rgba(0, 0, 0, 0) 3px), radial-gradient(circle at 69.5% 95%, #C7E2FC 0px, #C7E2FC 1px, rgba(0, 0, 0, 0) 3px), radial-gradient(circle at 68% 100%, #A6D1FB 0px, #A6D1FB 3px, rgba(0, 0, 0, 0) 5px), radial-gradient(circle at 77% 61%, #A8D2FB 0px, #A8D2FB 1px, rgba(0, 0, 0, 0) 3px), radial-gradient(circle at 75.5% 68%, #DCE9F4 0px, #DCE9F4 4px, rgba(0, 0, 0, 0) 6px), radial-gradient(circle at 75.2% 70%, #ABD2F4 0px, #ABD2F4 8px, rgba(0, 0, 0, 0) 10px), radial-gradient(circle at 72% 83%, #BFDEFC 0px, #BFDEFC 3px, rgba(0, 0, 0, 0) 5px), radial-gradient(circle at 82.5% 36.5%, #C5E0F9 0px, #C5E0F9 2.5px, rgba(0, 0, 0, 0) 4.5px), radial-gradient(circle at 81% 44%, #6BB4FA 0px, #6BB4FA 2.5px, rgba(0, 0, 0, 0) 4.5px), radial-gradient(circle at 80% 48%, #BFDEFD 0px, #BFDEFD 2.5px, rgba(0, 0, 0, 0) 4.5px), radial-gradient(circle at 77.5% 60%, #4EA5F8 0px, #4EA5F8 2px, rgba(0, 0, 0, 0) 4px), radial-gradient(circle at 77.5% 60%, #B4D8FC 0px, #B4D8FC 3px, rgba(0, 0, 0, 0) 5px), radial-gradient(circle at 74.6% 73.5%, #81BDF4 10px, #81BDF4 15px, rgba(0, 0, 0, 0) 17px), radial-gradient(circle at 68% 99%, #81BDF4 7px, #81BDF4 12px, rgba(0, 0, 0, 0) 14px), radial-gradient(circle at 85% 25%, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 70px, rgba(0, 0, 0, 0) 80px), linear-gradient(to top, #81BDF4, #0080FF)<!--
			스즈메의 문단속 (나무위키 스즈메의 문단속 문서)
			-->|suzume = repeating-linear-gradient(190deg, rgba(153, 204, 255, 0.5) 40px, rgba(41, 163, 163, 0.5) 80px, rgba(153, 204, 255, 0.5) 160px, 120px, rgba(153, 204, 255, 0.5) 160px, rgba(92, 214, 214, 0.5) 200px, rgba(92, 214, 214, 0.5) 240px, rgba(153, 204, 255, 0.5) 280px, rgba(153, 204, 255, 0.5) 300px), repeating-linear-gradient(-190deg, rgba(41, 163, 163, 0.5) 30px, rgba(102, 153, 255, 0.5) 60px, rgba(41, 163, 163, 0.5) 90px, rgba(92, 214, 214, 0.5) 120px, rgba(92, 214, 214, 0.5) 150px, rgba(102, 153, 255, 0.5) 180px, rgba(153, 204, 255, 0.5) 210px, rgba(41, 163, 163, 0.5) 3230px)<!--
			크리스마스 무늬
			-->|christmas = conic-gradient(from 140deg at 50% 87.5%, #0000, #fff 1deg 79deg, #0000 81deg) 0 calc(40px / -4), conic-gradient(from 140deg at 50% 87.5%, #0000, #fff 1deg 79deg, #0000 81deg) 40px calc(3 * 40px / 4), conic-gradient(from 140deg at 50% 81.25%, #0000, #fff 1deg 79deg, #0000 81deg), conic-gradient(from 140deg at 50% 81.25%, #0000, #fff 1deg 79deg, #0000 81deg) 40px 40px, conic-gradient(from 140deg at 50% 75%, #0000, #fff 1deg 79deg, #0000 81deg) 0 calc(40px / 4), conic-gradient(from 140deg at 50% 75%, #0000, #fff 1deg 79deg, #0000 81deg) 40px calc(5 * 40px / 4), conic-gradient(at 10% 20%, #0000 75%, #fff 0) calc(40px / -10) 40px, conic-gradient(at 10% 20%, #0000 75%, #fff 0) calc(9 * 40px / 10) calc(2 * 40px), repeating-conic-gradient(from 45deg, #a31e39 0 25%, #31570e 0 50%); background-size: calc(2 * 40px) calc(2 * 40px);<!--
			달 뜬 숲 (나무위키 대문기념일/2024 추석)
			-->|moon-forest = linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 15%), conic-gradient(from 135deg at 14% 70%, #A69ACA, #5A5374 30deg, #474973 30deg, #2A2B48 90deg, transparent 90deg), conic-gradient(from 145deg at 30% 70%, #2A2B48, #474973 30deg, #5A5374 30deg, #A69ACA 70deg, transparent 70deg), conic-gradient(from 135deg at 35% 70%, #2A2B48, #474973 30deg, #5A5374 30deg, #A69ACA 90deg, transparent 90deg), conic-gradient(from 145deg at 60% 70%, #2A2B48, #474973 30deg, #5A5374 30deg, #A69ACA 70deg, transparent 70deg), conic-gradient(from 135deg at 80% 70%, #2A2B48, #474973 30deg, #5A5374 30deg, #A69ACA 90deg, transparent 90deg), conic-gradient(from 145deg at 90% 70%, #2A2B48, #474973 30deg, #5A5374 30deg, #A69ACA 70deg, transparent 70deg), conic-gradient(from 135deg at 5% 50%, #5A5374, #161B33 30deg, #161B33 30deg, #0D0C1D 90deg, transparent 90deg), conic-gradient(from 135deg at 20% 50%, #5A5374, #161B33 30deg, #161B33 30deg, #0D0C1D 90deg, transparent 90deg), conic-gradient(from 135deg at 45% 50%, #161B33, #161B33 30deg, #161B33 30deg, #5A5374 90deg, transparent 90deg), conic-gradient(from 135deg at 70% 50%, #161B33, #161B33 30deg, #161B33 30deg, #5A5374 90deg, transparent 90deg), conic-gradient(from 135deg at 75% 50%, #161B33, #161B33 30deg, #161B33 30deg, #5A5374 90deg, transparent 90deg), conic-gradient(from 120deg at 2% 40%, #2A2B48, #0D0C1D 30deg, #0D0C1D 30deg, #0D0C1D 120deg, transparent 120deg), conic-gradient(from 135deg at 12% 30%, #2A2B48, #0D0C1D 30deg, #0D0C1D 30deg, #0D0C1D 90deg, transparent 90deg), conic-gradient(from 120deg at 32% 40%, #0D0C1D, #0D0C1D 30deg, #0D0C1D 30deg, #2A2B48 120deg, transparent 120deg), conic-gradient(from 135deg at 47% 40%, #0D0C1D, #0D0C1D 30deg, #0D0C1D 30deg, #2A2B48 90deg, transparent 90deg), conic-gradient(from 135deg at 55% 40%, #0D0C1D, #0D0C1D 30deg, #0D0C1D 30deg, #2A2B48 90deg, transparent 90deg), conic-gradient(from 135deg at 65% 30%, #0D0C1D, #0D0C1D 30deg, #0D0C1D 30deg, #2A2B48 90deg, transparent 90deg), conic-gradient(from 120deg at 85% 40%, #0D0C1D, #0D0C1D 30deg, #0D0C1D 30deg, #2A2B48 120deg, transparent 120deg), conic-gradient(from 135deg at 93% 30%, #0D0C1D, #0D0C1D 30deg, #0D0C1D 30deg, #2A2B48 90deg, transparent 90deg), radial-gradient(circle at 21% 50%, #F1DAC4 45px, #F1DAC4 45px, transparent 50px), linear-gradient(0deg, #007, #000)<!--
			브롤스타즈 맥시멈 티어
			-->|brawl max tier = conic-gradient(#c170ff 12.5%, #864bf7 12.5%, #864bf7 25%,  #ef18e5 25%, #ef18e5 37.5%, #ff61ff 37.5%, #ff61ff 50%, #ff5b00 50%, #ff5b00 62.5%, #ff8c52 62.5%, #ff8c52 75%, #00dbf2 75%, #00dbf2 87.5%, #60f7ff 87.5%)<!--
	-->}}</onlyinclude>		-->}}</onlyinclude>
33번째 줄:		51번째 줄:
	|-		|-
	!문법||결과		!문법||결과
			|-
			|<pre style="user-select: all;">{{gradient-ex|kimchan}}</pre>
			|{{style|bg={{gradient-ex|kimchan}}}}|
	|-		|-
	|<pre style="user-select: all;">{{gradient-ex|2022 year end}}</pre>		|<pre style="user-select: all;">{{gradient-ex|2022 year end}}</pre>
39번째 줄:		60번째 줄:
	|<pre style="user-select: all;">{{gradient-ex|2023 year end}}</pre>		|<pre style="user-select: all;">{{gradient-ex|2023 year end}}</pre>
	|{{style|bg={{gradient-ex|2023 year end}}}}|		|{{style|bg={{gradient-ex|2023 year end}}}}|
			|-
			|<pre style="user-select: all;">{{gradient-ex|2024 year end}}</pre>
			|{{style|bg={{gradient-ex|2024 year end}}}}|
	|-		|-
	|<pre style="user-select: all;">{{gradient-ex|transparent}}</pre>		|<pre style="user-select: all;">{{gradient-ex|transparent}}</pre>
57번째 줄:		81번째 줄:
	|<pre style="user-select: all;">{{gradient-ex|summer sky}}</pre>		|<pre style="user-select: all;">{{gradient-ex|summer sky}}</pre>
	|{{style|bg={{gradient-ex|summer sky}}}}|		|{{style|bg={{gradient-ex|summer sky}}}}|
			|-
			|<pre style="user-select: all;">{{gradient-ex|suzume}}</pre>
			|{{style|bg={{gradient-ex|suzume}}}}|
			|-
			|<pre style="user-select: all;">{{gradient-ex|christmas}}</pre>
			|{{style|bg={{gradient-ex|christmas}}}}|
			|-
			|<pre style="user-select: all;">{{gradient-ex|moon-forest}}</pre>
			|{{style|bg={{gradient-ex|moon-forest}}}}|
			|-
			|<pre style="user-select: all;">{{gradient-ex|brawl max tier}}</pre>
			|{{style|bg={{gradient-ex|brawl max tier}}}}|
	|}		|}
			{{김찬 제작 틀}}

---

2025년 1월 19일 (일) 14:33 기준 최신판

분류:

김찬/제작한 틀

틀:gradient-ex
사용문서
넘겨주기	이동하기
2025-01-19에 마지막으로 수정됨

---

몇 가지 배경 그라데이션 예제를 담은 틀입니다. style="" 내의 background: 여기;에 입력해야 합니다. 예제로 사용할 수 있는 목록은 다음과 같습니다.

문법	결과
{{gradient-ex|kimchan}}
{{gradient-ex|2022 year end}}
{{gradient-ex|2023 year end}}
{{gradient-ex|2024 year end}}
{{gradient-ex|transparent}}
{{gradient-ex|kr flag simple}}
{{gradient-ex|kr yinyang}}
{{gradient-ex|midnight full moon}}
{{gradient-ex|new year dawn}}
{{gradient-ex|summer sky}}
{{gradient-ex|suzume}}
{{gradient-ex|christmas}}
{{gradient-ex|moon-forest}}
{{gradient-ex|brawl max tier}}

+ 김찬 제작 틀
[ 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 틀:하이라이트 틀:혐오적 요소 틀:호감도 틀:흑백
※ 더 이상 사용하지 않거나 사용할 필요가 없는 경우 취소선 처리 ※ 일부 극히 단순한 틀은 본 틀 목록에 미포함