How do you create a perfectly scalable button in HTML/CSS3/jQuery+Plugins using images to provide borders and corners?
I have thought of a method that is absolutely messy, and I believe there are much better ways to solve the problem.
My method involves something like this:
<div class="button-container"> // The corners are all the same image, just rotated for the specific corner // (using CSS) <div class="top-right"></div> <div class="bottom-right"></div> <div class="top-left"></div> <div class="bottom-left"></div> // The (height, width) of the top/bottom edge are (5px,1px), so they can // repeat-x (or be stretched infinitely with no loss of quality), likewise // for the left/right edges, they can repeat-y (or again be stretched). <div class="top-edge"></div> <div class="bottom-edge"></div> <div class="left-edge"></div> <div class="right-edge"></div> // This simply fills the center of the button, with padding on every // edge to allow for transparency on the corners. <div class="center-fill"></div> </div>
People who can solve my problem see where that is going.
More info/clarification provided on request.
Edit: Not sure why you'd need a fiddle, my method is pretty self explanatory, and if you can't figure it out Smart way to add corner image to DIV border on all four corners
That doesn't solve my problem though, my method is exactly what I do not what to use. I am trying to make an button that is scalable, similarly to how pure CSS3 buttons are scalable. If I want the top edge border of my image to be a 1-pixel wide 5-pixel high image that is stretched horizontally or repeated on the x-axis, I must use an image. I want an elegant solution to constructing a button out of images and CSS 'tricks'.
Try using border images, an great example is given here:
border-image: url(border.png) 27 27 27 27 stretch stretch;
You can use different images for the corners like this:
border-image: border-top-image border-right-image border-bottom-image border-left-image border-corner-image: border-top-left-image border-top-right-image border-bottom-left-image border-bottom-right-image