CSS Graphics Terminolgy

Sitepoint Members,
On this site
http://www.nu-health.com/en/alaska-deep-sea-fish-oil-100-softgels-1000-mg.html
The green navigation bar near the top and across the page - what is that type of graphic called - graphics of just color and shape? There’s two more, one with “my cart” and the other “compare products”. There’s another “add to cart”, that’s called a button but there are plenty of buttons that are not color and shape graphics, so “button” isn’t the type of graphic for the button.

Thanks,

Chris

I just call them background images.

When I search for CSS images I get all sorts of stuff, except these sorts of color-shape images. If you wanted to see a selection of images of this type, what would you type into google? I’m under the impression that the image is entrely css generated. Do you have any idea if it is? Thanks

These images are graphic images created with a paint or image manipulation program such as PhotoShop, GIMP, or MSPaint, they are not created with CSS, but some do use CSS for sizing and placement. One of them is attached.

Ronpat, Do they have a name. They’re a unique type, they should. Your attachment wasn’t yet approved for me to look at.

No, they don’t have special names.

It’s not that hard to create simple custom shapes in a graphics program.

The “Add to Cart” button is entirely CSS. The more elaborate graphics are images. Some rather impressive graphic shapes can be created with CSS only; however, images are still the mainstay for more elaborate patterns and textures.

You can copy images from most web sites easily enough. Over time, you can amass your own collection of shapes. You can Google a class of images such as “halloween” or “christmas” but I don’t know of a way to Google particular shapes.

Maybe a graphics person can offer more insight, though. There are several graphic regulars here who may add some experience to the topic.

Yes, there is a background image involved there ( http://www.nu-health.com/skin/frontend/default/theme038k/images/btn.png ) although buttons like that can now be done entirely with CSS these days.

Off Topic:

Thanks, Ralph. Linking to their image is a better idea than pasting a copy in the forums, too. I’ll remember that !!!

That image via the link , are you sure that’s it (the green navigation bar with the whip or pint on the left side)? That link leads to what I think is a sprite of white, light green, and green rectangles. I think it’s some sort of color palette. I don’t see the point comming off the images like you see on the site (or similar in comics). The green image via the link is only 35 pixels tal, on the site it’s 48 pixels tall. I’m missing something here. I don’t see the image, in part or whole, on the site.

Is it any help seeing the page with no images?

I think they way most live - no eye candy no want.

The link that Ralph posted is to the image used in the “Add to Cart” button.

This is the link to the header nav image (it is the same image as I included in post #4):
http://www.nu-health.com/skin/frontend/default/theme038k/images/header.gif

If I can get that image I’ll use it instead of looking for a variety of such images for ideas - because I can’t even get past square one on that. Let me see what happens in the graphics forrum Ronpat was talking about.

Sitepoint Members,
What is the name of the type of graphic (maybe emerging graphic) that is either an image or made from CSS. An example is the green navigation bar that goes along the near the top with the curve and point on the left side on this site: http://www.nu-health.com/en/alaska-deep-sea-fish-oil-100-softgels-1000-mg.html
and then two smaller ones of the same type on the right side on the same site?

Thanks,

Chris

Hey wait a second, Ronpat already found it. I over looked the thumbnail (I guess) of it he used. Thanks Ron!

As mentioned above you can do things like this for modern browsers without using images and thus allow them to scale and wrap as required.

Here’s a quick example.

Thanks for the examples. This is the first time I’ve seen auto stretching colors. That helps me a lot. Thanks Paul.

Is there a simple way to reverse or turn a css graphic around?

You’ll need to be more specific about what you want to do. There’s not such things as a CSS graphic, so far as I know.

CSS Ribbon graphic. After a night’s sleep, I don’t need that after all.