Replicating this with CSS? -> Shadow, Roundcorner, Gradient

[Nimbuz]

If it involves 4-5kb of js and css, why not just use a 2-3kb image directly. Images aren't evil. :-)

[CJPinder]

If it involves 4-5kb of js and css, why not just use a 2-3kb image directly. Images aren't evil. :-)

Agreed. A couple of images set as sliding doors would be a lot easier to set up and maintain.

Regards,
Christian.

[renaissanceart]

Agreed. A couple of images set as sliding doors would be a lot easier to set up and maintain.

Regards,
Christian.

Hmm whats this sliding doors method ?

The problem i have is theres a complex textured background image. So the transparency in the shadow is neccessary. I can achieve this by saving the image as a PNG or Gif. But, the next problem i'm faced with is the rounded corners.

Is this what your talking about with the sliding door? So have 3 images. 1 on each end which are rounded. Then a Centre image tiled ?

I know i could do this in tables in a matter of seconds. Not sure about CSS?


Thanks for the help guys, much appreciated!

[clydejones]

Hmm whats this sliding doors method ?

The problem i have is theres a complex textured background image. So the transparency in the shadow is neccessary. I can achieve this by saving the image as a PNG or Gif. But, the next problem i'm faced with is the rounded corners.

Is this what your talking about with the sliding door? So have 3 images. 1 on each end which are rounded. Then a Centre image tiled ?

I know i could do this in tables in a matter of seconds. Not sure about CSS?


Thanks for the help guys, much appreciated!

Check this article on the sliding door method

[welchyboy]

I did some research on the sliding door method and a lot of the examples had to do with tabs which I am not interested in. Is this a lot of work for not a big thing lol. Does this template from zen cart us the same thing...sliding doors?

http://(sorry, site offline)/138/ind...ate_dir=rustic

This is all i am interested in. Is there an easy way to accomplish this task so it works with other resolutions. I guess I am just so confused on the sliding door method.

[clydejones]

I did some research on the sliding door method and a lot of the examples had to do with tabs which I am not interested in. Is this a lot of work for not a big thing lol. Does this template from zen cart us the same thing...sliding doors?

http://(sorry, site offline)/138/ind...ate_dir=rustic

This is all i am interested in. Is there an easy way to accomplish this task so it works with other resolutions. I guess I am just so confused on the sliding door method.

Yes, it uses the sliding door technique for the navigations tabs, the sideboxes and the centerbox headings.

[welchyboy]

WOW really...Well this is what I need to do I guess. I have looked at the tutorials but it really didn't help me much because it is talking about tabbed images or menus and I need something referencing the centerbox. Is there anyway i can get the information from like the rustic stylesheet. Will this information even help me. How can i go about getting this to work. I am just interested in getting the centerboxheading to work as an image of some sort but fit the box for multiple resolutions. Got any thoughts on how a newbie of css and zen cart can go about getting this to happen?