CSS Sprites + Rounded corners. Introduction Yes, I know that there are thousands of tutorials regarding rounded corners with CSS, but anyway, I wanted to show you this way too. Hopefully, you will find it useful. It’s important to point out that this tutorial is quite advanced regarding CSS, but I’ll try to make it as simple as I can for CSS begginers. CSS3 is still not fully here, so until then, let’s keep our work W3C valid. Take a look at the demo | Download css sprites + rounded corners What are we going to do? My rounded corner version consists in making a containing div with four absolute-positioned divs inside, where the corner images are formed using a unique CSS Sprite.
What makes this technique cool? The ability to make rounded-bordered elements with fluid width and height. This technique, as I mentioned before, is combined with CSS Sprites. Step 1: Creating our Sprite Make a rounded rectangle in the image editor of your choice (I’ll be using Fireworks in this case). Step 2: HTML Code All done? HTML Code. Background repeat and CSS sprites / phpied.com. CSS sprites are a great way to improve the loading speed of your pages. One of the problems you might face with sprites is how to deal with cases when the background repeats. The rule is pretty simple: if you want the background to repeat vertically (top to bottom), place the images in the sprite horizontally (left to right) and make sure the individual images in the sprite have the same height.
For the opposite case: when you want to repeat horizontally, sprite vertically. Example » Demo You have three divs and you want to repeat their background vertically, so that the background takes the whole height of the div, according to the content. Source images: Singe image sprite: CSS definitions to make this work: Every image is 200px wide. The tree divs have IDs: my, my2, my3 Result Once again, the result Tested on Windows with IE7, FF, O, S. To Sprite Or Not To Sprite at Vladimir Vukićević. CSS Sprites have been around for a while, and keep coming up as a way to get blazing fast speed to your site. Steve Souders just showed off SpriteMe! At Velocity ’09 (speaking of — why use the CSS Sprite Generator or other server-based tools when you can use <canvas> and toDataURL and generate sprites on the fly?).
However, there are a number of misconceptions about CSS Sprites, the main one being that they have no downsides. The basic idea of CSS Sprites is to combine a number of images used on your site into a single image, thus reducing the number of HTTP requests that need to be made to your site. The image is rendered using a CSS background and background-position (which, incidentally, means that your markup becomes more complex; the image to use is specified in CSS, not in a plain <img> tag). The biggest problem with CSS sprites is memory usage. That’s not the right tradeoff to make for a website. The Mystery Of CSS Sprites: Techniques, Tools And Tutorials | CS. Advertisement CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development. Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements – particularly if you want to reduce your server load.
And if you haven’t heard of CSS sprites before, now is probably a good time to learn what they are, how they work and what tools can help you create and use the technique in your projects. What Are CSS Sprites? The term “sprite” (similar to “spirit,” “goblin,” or “elf”) has its origins in computer graphics, in which it described a graphic object blended with a 2-D or 3-D scene through graphics hardware.
Sprites were displayed over a static or dynamic background image, and the positioning of the sprite was controlled simply by the hardware controllers. The Pokemon Sprite Sheet, consisting of over 1000 graphic objects. Where Are CSS Sprites Used? Project Fondue | CSS Sprite Generator.