Gradient Filter


Home > Document > Web design > CSS > Filter > Static > Gradient

Gradient filter

그래픽 프로그램을 약간이라도 접해 본 사람은 gradient 라는 단어를 들어 본 적이 있으리라 생각합니다. Gradient는 명도나 채도가 다른 두 가지 색상 사이를 점차적으로 상대색에 가깝게 변화시키는 것을 말 한다고 합니다. 예를 먼데서 찾을 필요없이, 브라우저 상단의 제목 표시줄이 그렇고, 아래의 Table 제목 배경이 gradient 입니다. 더 실감나게 보고 싶으면 여기를 눌러서 확인해 보시고, 다시 원상복귀시키면 되겠습니다.

Gradient filter
Property name 설 명
GradientType
Gradient 가 진행되는 방향
0 Default. 위에서 아래로 세로 방향.
1 왼쪽에서 오른쪽으로 가로 방향.
StartColorStr Gradient가 시작되는 면의 색상. Color 참조. 기본 색상값 #0000FF
StartColor Scripting으로 StartColorStr을 지정할 때의 property name
EndColorStr Gradient가 끝나는 면의 색상. Color 참조. 기본 색상값 #000000
EndColor Scripting으로 EndColorStr을 지정할 때의 property name
html syntax <ELEMENT STYLE =
"filter:progid:DXImageTransform.Microsoft.Gradient(sProperties)">
scripting object.style.filter =
"progid:DXImageTransform.Microsoft.Gradient(sProperties)"
적용 대상 Block level elements. Image에는 적용 안됨.
Note Alpha 값을 줄 때는 background-color 를 지정하면 안됨




Gradient 사용 예

StartColorStr=#49234f
EndColorStr=#eeeecc

Alpha 값을 줄 때는 background-color 를 지정하면 안됨

Filter code
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#49234f,
EndColorStr=#eeeecc)




Gradient filter 를 이용한 입체 Pipe 만들기


Web Design | Web Design | Web Design | Web Design | Web Design | Web Design

위의 Chrome 질감의 pipe는 얼핏보면 어떤 그래픽 프로그램으로 만든 pipe 같지만 사실은 이 번 페이지의 주제인 gradient filter를 이용하여 만든 pipe 입니다. 그래픽 프로그램 없이도 이런 pipe를 만들 수 있다는게 참 재미있지 않습니까? 그래픽 프로그램 만지는 걸 워낙 귀찮아 하다 보니 궁리끝에 만들게 된 거죠. 이 pipe를 붙여 놓으면 위와 이 보이지만 사실은 분리해 보면 아래와 같습니다. Web design 이라는 문자들을 4번으로 하겠습니다.


최외곽 테두리 - 1번

pipe 상단 - 2번


pipe 하단 - 3번


Web Design | Web Design | Web Design | Web Design | Web Design | Web Design

Pipe만 만들겠다면 사실 1번과 4번은 불필요하죠. 하지만 첫 번째 그림과 같이 글자가 pipe 위로 올라가게 만들자면 1번이 필요합니다. Positioning을 해서 위로 올려 줘야 되거든요. 만약 positioning으로 위로 올려 주지 않으면 아래와 같이 될 것입니다. Tag의 순서상 글자가 pipe위로 올라 탈 수가 없거든요... 그러면 글자를 가운데 놓고 힘으로 pipe를 아래 위로 꽉 누르면 될까요. 물론 안되겠죠. 이 때도 역시 positioning 을 사용해야 되겠습니다.

Web Design | Web Design | Web Design | Web Design | Web Design | Web Design

그렇다고 글자에만 positioning을 하면 될까요? 만약에 글자에만 position:absolute; top 15px; 와 같이 한다면 글자는 문서의 상단... 그러니까 이 페이지의 제목 쯤에 가서 붙어있을 겁니다. 그러므로 이 경우에는 1번을 position:relative 로 글자를 position:absolute 로 하면 1번 box 속에서만 absolute position이 되므로 밖으로 벗어나지 않게 됩니다. 아래는 source code니까 여러분들이 보면 충분히 이해하리라 믿고, 잘 안되면 게시판에 질문하세요...^^

입력
<html>
<head>
<title>Gradient pipe를 이용한 입체 pipe 만들기</title>
<style type="text/css">
<!--
.gra01
{filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0', startColorStr='#999999',
endColorStr='#ffffff');}
.gra02
{filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0', startColorStr='#ffffff',
endColorStr='#000000');}
-->
</style>
</head>
<body>
<div style="width:100%;position:relative;">
<div class="gra01" style="width:100%;height:18px;font-size:1px;"></div>
<div class="gra02" style="width:100%;height:32px;font-size:1px;"></div>
<span style="position:absolute;top:15px;color:#333333; width:100%;text-align:center;">
Web Design | Web Design | Web Design | Web Design | Web Design | Web Design </span>
</div>
</body>
</html>


코드 실행 하기





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색