- Go to Solution Explorer
- Right Click on the Application name
- Select Add-->add new item
- Now in this window that opens up select an HTML page or new Web form.
![st1.gif]()
Step 2 : In this section we will create the style for the media and
create the .css on the media screen. Put the given script in the Head section of
the HTML or in between the <head>--</head>
Script for the style tag are as follow.
<style
media="screen">
body {
background:
#555;
color:
#555;
font:
300 100.01%/1.2
"Segoe UI", "Helvetica Neue",
Helvetica, "Arial
Unicode", Arial,
sans-serif;
margin:
0 30px;
}
#content {
width:
762px;
height:
507px;
position:
relative;
}
h1 {
font-weight:
300;
font-size:
3em;
position:
absolute;
right:
10px;
bottom:
50px;
}
p {
font-size:
2em;
}
#benefits {
margin-top:
350px;
}
#copy a
{
color:
#666;
text-decoration:
none;
}
#picker2 {
width:
300px;
position:
absolute;
top:
250px;
left:
50%;
margin-left:
-150px;
}
#benefits {
margin-bottom:
0;
}
#output {
background:
#eee;
position:
absolute;
font-size:
30px;
bottom:
10px;
left:
20px;
font-family:
monospace;
margin-top:
-20px;
width:
197px;
}
#copy {
position:
absolute;
right:
10px;
bottom:
10px;
margin:
0;
font-size:
.6em;
color:
#666;
}
#values {
position:
absolute;
left:
51px;
top:
366px;
font-size:
.7em;
width:
132px;
height:
66px;
}
</style>
Step 3 : In this section we need
to work on some JavaScript over here. For understanding the full working of
JavaScript download the attached .rar file and run the colorpicker application.
<script>
colors(function
() {
var out1 =
document.getElementById("output"),
dd = document.getElementById("dd"),
dg = document.getElementById("dg"),
db = document.getElementById("db"),
dh = document.getElementById("dh"),
dl = document.getElementById("dl"),
ds = document.getElementById("ds"),
dd.innerHTML = clr.r;
dg.innerHTML = clr.g;
db.innerHTML = clr.b;
dh.innerHTML = dl.innerHTML = Math.round(clr.h * 360) +
"°";
out.onkeyup = function () {
al.color(this.value);
ml.color(this.value);
};
});
</script>
Step 4 :
In this section we are going to
become familiar with the body part of HTML scripting. In this part we will create the
table for the purpose of getting the combination of colors while we are changing the
pointer.
<body>
<form
id="form1"
runat="server">
<div
id="content"
style="background-color:
#FFFFFF; top:
20px; left:
12px;">
<h1
id="h1"
style="font-family:
Verdana; width:
413px; height:
57px; color:
#008080; background-color:
#FFFF00;"> Color Changer</h1>
<table
id="values">
<tr>
<th>R</th>
<td
id="vr"></td>
<th>H</th>
<td
id="vh"></td>
<th>H</th>
<td
id="vh2"></td>
</tr>
<tr>
<th>G</th>
<td
id="vg"></td>
<th>S</th>
<td
id="vs"></td>
<th>S</th>
<td
id="vs2"></td>
</tr>
</table>
<input
type="text"
id="output"
value="#eeeeee"
style="background-color:
#FFFFFF; color:
#FF0000;">
<asp:Label
ID="Label1"
runat="server"
style="top:
473px; left:
591px; position:
absolute; height:
19px; width:
73px; background-color:
#FFFFFF"
Text="DWIJ"></asp:Label>
</div>
<div
id="picker2"></div>
</form>
</body>
Step 5 : Output Press F5.
Note : For the accurate output of HTML5 applications, you must have the Google
Chrome browser in your PC.
Here are your outputs:
![color1.gif]()
After changing the pointer
![color2.gif]()
Again changing the pointer.
![color3.gif]()
Resource
Some of the useful resources are :
Basics of Colors in XAML Silverlight
Photo Browser and Wallpaper Changer
Color Picker in XAML Silverlight
Colors, Fonts, and Text in GDI+