[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 145
  • Last Modified:

should is use sprites

My navigation bar has a unique icon on each button with a color change on the button and icon.  I have tried playing with sprites but have been having problems getting it to work.  

Here is screenshot showing layout
http://screencast.com/t/mcP5f59rJX

Attached is the image I planned on using.  Although, maybe I should include the full color bar and not just the icon.  Again, not sure.  Looking for guidance from the powers that be at EE.
0
nsitedesigns
Asked:
nsitedesigns
  • 19
  • 17
  • 2
2 Solutions
 
GaryCommented:
Sprites would be better - what's the problem you are having with them, they can be tricky to get right sometimes.
0
 
nsitedesignsAuthor Commented:
Hi gary,

Well, since this is my first stab at it, I am running into alot of questions.
Is the sprite i create ok or should I reconfigure it to include the solid color button background AND the icon for both blue and marron buttons?
0
 
GaryCommented:
No create a transparent background.
If you ever change the color in the future you won't need to change them, also it gives you some leeway when positioning.

It's not clear from the image if you are changing the color of the sprite?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
nsitedesignsAuthor Commented:
If you look at the layout, you can get a better idea of the direction I want to go.  The buttons will all be blue with a blue icon on right of button.  When you mouse over button, the button will turn maroon and the icon will have a maroon hue.  I am not sure what you mean about creating a transparent image. Do you mean one simple coffee pot icon that is white?  If so, where does the sprite effect come in since the image won't shift.
0
 
nsitedesignsAuthor Commented:
0
 
nsitedesignsAuthor Commented:
Not sure if this is what you mean?
0
 
Dave BaldwinFixer of ProblemsCommented:
The sprite effect you're looking for is like Photoshop mouseovers except that instead of separate images, you use one image with all the variations that you need.  Then you position that image, the 'sprite' in the container, usually a <div>, to show the part you need at the moment.  The biggest advantage of sprites is that one image loads faster than a lot of smaller ones.  Google used to use a single sprite image on their search page for all the little graphics.  But they dumped that a couple of years ago.

The original article about sprites was from Alistapart in 2004: http://alistapart.com/article/sprites
0
 
GaryCommented:
Have your icons in one image, each below the other.
I wouldn't have multi colored icons , give them the color black and reduce the transparency that way the button will bleed through giving the icon a darker blue/red
For the background do the same thing but using white and reduce the transparency
0
 
nsitedesignsAuthor Commented:
My icons are all in one image.  So, I would only need one column on icons then (versus the 2 that are on there now) if you want me to have them bleed through.  I don't know why you want me to have them black when in reality they are a reduced transparency of white.

What are you referring to with the background?  Do you mean the blue button and the maroon button?  Your last post really got me confused more than i was to begin with actually!
0
 
GaryCommented:
If you color them black and reduce the transparency then they will appear as dark blue.
But looking at your screencast again it looks like they are a lighter shade of blue so color them white an reduce the transparency say 50%
For the background use white but with a transparency of say 80%
0
 
GaryCommented:
Oh wait that won't work
Is that lighter background required as well?
0
 
nsitedesignsAuthor Commented:
This is what the mouseover effect should look like:
http://screencast.com/t/qKjqyL3jzp

This is what a regular button should look like:
http://screencast.com/t/BbpRXcQz15xW

ALL buttons will have an icon.
Maroon buttons are the mouseover color
Blue buttons are default
0
 
nsitedesignsAuthor Commented:
you know what - maybe it would be best for me to not do sprites and figure out something else.  THis is  getting way too complicated - it was supposed to be easier!
0
 
GaryCommented:
Attaching a sample psd

And your css for the button would be

background: url("sample.png") no-repeat scroll 170px 0 / 30px 30px blue;

170px is the distance from the left
30px is the width/height.
0
 
GaryCommented:
0
 
nsitedesignsAuthor Commented:
thanks but i am still confused.  what about the icons?  each button will have a unique icon. what you provided is only the color.  Do I need to do a separate sprite for button and another for icon?  Ugh!
0
 
Dave BaldwinFixer of ProblemsCommented:
If your icons are semi-transparent PNGs, you can keep them as they are and just change the background color on the mouse-over / hover.
0
 
GaryCommented:
Because I don't have your icons.
Attach a few and I'll make a sample
Whats the dimensions of your button
0
 
GaryCommented:
@Dave
Thats what I was thinking but the icons and the icon background are different - as the background is lighter the icon can never be any darker than it
Though nsite never confirmed the lighter background is supposed to be there
0
 
nsitedesignsAuthor Commented:
Well, I have attached screen shots, png files and other related files a number of times. in this question  I am not sure what more you need. I think I will just give you both points and try and figure it out on my own.  thanks anyways
0
 
GaryCommented:
I need the actual psd of the icons not screencasts of what the button should look like
0
 
nsitedesignsAuthor Commented:
Here you go.
0
 
nsitedesignsAuthor Commented:
I wonder if something like this might work better....
0
 
GaryCommented:
Still waiting for the PSD's, did you forget to attach
0
 
nsitedesignsAuthor Commented:
Weird.  I did attach them.  I think something is goofy with EE.  I will send you the original sprite and a wide one again.
sprite-wide.psd
sprite.psd
0
 
GaryCommented:
This is how they should be
new-sprites.psd
0
 
nsitedesignsAuthor Commented:
Huh?  So, then how do I deal with the white over the icon?  Maybe I am making this harder than it should be and maybe for my first time with a sprite, this is kinda convoluted.

 If I do it this way, then I have to somehow create a white bar (for the icons) and deal with a blue and red button.  Is the white bar a wide border with a right margin?  

This is different way of doing sprites from what I have researched on the web. Granted there are a dozen ways to skin a pig.  Why is this preferred over doing the entire button sprites-wide.psd?
0
 
GaryCommented:
Have a look here, it's only a basic mock up

http://jsfiddle.net/u9n5h0ok/
0
 
nsitedesignsAuthor Commented:
i'll be dipped.  Looks pretty good.  I am not sure what this means though.  Can you tell me what this effects.

li:nth-child(2) i {
    background-position:0 35px
}
0
 
GaryCommented:
It controls what bit of the image to show (the vertical position)
For each LI you need to increase the nth-child
And for the background position increase it by 35px
e.g.
li:nth-child(3) i {
     background-position:0 70px
 } 

li:nth-child(4) i {
     background-position:0 105px
 } 

Open in new window

You may need to tweak the vertical position a bit
0
 
nsitedesignsAuthor Commented:
Ah, ok.  Let me play around with this a bit.  Thanks.
0
 
nsitedesignsAuthor Commented:
Here is new test page:
http://nsitedesigns.com/nsitedesigns/flipse/test.html

Can I ask one more question?  How do I add a bit of padding above the text and not have it impact the position of the icon?  I tried adding padding and marging to top of LI  but that  didn't work right.  It messed up the icons.

Thanks again!  After spending about 10 hours trying to figure this out, I had pretty much reached the end of my rope.
0
 
GaryCommented:
Add to li a {...}

   display: inline-block;
    padding-top: 5px;
0
 
GaryCommented:
Change all these
li:nth-child(3) i {
     background-position:0 70px
 }


to a negative i.e.
li:nth-child(3) i {
     background-position:0 -70px
 }
0
 
nsitedesignsAuthor Commented:
PERFECT!

As long as I am on a roll and you are feeling generous.....

Why don't the icons follow the order in the ps file?  For example, the second icon is of a home.  That should be for the Home button and it was the last icon on the ps file.  On this button, I only have it going down 35px.  Am I still not "getting it"?  I

li:nth-child(2) i {  /*restaurants*/
    background-position:0 35px
}
0
 
nsitedesignsAuthor Commented:
To clarify, the Home icon is displaying on the Restaurant button.  I set it to    background-position:0 35px yet this icon is the last one in the ps file?
0
 
nsitedesignsAuthor Commented:
WAHOOOOOOOO!!!!!!!!!

Thanks bunches and bunches!

Now, go have a Guiness on me!

Without question, the greatest invention in the history of mankind is beer.  Oh, I grant you that the wheel was also a fine invention, but the wheel does not go nearly as well with pizza.
--Humorist Dave Barry
0
 
GaryCommented:
:o)
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 19
  • 17
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now