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

[renaissanceart]

I want my NavMainWrapper to look exactly like this.

It is possible to replicate this 100% with CSS?







Anti-Aliased Rounded Corners, Drop Shadow and preferably (but not imperative) a Gradient Fill.

All without using ANY images whatsoever ??

any CSS gurus out there got a simple solution? :)

[clydejones]

I want my NavMainWrapper to look exactly like this.

It is possible to replicate this 100% with CSS?







Anti-Aliased Rounded Corners, Drop Shadow and preferably (but not imperative) a Gradient Fill.

All without using ANY images whatsoever ??

any CSS gurus out there got a simple solution? :)

Solution: yes! simple: not really!

You'll have to combine several css methods to accomplish what you want.

Drop Shadow:
Look at this tutorial

Although it uses an image.

The closest you'll get to a drop shadow without an image is to use a border-bottom declaration in your stylesheet.

Rounded Corners:
Look at this tutorial

OR

This one

[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?

[gjh42]

Just because the tutorial talks about tabs doesn't mean you need to use different methods for other elements. If it helps, mentally change "tab" to "heading".

You will need another wrapper div to hold the second bg image. In /includes/modules/your_template/new_products.php, find this near the bottom:

    if (isset($new_products_category_id) && $new_products_category_id != 0) {
      $category_title = zen_get_categories_name((int)$new_products_category_id);
      $title = '<h2 class="centerBoxHeading">' . sprintf(TABLE_HEADING_NEW_PRODUCTS, strftime('%B')) . ($category_title != '' ? ' - ' . $category_title : '' ) . '</h2>';
    } else {
      $title = '<h2 class="centerBoxHeading">' . sprintf(TABLE_HEADING_NEW_PRODUCTS, strftime('%B')) . '</h2>';
    } 

and change to

    if (isset($new_products_category_id) && $new_products_category_id != 0) {
      $category_title = zen_get_categories_name((int)$new_products_category_id);
      $title = '<h2 class="centerBoxHeading"><span class="centerBoxHeadingWrapper">' . sprintf(TABLE_HEADING_NEW_PRODUCTS, strftime('%B')) . ($category_title != '' ? ' - ' . $category_title : '' ) . '</span></h2>';
    } else {
      $title = '<h2 class="centerBoxHeading"><span class="centerBoxHeadingWrapper">' . sprintf(TABLE_HEADING_NEW_PRODUCTS, strftime('%B')) . '</span></h2>';
    } 

Then you can attach one side of the bg to h2.centerBoxHeading and the other side to .centerBoxHeadingWrapper.