CODEWITHSUNDEEP
cssimageperformancebuttoncss-sprites
Kris
Kris

Reputation: 575

Creating buttons with different images and CSS

I got kind of a tricky question. I want to create some buttons which look a bit like this.

enter image description here

Now as you can see all buttons share the same background, a rounded rectangle, and inside some different pictures and text.

So should I just make a huge spritemap with all buttons or is it better (for performance) if I create a link with the background picture of the rounded rectangle and then place the images and text inside using CSS?

Upvotes: 0

Views: 959

Answers (3)

sheriffderek
sheriffderek

Reputation: 9043

I would suggest using compass or something like that to make the sprites so that you can have 2 resolutions for high dpi screens. As for the rounded rectangle, you would just do that with CSS and then position the background image inside of it. --- FIDDLE --- On the other hand, if this isn't a site for a nursing home or small children, you might want to just use icon fonts. I don't know how much a little drawing of a picture frame really has anything to do with uploading an image.

HTML

<a href="#" class="box">
    <div class="sprite-icon"></div>
    <h2>Add user</h2>
</a>

CSS

.box {
    display: block; /* because it's a link and we want to put things in it | could be inline-block*/
    text-decoration: none; /* remove default */
    color: inherit; /* remove default */
    width: 8em; /* arbitrary */
    border: 1px solid #333; /* backup */
    border: 1px solid rgba(0,0,0,.2);
    text-align: center;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    padding: 1em;
    box-shadow: 1px 1px 5px 2px rgba(0,0,0,.1);
}

.box .sprite-icon {
    display: inline-block; /* as to center */
    width: 6em;
    height: 6em;
    background-image: url("http://placekitten.com/120/120");
}

.box h2 {
    margin: 0; /* remove default */
    padding: 0; /* remove default */
    font-size: 1em;
    font-family: arial;
    color: #2695dc;
}

Upvotes: 2

sheng
sheng

Reputation: 1372

Google just uses one giant image with many icons because that is better for performance. Combine everything in one giant image unless you're feeling lazy.

Really, though, you could do the border radius and box shadow with CSS.

Upvotes: 0

James Lai
James Lai

Reputation: 2071

Create the button, including the text, gradient, border, drop shadow, inner box shadow (the white highlight) with css, and place the image in the middle using a sprite map. You'll need to space each spite fairly distant from each other, but it should work well.

Once you've created the spite map, I would strongly suggest running it through ImageOptim.

Upvotes: 0

Related Questions