<%@ Import namespace="System.Drawing" %>
<html>
<head>
<title>Abakada CSS Demo: color and background-color Attributes</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<script language="C#" runat="server">
void Page_Load ( Object src, EventArgs e ) {
if ( !IsPostBack ) {
Array colors = Enum.GetValues ( typeof ( KnownColor ) );
ListItemCollection f = fname.Items, b = bname.Items;
foreach ( KnownColor k in colors ) {
Color c = Color.FromKnownColor ( k );
if ( !c.IsSystemColor ) {
f.Add ( c.Name.ToLower ( ) ); b.Add ( c.Name.ToLower ( ) );
}
}
f.FindByValue ( "navy" ).Selected = true;
b.FindByValue ( "khaki" ).Selected = true;
}
theDiv.ForeColor = Color.FromName ( fname.Text );
theDiv.BackColor = Color.FromName ( bname.Text );
syntax.InnerText = "div { background-color: " + bname.Text + "; color: " + fname.Text + " }";
}
void reset ( Object src, EventArgs e ) {
fname.SelectedValue = "navy";
bname.SelectedValue = "khaki";
theDiv.ForeColor = Color.FromName ( fname.Text );
theDiv.BackColor = Color.FromName ( bname.Text );
}
</script>
</head>
<body>
<div class="header"><h2>Abakada CSS Demo: <b>color</b> and <b>background-color</b> Attributes</h2></div>
<hr size=1 width=92%>
<form runat="server">
<center>
<br>
<asp:panel id="theDiv" runat="server" width=70%
style="font: bold 16pt arial; padding: 25"
borderstyle="inset" borderwidth=2>
<p>This example allows a preview of various text and background color combinations. <br>
Select any of the text color or background color names below to see how that combination renders on this element. <br>
Note the resulting CSS syntax for the style declaration. </p>
</asp:panel>
<h4 id="syntax" runat="server"></h4>
<table cellpadding=5>
<td align="right"><b>Background Color </b></td>
<td><asp:dropdownlist id="bname" runat="server" autopostback /></td>
<tr>
<td align="right"><b>Text Color</b></td>
<td><asp:dropdownlist id="fname" runat="server" autopostback /></td>
<tr>
</table>
<asp:button text="Reset" runat="server" onclick="reset" />
<p>These color options can be used with any element that the CSS <b>color</b> and <b>background-color</b> properties apply to. <br>
The resulting CSS declaration is shown above. </p>
<p class="note">NOTE: Specifying the color as a color name may not be recognized by some browsers. <br>
To ensure that colors are displayed accurately with all browser versions, use the corresponding RGB color value instead. </p>
</center>
</form>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>