css-sprites

Is there CSS sprites support in jQuery UI

I'm looking into using CSS sprites, but wouldn't like to invent the wheel. Is there existing support in jQuery or jQuery UI? Or as an alternative, a well debugged jQuery plugin ...

Are there any web applications to merge small images into a single one?

Is there any application to merge small images into a single one in a web application in order to make less HTTP request and have the page load faster? GWT does this automatically and makes proper images + CSS styles to show those images. When I have a plain HTML + CSS is there a helper application which given HTML + CSS + a bunch of s...

How do I use a sprite to the right of text with an unknown width?

Given the following example: http://cl.ly/2UAa How do I use a sprite on the right side of the "see more..." line so that it always adjusts with the width of the text? Should I create a separate element that will float with the text, or is there a way to do it directly within the link. ...

Better dialog shadows in YUI 2 ?

Here's a tricky one: has anybody seen a YUI dialog/panel implementation with nice OS X style shadows around the dialog, instead of the blocky shadow that is implemented by default with the "underlay" element? You can see this type of shadow on Amazon.com popup windows. It requires quite a bit of PNGs but looks very nice. I'm thinking...

Controlling HTML of a WebPart's top-right drop down menu

I am reviewing some existing ASP.NET code that used ASP.NET WebParts. The web parts implement IWebActionable in order to control the items shown on the web part's top-right drop down menu. The rendered HTML for each context menu item looks something like this: <DIV> <A class="menuItem" onclick="stuff" href="javascript:void(0)"> ...

CSS Sprite generator for Ruby on Rails project

I'm currently working on a large, highly trafficked Ruby on Rails website and in order to get our page load times down, we are looking at spriting our background images. There seem to be a lot of tools out there but many are in the early stages of dev and many don't support some of the features we need. Features which are important to ...

Using sprites in a UL horizontal menu

I'm using a UL to display the options for data visualizations on a site. The items are displayed inline and retrieve the image from a sprite png. This works fine in FireFox 3x, but in Chrome and Safari, the first item disappears. If I replace the sprites with the individual images, all of the list items display properly. Here's the CSS:...

Rotate sprite javascript

I have a sprite animation, a small cannon rendered using a 3D app. I have exactly 360 frames for a 360 degree turn. Each image has a 100x100 pixel size. So basically what I am trying todo is when I click anywhere in the page, the barrel of the cannon needs to rotate to point at the mouse cursor, sound simple maybe but I can't really get...

Why should I use CSS3 buttons?

I built a website recently, and decided to create buttons that depress on click with CSS3, pretty cool. But is there really a valid reason to use CSS3 over a sprite, as only the modern browsers show the CSS3 buttons? The client asked me this question, and all I could think of was less http requests, so loading would be slightly faster...

can a background image be negatively positioned to the bottom or right, or only a portion of a picture repeated?

hi, I'm putting together a sprite and have two questions. Something I've always wondered whether possible is negatively positioning a background picture to the right or bottom. A negative position is bread and butter stuff on the left of an element or top but what about the right and bottom? If I have a 500px by 500px div can I then po...

Why is my background image not displaying properly in IE7??

Screenshot of the issue: http://cl.ly/2oS3 Webpage in Question: http://cure.org Offending browser: Internet Explorer 7 You'll notice from the screenshot, or if you view this site in IE7, that the background image is not displaying for the content div (#modal-inner-content). Strangely, the image displays in the other divs where it is u...

What html tag best to use with sprites

I would like to use sprites to display my icons. I created image and CSS, now I need to add class to my html element. What is the best HTML element for that? <div> works fine, but of course it spans across entire space and wraps. works only if I put something in it. Here's my CSS .sprite { background:url('/i/sprites.png'); ba...

How to make a CSS rollover image? (sprite)

I'm just trying to use this little trick I saw in one of my web design magazines to make a little image rollover but I'm having just a small bit of trouble. My attempt was a terrible fail lol. I just want to see the top half (42px tall) and then the bottom half on rollover (-42px obviously) width is also 42px. Could someone write someth...

What is the recommended way of applying style to a spritegen generated sprite?

Hi All- I'm trying to use the spritegen tool to generate a sprite, but I've found that I either misunderstand the way to correctly apply CSS, or chrome is not handling the background properties correctly. According to their documentation (which would seriously benefit from a working example) You can apply style to a set of elements usi...

Android Web Browser Scaling Works More Effectively for Images than Sprites

Hi All, I'm developing a mobile web application and I have a home screen with a number of icons on it, so I tried to use a sprite to serve all the images in one swoop. I noticed, however, that the iphone4 scaled the images in my sprite fairly well (they looked a little dithered), but on my HTC Evo the sprite rendered images look really...

Google Chrome slight mis rendering of button sprite

I cannot seem to get the butotn on the pop up of this page just right in Google Chrome: http://www.ryanpays.com/expedia/ There is an overlap which is not present when testing in other browsers. It's really bugging me :( ...

Horizontal nav menu with jQuery css sprite rollover

I was thinking of having a unique setup for my left navigation on my Mario themed website: OK, so for each link, I would have the text like "Action Figures" for example in a certain font. Give a little room, and then insert a sprite of a certain Mario character, Mario would go next to "Action Figures", Luigi next to "Board Games", so o...

CSS sprites and gradients

Is it possible to put multiple repeating gradients on a single sprite master image? I've got about 5 1px X 400 px gradients that could be combined to reduce the page requests. It's pretty much my last place to go for reducing object requests. I haven't seen any techniques for this while searching. My own experimentation hasn't had good r...

CSS Sprites on iPad/iPod/iPhone

I recently lunched a web site that uses CSS Sprites. It works fine in Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 9+ and Chrome 1+, but it looks bad in iPad/iPod/iPhone. here is a web site http://show.oboz.ua/. It has one sprite image http://show.oboz.ua/css/sprite.png On IPod it looks far from perfect. ...

CDN of Common Web Site Icons

I am trying to distribute my image HTTP requests across multiple domains for faster performance. Is there a CDN (Content Delivery Network) out there hosting common web site icons (or sprites of icons)? Example: Like carrots, arrows, icons for file types, or 50% opacity of black png. FYI - I am NOT talking about hot linking. Yes, I u...