In C# (ASP.NET) it’s just as simple:
private void Page_Load(object sender, System.EventArgs e)
{
// Disable caching this page (C#)
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Buffer = true;
Response.ContentType = "application/binary";
Response.AppendHeader("Content-Disposition: attachment; " +
filename=dlimg.png");
Response.WriteFile(Server.MapPath("images/dlimg.png");
Response.End();
}
Monday, October 24, 2005
SimpleBits | Magic Icons for Lazy People (like me)
A neat little trick for those that want to change a site’s colors — but also create only one set of images that also reflects those changes. It’s been done on numerous sites, and I’ve employed the method on Fast Company with the redesign done back in April.
The idea is pretty darn simple, and works best with two-color images. Create a two-color .gif image and choose one of the colors to be transparent. Next, we’ll “fill in” the missing color with CSS using background. Change the CSS rule and the images will change with it. Very simple — but effective, and a heck of a lot simpler than creating multiple sets of icons.
Here’s an example (using inline styles to demonstrate). Below is a small little icon (13px x 13px) that is white and transparent. I’ll fill in the transparency with a few different colors using the same icon image, repeated:
On Fast Company I place icons within h3 headings and style them like this:
h3 img {
background: #369;
vertical-align: middle;
}
It’s important to note that because I’m using white as the visable color, the icons will be invisible on the un-styled version of the page. This could an unintended benefit. Keeping decorative images entirely in the CSS file using background-image is arguably a more ideal solution — but the chameleon effect you can create with one set of transparent images is a nice little trick.
The idea is pretty darn simple, and works best with two-color images. Create a two-color .gif image and choose one of the colors to be transparent. Next, we’ll “fill in” the missing color with CSS using background. Change the CSS rule and the images will change with it. Very simple — but effective, and a heck of a lot simpler than creating multiple sets of icons.
Here’s an example (using inline styles to demonstrate). Below is a small little icon (13px x 13px) that is white and transparent. I’ll fill in the transparency with a few different colors using the same icon image, repeated:
On Fast Company I place icons within h3 headings and style them like this:
h3 img {
background: #369;
vertical-align: middle;
}
It’s important to note that because I’m using white as the visable color, the icons will be invisible on the un-styled version of the page. This could an unintended benefit. Keeping decorative images entirely in the CSS file using background-image is arguably a more ideal solution — but the chameleon effect you can create with one set of transparent images is a nice little trick.
Subscribe to:
Posts (Atom)