SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    CSS Graphics Terminolgy

    Sitepoint Members,
    On this site
    http://www.nu-health.com/en/alaska-d...s-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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,172
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    I just call them background images.

  3. #3
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

    header.gif

  5. #5
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ronpat, Do they have a name. They're a unique type, they should. Your attachment wasn't yet approved for me to look at.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,172
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    The "Add to Cart" button is entirely CSS. The more elaborate graphics are images.
    Yes, there is a background image involved there ( http://www.nu-health.com/skin/fronte...images/btn.png ) although buttons like that can now be done entirely with CSS these days.

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:


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

  9. #9
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,154
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    Is it any help seeing the page with no images?
    nuhealth.png

  11. #11
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think they way most live - no eye candy no want.

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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/fronte...ges/header.gif

  13. #13
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Dear Graphics Gurus

    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-d...s-1000-mg.html
    and then two smaller ones of the same type on the right side on the same site?

    Thanks,

    Chris

  15. #15
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey wait a second, Ronpat already found it. I over looked the thumbnail (I guess) of it he used. Thanks Ron!

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  17. #17
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the examples. This is the first time I've seen auto stretching colors. That helps me a lot. Thanks Paul.

  18. #18
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Is there a simple way to reverse or turn a css graphic around?

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,172
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.

  20. #20
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    CSS Ribbon graphic. After a night's sleep, I don't need that after all.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •