|
|
Download now
The code consists of a single ASPX page, and can be viewed/copied from here.
About the code
The code was initially written as a proof-of-concept, after viewing the MSDN
site using FireFox.
|
|
|
Gradient.aspx
Why write an ASPX page that generates an image?
April 2004
Ever visited Microsoft's sites (Microsoft.com, MSDN, TechNet)
and wondered how they achieve the blue (or grey) gradient-effect in the header and
footer?
Internet Explorer supports a CSS style 'FILTER' which is demonstrated
here and looks like this in the style-sheet
FILTER: progid:DXImageTransform.Microsoft.Gradient
(gradientType=0,startColorStr=#ff00ff,endColorStr=#00ff99);
If you are using Internet Explorer you can see the result at the top of this page.
What's kinda interesting, though, is what happens when you view Microsoft's sites
in a non-IE browser, such as FireFox -
the pages detect that the FILTER style isn't supported, and outputs a different
table structure that displays an image tag like this:
http://msdn.microsoft.com/library/toolbar/3.0/
gradient.aspx?a=FFFFFF&b=6799FF&w=250&h=42&d=ltr
which outputs an image just like the gradient effect
The Gradient.aspx code available
here mimics the 'Gradient.aspx' file that Microsoft uses, but with some additional
features, such as the ability to place text in the image.
|
QueryString |
For |
Default |
|
a |
gradient start color |
ffffff (white) |
|
b |
gradient end color |
6799FF (light blue) |
|
c |
text color |
000000 (black) |
|
w |
width in pixels |
468 |
|
h |
height in pixels |
60 |
|
d |
gradient direction |
ltr - left to right (default)
rtl - right to left
ttb - top to bottom
btt - bottom to top
|
|
t |
text to display |
String.Empty |
|
s |
text size |
14 |
Here's an example of the output:
gradient.aspx?a=00ff00&b=ff0000&c=0000ff&d=ltr&t=Hello+World&s=30
back to top
|
|
Useful links
Image Generation Service (1.1 & 2.0)
Building dynamic image generation for .NET 1.1 and introducing the <asp:DynamicImage> control in ASP.NET 2.0
Hex
Colors in C#
The hex to integer conversion used in Gradient.aspx was found here (Thank
you!)
Filters
and Transitions Master Sample
MSDN info on the gradient DHTML.
Drawing Serpinski's Triangle with ASP.NET
Unrelated, but way cool image generating sample code
|