« It's a Beautiful World | Main | BlogScarf: day ii »
So. I've had a little bit of time in the last day or so to play around with an idea that has been on my mind a while: creating site graphics that use repeating patterns behind .gif transparency to create a design. I've re-written that sentence five times, and it still isn't clear at all, so just go look here. The image on the left is simply a .gif in which the negative space is white and the positive space is transparent, and I've used CSS to give the .gif a background image. (Like this: <img src="http://citrusmoon.typepad.com/photos/tiletest/scarf.gif" border="0" style="background: url(http://citrusmoon.typepad.com/photos/tiletest/lilly2.gif);">)
The idea is to make something that is totally simple to insert into any web page even if one is a complete novice, that will allow you to change the background (and therefore the whole feeling of the graphic) very easily, and that offers a lot of pizzazz at very small download sizes. For that example blog page, for instance, I used only the options offered by Typepad's most basic template sets, with no customization at all (no converted, advanced templates, in other words). To put the image in the left sidebar I just made a TypeList "link" entry, ignoring "Link title" and Link URL" and putting the html in the notes section and then, under "Configure", choosing "Display notes As Text" (following Matt Haughey's tip for including a Google search form). Since I didn't want any text on top of the graphic, though, I just put a spacebar space into the TypeList "List name" field when creating a new TypeList. Setting up the entire blog probably took about 20 minutes (though of course I already knew exactly what I wanted to do, and already had the transparent .gif image and the title image).
I'm calling this a "blogscarf" at the moment, because like a scarf or a tie, it enables you to quickly express different looks and moods while the basic "suit" remains the same. I'm not sure about the name, though; too silly? Suggestions, anyone? Please?
I've only just started really finally dealing with this, and I want to put together a variety of graphics enabled this way, so I'm not quite ready to set up a section for it yet. However, you can play a bit by going to this example page where you can click on different backgrounds to see how they work behind another magic .gif. Click a tile and you'll see the background of the .gif appear; click another tile and the background will change. Tthis will give you an idea of the possibilities. Please note, though, that in order to allow you to see different backgrounds behind the .gif I used Javascript; when actually putting one of these on your own page, there's no need to do this - you just put in the .gif with a background image, then change the background or the .gif image whenever you feel like it. This page has a lot of images to load, but the real deal is really quite small. The one I used on the actual blogscarf blog page takes up about 6-7K altogether. Once I get a few designs together I will create a space for this, with everything spelled out. In the meantime, Thoughts? Ideas?
A note: I've updated this post to link to the improved version of the second example page instead of the one-big-gif-on-top version.
Posted by taz on April 18, 2004 at 06:16 AM in BlogScarf, Site News, Site design, Tips, TypePad | Permalink
TrackBack
TrackBack URL for this entry:
http://www.typepad.com/t/trackback/643953
Listed below are links to weblogs that reference BlogScarf?:
» Blog Scarf from one girl's life...overflows
Fantastic design idea from Citrus Moon.... [Read More]
Tracked on Apr 18, 2004 11:02:54 AM
Comments
OMG, that is absolutely incredible! I love it!
Posted by: Rori | Apr 18, 2004 11:01:22 AM
Thanks, Rori! As usual, I can't wait until I have everything in place to put it up - but I've been thinking about doing this for a long time, so going ahead with a premature posting will make me finally sit here and work it out. (Yes? Yes!)
Posted by: taz | Apr 19, 2004 3:47:57 AM
Yes! I love the blogscarf idea.
Posted by: LoriO | Apr 19, 2004 10:04:09 AM
Coincidentaly, I've been exploring the white on transparent GIF the last few days. In my case, the idea was to make non-rectangular white backgrounds for text.
Unfortunately, I haven't put one up in public yet. I'll try to get to that soon...
Posted by: Mike | Apr 20, 2004 2:27:36 PM
Mike - great minds procrastinate alike! I've been fiddling with something like this, too, though of course I'm usually playing with patterns in the background, etc. Please let me know if you put something together, I'd love to see it.
Here's a site I did ages ago in which I used an similar idea.
Posted by: taz | Apr 21, 2004 1:03:42 AM
