틀:상자 그림자

틀 설명문서

이 상자 그림자 틀은 글 상자에 그림자를 만들 수 있습니다.

쓰기

{{상자 그림자 | X-차이 | Y-차이 | 흐림 반지름 | #색}}

• X-차이 와 Y-차이 – 가로 세로 그림자 오프셋 크기 (기본은 오른쪽과 아래 쪽으로, 왼쪽과 윗쪽은 음수를 씁니다. 기본값은 4px
• 흐림 반지름 – 블러 효과를 줄 반지름으로 기본값은 4px.
• 색 – 색을 줍니다 기본값은 #CCC;.

보기1

• <div style="background-color: #FFFFDD; border: 1px solid #808000; padding: 5px; {{상자 그림자}}">{{옛한글}}{{훈민정음}}...</div> 로 쓰면 다음과 같이 보입니다.

나라 말이 중국과 달라 문자가 서로 맞지 않으니 이런 까닭으로 어리석은 백성이 말하고자 할 바가 있어도 마침내 제 뜻을 펴지 못하는 사람이 많으니라. 내 이를 위하여 딱히 여겨 새로 스물여덟 자를 만드노니 사람마다 하여 쉬이 익혀 날로 쓰기 편안케 하고자 할 따름이니라.

나랏말ᄊᆞ미 中듀ᇰ國귁에 달아 文문字ᄍᆞᆼ와로 서르 ᄉᆞᄆᆞᆺ디 아니ᄒᆞᆯᄊᆡ 이런 젼ᄎᆞ로 어린百ᄇᆡᆨ姓셔ᇰ이 니르고져 호ᇙ 배 이셔도 ᄆᆞᄎᆞᆷ내 제 ᄠᅳ들 시러 펴디 몯ᄒᆞᇙ 노미 하니라 내 이ᄅᆞᆯ 爲윙ᄒᆞ야 어엿비 너겨 새로 스믈여듧 字ᄍᆞᆼᄅᆞᆯ ᄆᆡᇰᄀᆞ노니 사ᄅᆞᆷ마다 ᄒᆡᅇᅧ 수ᄫᅵ 니겨 날로 ᄡᅮ메 便뼌安ᅙᅡᆫ킈 ᄒᆞ고져 ᄒᆞᇙ ᄯᆞᄅᆞ미니라

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

보기2

• <div style="background-color: #FFFFDD; border: 1px solid #808000; padding: 5px; {{상자 그림자|4px|4px|8px|#A0A080}}">{{옛한글}}{{훈민정음}}...</div> 로 쓰면 색깔 있는 그림자 효과를 줍니다:

나라 말이 중국과 달라 문자가 서로 맞지 않으니 이런 까닭으로 어리석은 백성이 말하고자 할 바가 있어도 마침내 제 뜻을 펴지 못하는 사람이 많으니라. 내 이를 위하여 딱히 여겨 새로 스물여덟 자를 만드노니 사람마다 하여 쉬이 익혀 날로 쓰기 편안케 하고자 할 따름이니라.

나랏말ᄊᆞ미 中듀ᇰ國귁에 달아 文문字ᄍᆞᆼ와로 서르 ᄉᆞᄆᆞᆺ디 아니ᄒᆞᆯᄊᆡ 이런 젼ᄎᆞ로 어린百ᄇᆡᆨ姓셔ᇰ이 니르고져 호ᇙ 배 이셔도 ᄆᆞᄎᆞᆷ내 제 ᄠᅳ들 시러 펴디 몯ᄒᆞᇙ 노미 하니라 내 이ᄅᆞᆯ 爲윙ᄒᆞ야 어엿비 너겨 새로 스믈여듧 字ᄍᆞᆼᄅᆞᆯ ᄆᆡᇰᄀᆞ노니 사ᄅᆞᆷ마다 ᄒᆡᅇᅧ 수ᄫᅵ 니겨 날로 ᄡᅮ메 便뼌安ᅙᅡᆫ킈 ᄒᆞ고져 ᄒᆞᇙ ᄯᆞᄅᆞ미니라

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

같이 보기

• {{border-radius}}
• {{linear-gradient}}
• {{둥근 모서리}}