틀:선형 그라디언트

틀 설명문서[보기] [편집] [역사] [새로 고침]

선형 그라디언트를 삽입하는 틀입니다. 이 틀은 파이어폭스 (3.6 이상 버전), 오페라 (11.0 이상 버전), 사파리 (5.1 이상), 구글 크롬 (10.0 이상), 인터넷 익스플로러 10에서 동작합니다.

사용법

이 틀은 CSS Style 태그에서 작동합니다. 또한 이 틀은 background-image 속성에서 작동합니다.

<div style="{{선형 그라디언트 | 시작점 | #색상 [멈춤], #색상 [멈춤][, #색상 [멈춤], ...] }}">Lorem ipsum...</div>

1. 시작점 – 필수적으로 입력해야 합니다. left, top, right 또는 bottom 중에서 선택하거나 두 개의 혼합 (top left) 중에서 선택할 수 있습니다. 이 뜻은 여덟 가지의 경우를 사용 가능하다라는 것을 의미합니다.
2. 색상 – 첫번째 두 색상은 필수적입니다. 추가적으로 색상을 지정할 수 있으며 쉼표로 구분합니다.
3. 멈춤 – 선택적입니다. 그라디언트의 멈춤 지점을 퍼센트(가령 45%)나 픽셀(가령 60px)로 지정이 가능합니다.

예시

• <div style="{{선형 그라디언트|left|#ffdddd, #ddddff}}">Lorem ipsum...</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.

• <div style="{{선형 그라디언트|left|#ffdddd, #ddffdd 50%, #ddddff}}">Lorem ipsum...</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.

• <div style="{{선형 그라디언트|top|#ffdddd, #ddddff}}">Lorem ipsum...</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.

같이 보기