How to Create a Custom Border around Sidebar Elements or Images

Blog Sidebar Elements and Images in Posts Need Custom Border

[MSVaughn]

I have sidebar items in my blog. How can I create a background image (custom designed border) to go around certain sidebar items. For instance, my "Recent Posts" sidebar list displays with no background, however, I would like it to have a custom border around it. If you go to <snip>, and then go to any of her sections (let's say, "Confessions"), you will notice that her sidebar items are framed with a simple gray shadow. However, the sidebar items have links within them, just as my "Recent Posts" are hyperlinks. That's where I get stuck and don't understand how she created that shadow border (or background image) around specific sidebar items, including her images in her posts. The frame around her images and sidebar items are a perfect fit to that particular item or image in her blog. So, that is what I am trying to do - while adding my sidebar items, I want to choose the ones that include a border, and be able to add that information to the Stylesheet somehow. (For instance, I want a simple light gray shadow around my Recent Posts list in my right sidebar ( see <snip> )

Also, I want to do this same simple shadow border around the images that I add to my posts. Is there a code that will automatically add the border that I create in Photoshop to my images in my posts? How would the code know to be the dimensions of my image in my post or sidebar? Would I need to create different elements in Photoshop that are put together to create a background frame that adjusts to the size of my sidebar element or image in my post?

Thanks! I've been racking my brains trying to figure out how I can do this.

Susan

[edited by: swa66 at 4:51 pm (utc) on Feb. 1, 2009]
[edit reason] URLs, please see ToS and forum charter [/edit]

[swa66]

Welcome to WebmasterWorld! [webmasterworld.com]

Please note we do things different out here: no images, no links.

To try to get you started:
Take a look at a technique called "sliding windows [google.com]"
The technique can easiest be understood by using 2 images, but it's quite possible to use one large button and use both sides from the same image

This method can be used both horizontally and vertically (even in both directions at the same time)

That can be combined with hover effects that change e.g. the background of an element if the cursor is over it.

To see what others are doing, take a look at the source code, or alternatively use something like the web developer toolbar in firefox and then you can point to something to see the CSS applied to it.

You can also replace text with images using CSS. Basically it means you make sure the text isn't rendered and only the background is shown (using e.g. a very large negative text-indent.

Does that start to point you what you seek to know ?

[MSVaughn]

I think it does somewhat. I have to try it first. Thank you for your prompt reply. I will let you know how it goes.

Susan