반응형
<html xmlns:t = "urn:schemas-microsoft-com:time" >
<head>
<title>Creating Gradients in IE 5.5</title>
</head>
<style>
.time { BEHAVIOR: url(#DEFAULT#TIME2)}
t\:* { BEHAVIOR: url(#DEFAULT#TIME2)}
a:link
{
text-decoration:none;
color:black
}
a:visited
{
text-decoration:none;
color:black
}
a:active
{
text-decoration:none;
color:black
}
a:hover
{
text-decoration:none;
color:red
}
</style>
<body style="margin:0; font-family:verdana; font-size:70%">
<div style="POSITION: relative; TOP: 0; left:5; width:90%; height:50px; font-family:verdana; color:black; font-size: 8pt; font-weight: normal; padding:10px; z-index: 5; ">
<div style="font-size:13pt; font-weight:bold">Creating Gradients in IE 5.5</div><br>
The Gradient Filter allows for color gradients to be rendered on the client side, at the resolution of the display, without the need to author images that contain a pre-determined gradient at a fixed resolution. The gradients can also contain transparency values as part of the color definition, enabling content authors to create interesting visual effects. The color values that define the gradient can be accessed and dynamically changed through the properties exposed by the filter.</div>
<div style="POSITION: relative; TOP: 10; left:10; width:95%; height:50px; font-family:verdana; color:black; font-size: 8pt; font-weight: normal; padding:10px; border:1px solid black; z-index: 5; filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ffffff', startColorstr='#0000FF', gradientType='1');">
<div style="font-size:13pt; font-weight:bold">Horizontal Gradient</div><br>
This gradient uses a startColorstr value of #99CCFF and an endColorstr value of #FFFFFF.</div>
<div style="POSITION: relative; TOP: 20; left:10; width:95%; height:50px; font-family:verdana; color:black; font-size: 8pt; font-weight: normal; padding:10px; border:1px solid black; z-index: 5; filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#00ffffff', startColorstr='#FF99CCFF', gradientType='1');">
<br>
Adding FF for to the startColorstr and 00 to the endColorstr adds a transparent gradient.</div>
<div style="POSITION: relative; TOP: 30; left:10; width:95%; height:50px; font-family:verdana; color:black; font-size: 8pt; font-weight: normal; padding:10px; border:1px solid black; z-index: 5; filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#00ffffff', startColorstr='#FF99CCFF', gradientType='0');">
<div style="font-size:13pt; font-weight:bold">Vertical Gradient with Transparency</div><br>
This is the the same as the above gradient, however the gradientType attribute is set to 0.</div>
<div style="POSITION: relative; TOP: 40; left:10; width:95%; height:50px; font-family:verdana; color:black; font-size: 8pt; font-weight: normal; padding:10px; border:1px solid black; z-index: 5; filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#00ffffff', startColorstr='#FF99CCFF', gradientType='1');">
<div style="font-size:13pt; font-weight:bold">Gradient with Transparency animated with HTML+TIME</div>
<p><br>
Both the transparency attributes and the color attributes can be animated.
</p>
<!--<t:animate calcmode="paced" attributeName="filters.item(0).endColorstr" values="#FFffffff; #EEECF4FB; #DDE0EEFB; #CCCDE4FB;#BBAAD3FC;#AA99CCFF" dur="2" repeatDur="indefinite" />
<t:animate calcmode="paced" attributeName="filters.item(0).startColorstr" values="#FF99CCFF;#FFAAD3FC;#FFCDE4FB; #FFE0EEFB; #FFECF4FB; #FFffffff" dur="2" repeatDur="indefinite" /> -->
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#0000FF"> </td>
</tr>
</table>
</body>
</html>
