4

I'm trying to make a image sprite for a box that can stretch vertically and horizontally while also having a hover over state. I usually create a sprite that either stretches vertically or horizontally only. In that case I would make the parts of the box that must stretch infinitely touch either top and bottom of the image to loop vertically or touch the left and right side to stretch horizontally but I'm stuck on making a single sprite for both.

Here is what I am working with that will contain a list (<ul>) of link links that will use the background color from the hover state.

Sprite

Left side: Regular state. Right side: Hover state

I don't know if I can just use CSS with what I have right now to do what I'm trying to accomplish or if I have to break up the image into little parts for a single file. Here is how I'm imaginging doing it for one side.

Example sliced

Here is what I ended up with in two different files. Still not completely happy because I would like this sprite to be self contained but maybe I'm just being too picky?

enter image description here enter image description here

Questions:

  1. Can I achieve my goal with the first image by using CSS code that is supported by most standard browsers meaning not requiring the absolute newest version of Firefox, Chrome, Safari? I want this to be highly compatible.
  2. If question 1 is No, then how do I create a sprite layout for this example?
  3. Can you provide example CSS (pseudo code is fine also) if implementation is not obvious for rounded corners?

Note: I know there are now list items in the box right now but imagine a menu and when you hover over the first or last item then the corners along with the header/footer is supposed to turn white to hover over state also. I can probably figure this part out on my own but I just wanted to mention it so that the sprite design isn't lacking this feature.

Glitches
  • 742
  • 2
  • 8
  • 18
  • 1
    CSS3 or CSS4 has a means to add different images to different parts of a background, so you're stuck to just one. At this point, I'm not sure any browsers support it. Maybe Chrome or Safari. – Jared Farrish Mar 14 '13 at 03:45
  • 1
    +1 and fav. you have provided everything in your question, now we just need a demonstration. – syrkull Mar 14 '13 at 03:48
  • 1
    [Well, words, you betray me.](http://stackoverflow.com/a/423190/451969) If multiple backgrounds are what you're after (so you don't need to slice your two backgrounds into four for each corner), that would work in all but IE8<. As always. – Jared Farrish Mar 14 '13 at 03:48
  • That was a very close solution. The idea is having one image sprite that has everything needed to build the sprite. Although that comes very close to what I need. – Glitches Mar 21 '13 at 18:45
  • please see the bounty requirement – syrkull Mar 24 '13 at 01:56
  • Any markup restrictions? – yunzen Mar 25 '13 at 15:08

2 Answers2

1

This is answer to your question #1:

Not exactly, but very closely it is achievable in CSS. Checkout this fiddle

Refer to these pages for compatibility:

  1. http://caniuse.com/border-radius
  2. http://caniuse.com/css-boxshadow
  3. http://caniuse.com/css-gencontent

In summary, works on most browsers, except:

  1. On IE8 and below, the shadow and rounded border is missing
  2. On IE7 and below, the arrow and hover state is missing as well, so just a box. :(

If you don't have to support IE7, I think this is usable.

CSS code:

.box {
    background-color: #ccc;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    position: relative;
}
.box:hover {
    background: white;
}
.box:hover:after {    
    border-bottom: 20px solid white;
}
.box:before {
    content: ' ';
    display: block;
    position: absolute;
    top: -6px;
    right: 26px;
    width: 8px;
    height: 6px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}
.box:after {
    content: ' ';
    display: block;
    position: absolute;
    top: -10px;
    right: 10px;
    border-bottom: 20px solid #ccc;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}
haejeong87
  • 847
  • 1
  • 10
  • 20
0

After more research, I found an answer. Unfortunately there was no real answer to my question and I didn't intend for this to be a trick question. Nonetheless, here we go.

Answers:

1) No. It's just not possible.

2) The comment box is supposed to stretch indefinitely from width and height which makes using 1 sprite impossible. If this is truly the need then I have to do what the link Jared Farrish said to do with 2 background images.

Instead, the best solution I found was a combination of the first image and the sprite with the corners in it. Imagine a sprite as follows:

From left to right, but the side bars in the order of right bar, left bar, right hover bar, left hover bar, that touch the top of the grpahic to the bottom.

Secondly grab both pointers and put them to the right of the bars where the top of the comments boxes will be placed. This just makes it easier to program them in later with CSS.

Lastly, grab the the two comment boxes in my first graphic and put the hover state below the normal state. I came to realize that even though I said I wanted the box to stretch indefinitely, but this is not exactly true. There will never be a case where the box is 300,000px wide so I just stretched them to 900px because that is the width of my content and that gave the max width of these boxes 900px with an unlimited height.

The whole image came out to about 4kb and I was able to achieve having 1 image contain the sprite. I didn't need to put the corners separately on another part of the sprite because I an just reference where they are in the comment bubble. :)

Glitches
  • 742
  • 2
  • 8
  • 18