그라디언트 필터를 사용한 다이나믹 버튼 만들기
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>쌈플</TITLE>
<STYLE>.color1 {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 10pt; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=orange, EndColorStr=#FFFFFF); BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 30px
}
.color2 {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 10pt; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=blue, EndColorStr=#FFFFFF); BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 30px
}
.color3 {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 10pt; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=green, EndColorStr=#FFFFFF); BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 30px
}
.color4 {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 10pt; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=red, EndColorStr=#FFFFFF); BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 30px
}
</STYLE>
<!------------------------- 여기까지 ---------------------------------->
<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY><!---- [2단계] 아래의 코드를 <BODY> 태그와 </BODY> 태그안에 넣어 응용해 보세요 ----><!-- class 부분을 위의 스타일과 일치 시킵니다 ----><INPUT class=color1 type=button value="Gradient 필터를 적용한 버튼입니다"><BR><BR><INPUT class=color2 type=button value="Gradient 필터를 적용한 버튼입니다"><BR><BR><INPUT class=color3 type=button value="Gradient 필터를 적용한 버튼입니다"><BR><BR><INPUT class=color4 type=button value="Gradient 필터를 적용한 버튼입니다"><BR><!------------------------- 여기까지 ----------------------------------></BODY></HTML>
<HTML><HEAD><TITLE>쌈플</TITLE>
<STYLE>.color1 {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 10pt; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=orange, EndColorStr=#FFFFFF); BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 30px
}
.color2 {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 10pt; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=blue, EndColorStr=#FFFFFF); BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 30px
}
.color3 {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 10pt; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=green, EndColorStr=#FFFFFF); BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 30px
}
.color4 {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 10pt; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=red, EndColorStr=#FFFFFF); BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 30px
}
</STYLE>
<!------------------------- 여기까지 ---------------------------------->
<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY><!---- [2단계] 아래의 코드를 <BODY> 태그와 </BODY> 태그안에 넣어 응용해 보세요 ----><!-- class 부분을 위의 스타일과 일치 시킵니다 ----><INPUT class=color1 type=button value="Gradient 필터를 적용한 버튼입니다"><BR><BR><INPUT class=color2 type=button value="Gradient 필터를 적용한 버튼입니다"><BR><BR><INPUT class=color3 type=button value="Gradient 필터를 적용한 버튼입니다"><BR><BR><INPUT class=color4 type=button value="Gradient 필터를 적용한 버튼입니다"><BR><!------------------------- 여기까지 ----------------------------------></BODY></HTML>
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 2개