편집 요약 없음 |
편집 요약 없음 |
||
(같은 사용자의 중간 판 8개는 보이지 않습니다) | |||
1번째 줄: | 1번째 줄: | ||
{{namucat|김찬/제작한 틀}} | {{namucat|김찬/제작한 틀|틀 스타일을 사용하는 틀}} | ||
{{틀 도움 | {{틀 도움 | ||
| | |날짜1=2023.04.24|업데이트1=변수로 흐림의 단계를 정할 수 있는 기능 추가}} | ||
{{관련 문서2|틀:블러|틀:블러2|틀:블러3}} | {{관련 문서2|틀:블러|틀:블러2|틀:블러3}} | ||
<onlyinclude>{{css|블러4}}<span class=" | <onlyinclude>{{css|블러4}}<span class="blur-template-{{#if:{{{단계|}}}|{{#switch:{{{단계|}}}|1=1|3=3|4=4|2}}|{{#switch:{{{degree|}}}|1=1|3=3|4=4|2}}}}">{{{1}}}</span></onlyinclude> | ||
글자를 번지게 하는 틀입니다. [[틀:블러]]처럼 마우스를 올리기만 해도 내용을 볼 수 있지만 기존과 달리 '''텍스트 레이아웃이 깨지지 않습니다.''' | 글자를 번지게 하는 틀입니다. [[틀:블러]]처럼 마우스를 올리기만 해도 내용을 볼 수 있지만 기존과 달리 '''텍스트 레이아웃이 깨지지 않습니다.''' | ||
10번째 줄: | 10번째 줄: | ||
또한 CSS의 filter 속성을 사용하기 때문에 이미지 등 텍스트 외 다른 요소들도 흐릿하게 할 수 있습니다. | 또한 CSS의 filter 속성을 사용하기 때문에 이미지 등 텍스트 외 다른 요소들도 흐릿하게 할 수 있습니다. | ||
degree 변수에 1부터 4의 정수를 넣어 번짐의 정도를 조절할 수 있습니다. 기본값은 2입니다. | 단계 또는 degree 변수에 1부터 4의 정수를 넣어 번짐의 정도를 조절할 수 있습니다. 기본값은 2입니다. | ||
{{MT}} | 어떤 조건이나 환경에서는 모바일에서 블러가 적용되지 않는 현상이 있습니다. 원리도 해결 방법도 아직까지 알 수 없습니다. | ||
{{MT|text=center}} | |||
|- | |- | ||
!변수||블러 값||예시 | !변수||블러 값||예시 | ||
|- | |- | ||
|1||2px||{{블러4| | |1||2px||{{블러4|단계=1|블러}} | ||
|- | |- | ||
| | |{{ruby|2|기본}}||4px||{{블러4|블러}} | ||
|- | |- | ||
| | |3||6px||{{블러4|단계=3|블러}} | ||
|- | |- | ||
| | |4||8px||{{블러4|단계=4|블러}} | ||
{{MT끝}} | {{MT끝}} | ||
32번째 줄: | 34번째 줄: | ||
|{{블러4|마우스를 올려 보세요}} | |{{블러4|마우스를 올려 보세요}} | ||
|- | |- | ||
|<pre>{{블러4| | |<pre>{{블러4|단계=4|마우스를 올려 보세요}}</pre> | ||
|{{블러4| | |{{블러4|단계=4|마우스를 올려 보세요}} | ||
|- | |- | ||
|<pre>{{블러4|[[파일:KimChan.jpg|link=]]}}</pre> | |<pre>{{블러4|[[파일:KimChan.jpg|link=]]}}</pre> | ||
|{{블러4|[[파일:KimChan.jpg|link=]]}} | |{{블러4|[[파일:KimChan.jpg|link=]]}} | ||
|- | |- | ||
|<pre>{{블러4| | |<pre>{{블러4|단계=4|[[파일:KimChan.jpg|link=]]}}</pre> | ||
|{{블러4| | |{{블러4|단계=4|[[파일:KimChan.jpg|link=]]}} | ||
{{MT끝}} | {{MT끝}} | ||
2023년 5월 25일 (목) 10:38 기준 최신판
틀:블러4 | |
---|---|
사용문서
|
|
넘겨주기
|
이동하기
|
[ 주요 업데이트 노트 ]
|
{{{1}}}
글자를 번지게 하는 틀입니다. 틀:블러처럼 마우스를 올리기만 해도 내용을 볼 수 있지만 기존과 달리 텍스트 레이아웃이 깨지지 않습니다.
또한 CSS의 filter 속성을 사용하기 때문에 이미지 등 텍스트 외 다른 요소들도 흐릿하게 할 수 있습니다.
단계 또는 degree 변수에 1부터 4의 정수를 넣어 번짐의 정도를 조절할 수 있습니다. 기본값은 2입니다.
어떤 조건이나 환경에서는 모바일에서 블러가 적용되지 않는 현상이 있습니다. 원리도 해결 방법도 아직까지 알 수 없습니다.
변수 | 블러 값 | 예시 |
---|---|---|
1 | 2px | 블러 |
2 | 4px | 블러 |
3 | 6px | 블러 |
4 | 8px | 블러 |
문법 | 결과 |
---|---|
{{블러4|마우스를 올려 보세요}} |
마우스를 올려 보세요 |
{{블러4|단계=4|마우스를 올려 보세요}} |
마우스를 올려 보세요 |
{{블러4|[[파일:KimChan.jpg|link=]]}} |
|
{{블러4|단계=4|[[파일:KimChan.jpg|link=]]}} |
- {{블러4/styles.css}}