CSS Tutorial: Better Nav Image Replacement

CSS Tutorial: Better Nav Image Replacement

Posted by Dmitry on November 7, 2007 | Popularity: 1%

Elliot Jay Stocks wrote about how to create a good-looking navigation system with some clean, simple, and semantic code. Most importantly, it only used one image file; a technique often referred to as ‘CSS sprites’.
Read full article.

Last posts by Dmitry

Electromagnetic Leak - Jul 4th '09
Alexander Chen - Jul 4th '09
NID AND SANCY - KIDZZ - Jul 3rd '09
World's Ugliest Dog Contest - Jul 2nd '09
Seth Siro Anton Photography - Jul 2nd '09

Posted under: Tutorials

Share this post with: Del.icio.us • Digg • StumbleUpon • Reddit • Technorati • Google • Yahoo

Don't miss:

You can make stunning Flash websites for free!

If you like this, then you might also like:

← Eric Collet | Stubbings →

Design You Trust is an open public, daily-updated and one of the World's top design blogs and resources. Feel free to register and enjoy your stay!

Members login:

Remember me | Forgot a password?
or read Rules, Register and post!

Try Search to Avoid Duplicate Posts

DYT Sponsors
Advertise with Design You Trust!

CSS & HTML for Your Designs	Friendly CMS for Designers
Online Digital Type Foundry	Over 7 Million Royalty-Free Stock Photos

Interested in advertising with Design You Trust?

World's Top 50 Art Sites: Design

Follow this link and make an order. + FREE lifetime EXTRA BONUS: advertising in RSS feed for every DYT ad buyer.

Everything

It's easy!

Conde Nast Traveler Magazine Campaign
gonz: true.

Editorial & Cover // 90+10 // Adidas House Party
Deewan: Que grandes Tato Piatti y DJ Margot!

Conde Nast Traveler Magazine Campaign
Martijn: The reflection of the shoe is wrong. That is really a beginners mistake. You should actually see a bit of the bottom of the shoe … hemmm …

Nike promo
Aviance: Nice! Could you tell what’s the of the sound track playing background? Thanks

LAVAL 25.06.2009 timelapse
Arsart: Just amazing! Beautiful work, but something is definitely wrong with a sewer system in this lovely town :)

Young Barack Obama
Seven Ft: I knew I liked him but now I like him on a whole new level.

Barrel Monster
Hermann: It looks pretty stupid … I’m glad they have arrested him.

“Last Day Dream” (2009) by Chris Milk
Bubba: It bothers me that the dialogue the artist decided to put in was an expletive, when the whole rest of the story was told through imagery. If the punch was going the other way, ie. the view was as if you were punching someone, what would the words have been? @ Thomas: I agree that I am left with an incomplete feeling after watching this. Maybe that is the artist’s intent? I wish there were at least some scenes in this that...

“Last Day Dream” (2009) by Chris Milk
WilliamK: I’m so glad that being punched out by Pauly Shore isn’t one of MY memories :P

Photographer Aset Geroeva
geroeva: omg )))))nice to see here my works thnks)

Malphrus Cameron Village Sewer Blob
John Doe: maybe another virus AD, like Net10’s no evil?

WHY MURRAY WON’T WIN WIMBLEDON
what the hell?: seriously now.. who the fuck cares about sport ? its a DESIGN website….

Gaston Caba
den7829: Amasinf thing, thanks for sharing!

Young Barack Obama
daomid: these comments have nothing to do with the pictures . Or I am High! Or both! f…..k D. Chaney

Malphrus Cameron Village Sewer Blob
Sidimar: Yes, What the fuck is that????

Start - Loudmouth Cuts (Sydney)
Thugz Bunny: THEY ARE AMAZING! Are they for sale? If so let me know!

“Last Day Dream” (2009) by Chris Milk
Garrett: @ Thomas I’m no expert but I think the “blinking, or processing gap between scenes” are supposed to represent the last few heartbeats of the daydreamers life. Like i said not an expert. @ Chris Milk for what it’s worth I think it’s great.

WHY MURRAY WON’T WIN WIMBLEDON
Arsart: Crap!

Young Barack Obama
anyone: All these hateful comments. But seriously how are we going to get out of the 8 trillion dollar debt that the devil (the bush cabinet) put us in. When it boils down we all need to stop our dependency on commodities. But this country is full of sleep walking consumers so we wont stop. Poor Obama… Because of the moral and economic turmoil we are in, the whole world hates us, in my eyes, we are the weakest nation and will soon suffer because of the greediness that...

Ffffound….where?
gonz: ow, i would like one very much! genial.representa[@]gmail[.]co m thnx very much!

Young Barack Obama
jane: Where were you assholes complaining about money when Bush was spending two billion dollars a week on a war that should have never been started? Bush is the reason for the mess we’re in, and yet people aren’t even giving Obama a chance. It is pretty obvious how ignorant Republicans are. Sorry, I refuse to take anyone seriously who constantly talks about drinking koolaid or wild spending when the previous president they voted in was the most irresponsible,...

Dana@LTRESS
skeyto: Nice girl! And hair excellent.

Daniel Laine’s Fantastic Work on African Kings
Knowledge: Maybe you should declare yourself a fuckhead too… Quit being ignorant and show some respect for the culture that represents these people.

Daniel Laine’s Fantastic Work on African Kings
jojo: What a joke, lol….. maybe I will declare myself king too, lol

Scratching the Surface
Nicolette: A lot of work was put into this wall, and it looks amazing. A similar effect can be achieved at home by creating a white room, and printing the shadows on, but it wouldn’t look nearly the same. Nicolette http://www.furnitureanddesigni deas.com/

Web Design Trend Hunting - The Messy Desk: Examples & Best Practices
matthew: Really great information on web designing best practices. Thanks for sharing.

Synesthesia
ruminigi: Ha! So excellent collection for job! They are filming a comedy? )))

Stop imagining what it smells like and just get rid of it.
Leinehed: Slightly offensive, I wonder if it will contribute to a positive or negative buzz. Thoughtprovoking nevertheless.

LC-A+ Pictures
CSUSER: Look at the dates on the post: http://img189.imageshack.us/im g189/4544/fubizisjumpingpostst hen.jpg

The Beatles Rockband
CSUSER: Try Search to Avoid Duplicate Posts.

DYT & UPrinting.com Business 250 Cards Giveaway!
business cards printing: This free business cards printing is a great idea. Business cards are really your one-stop marketing tool. It Is very effective in widening your client base and it facilitates easy recall.

Up the new Pixar
CSUSER: Try Search to Avoid Duplicate Posts.

The Girl in the Apple Tree
burabas: nice!

LC-A+ Pictures
CSUSER: Jumping posts is not cool.

The Beatles Rockband
CSUSER: “Try Search to Avoid Duplicate Posts”

Ffffound….where?
gabriel: annnnnnd, an other one? peyregabriel@gmail.com Merci Beaucoup!

Tribute to Michael Jackson
misa: nice work

face
hazi: http://www.humanart.cz/portfol io/michal/dila/

Russia’s Biggest Graffiti
bruno: Amazing work, well done.

Andy Gilmore
markedman: I love his work.. Andy’s Flickr streams have a lot of his work: http://tr.im/q8vX

Amazing Pixel-Art Map of Hong Kong
markedman: That’s pretty amazing, you could easily spend an hour or two on this one. Too bad I don’t know the area, would be fun to know how accurate the map is.

face
Alice: I love this! Would be great to have the source so I could see more…

“Last Day Dream” (2009) by Chris Milk
Grant: love the originality of this short film

Tribute to Michael Jackson
Carl Platon: Beautiful! Visit http://svrta.org

Young Barack Obama
archane: STALKER!!!!!

Tribute to Michael Jackson
famous guy: great work

insight
Robin Bastien: These are neat! is that soil? +digg!

Belgacom TV Ad: Who has taken my peignoir.
mijiru: Wow, if you’re going to post this, you should post the original not the French dub. Part of the joke (that’s now lost) was the Antwerp dialect mixed with English, but not French since the languages have too much similarities and makes the thing sound like a bad accent.

face
carlos b: Nice illustration. Do you have the source?

Young Barack Obama
db: Gotta love the right wing conservatives… “STONED” is he stoned, or are you? Just can’t get over the fact that “W” gave the Whitehouse away, with all the undying support of the GOP, Wall St., GM, Ford, Chrystler, The Religious Right, and let’s not forget, the ever supportive hands of DICK Cheney. I would be remiss if I didn’t also give credit to John McCain for his help in getting Obama elected, by selecting Sarah Palin as a...

Free Tibet
Christopher Cox: That’s not from Creative Roots, that is from my print portfolio: http://www.changethethought.co m/work/print/

Picasso’s Light Drawings
MANUEL ALEJANDRO: ESTA ES DE LAS MEJORES FOTOS DE PICASO, MUESTRA LA ESCENCIA DEL ARTISTA

Daryl Banks
MANUEL ALEJANDRO: me gusta mucho la mezcla se lo colores y las texturas

Saad Moosajee - http://saadart.com
omnimesis: GTFO

Print Ain’t Dead poster/print
Mike: Print may still be breathing, but we should do our best to snuff it out. Any designer who actually advocates the proliferation of printed media is short-sighted. It is markedly inefficient, increasingly ineffective, and most importantly, environmentally irresponsible.

Native Americans
budbuddy: Funny how the first five pictures look like something you might find in a gay coffee table book, “Working men, and why they are so hot” or something like that. Supports my belief that most right wing conservatives are really closeted gays (just like Ted Haggard and Sen. Larry Craig). Yeah, I know the truth hurts.

Native Americans
son: Inevitable

“Last Day Dream” (2009) by Chris Milk
Thomas: Nice idea, but poorly done. There are like 7-9 scenes spanning a lifetime? What’s with the blinking, or processing gap between scenes? I don’t think this should be praised but rather, encouraged to be completed. As far as I’m concerned what played here was nothing more than what the artist should have as a core concept so he doesn’t forget what he wants to do with it. If this is really the final product/finished...

Michael, you thrilled the world.
EMar: I cant believe he is gone….

“Last Day Dream” (2009) by Chris Milk
Scene360: I’ve love to see a presentation of his. I live in Portugal, but wasn’t able to make it to the fest.

The Story of Kikeino socks
Gladys: Nice one!

Portfolio of Camelia Dobrin
Christian Louboutin Shoes: Very complex pattern ah! Very artistic! !

wehatetrends
Christian Louboutin Shoes: why not call it wehateweb2.0 then, now thats something I would sign up for……

Antonio Felaco as Anfex
Christian Louboutin Shoes: ANFEX its name is it? Ah cute

Ffffound….where?
Christian Louboutin Shoes: Please if anyone can send me an invite please. Greets from Chile .

Michael, you thrilled the world.
Dmitry: RIP, King.

World’s Most Counterfeited Fashion Brand
Christian Louboutin Shoes: Everywhere in the LV, a bit mean！

Michael, you thrilled the world.
Carl Platon: May you rest in peace, Michael. http://svrta.org/?p=333 <–

Saad Moosajee - http://saadart.com
Louis Vuitton: What is? http://nbimg.dt00.net/pnews/al l4yourfun.com/345315_b.jpg

Saad Moosajee - http://saadart.com
Michelle: ohsum! absolutely love the first one ^__^

“Last Day Dream” (2009) by Chris Milk
Arsart: Saw Chris live at OFFF 2009 festival in Lisbon - very interesting presentation http://designcollector.net/off f2009/en/first-day

He is alive… in our hearts
Arsart: http://news.bbc.co.uk/2/hi/ame ricas/8119951.stm

Young Barack Obama
Ryan: Hey con-spear. Crawl back in your fucking hole you goddamn ignorant bastard. Stop fucking complaining and go suck off the GOP a little more. I know its hard to speak with the lingering taste of primordial semen stuck in between your teeth, but just save it for your charlatan comrades and keep it off of the internet. I am personally so exhausted with the republican and democratic parties, but if you cant think of anything better to say other than that, then maybe the...

Young Barack Obama
Zach: S T O N E D… very nice…

Beardsmith
arepa182: i love this competition! the portraits are stunning… cool post

Web Propaganda
under-pop: Cool stuff!!! Ha-ha!

“Last Day Dream” (2009) by Chris Milk
Adam: Very scary! When i die i think i will see these things. There will be nothing in there that i ever read in a newspaper. or saw on tv. I’m 34 and i already have numerous things that stick in my mind due to their intense emotional value. Which leads me to believe that feelings are far more powerful than we know. And our feelings can not be fooled by marketing. i’ve seen heaps of coke and mcdonalds advertisements that try, but...

Young Barack Obama
YGCB: A lot of people here seem to be infatuated with Obama and think he can do no wrong. Just because he is black and a Democrat does not make him the Messiah. Aside from the one-line insults, most of the people criticising Obama are making genuine arguments to which your only response is “racist” or “stupid Republican”. It is pro-Obama commenters that are bringing race into it by assuming that anyone who criticises Obama has a racist agenda. After...

The Byzantine Empire
Arsart: tis amazing video

A Real Giant Anaconda found
mnasir: It is a python. Where they found it? Look like at south-east asia.

GIRLS LOOK HELLA HOT WEARING DAISY DUKES.
bowler: old fashioned Daisy dukes

Young Barack Obama
technosexxual: You idiots… This IS bud. You can tell right away… He’s stoned as hell. Look at his eyes.

Young Barack Obama
摇滚帮 ROCK BUNCH: I wish our president is cool as Obama.

Young Barack Obama
Jenny: Is that a cig or a doobie. LOL

Young Barack Obama
DJinx: He was 18 when these pics were taken. Who cares if it was a joint? I’m the same age as Obama, and I know I was a total moron in 1980 and there are pics of me that, when seen through the prism of time and maturity, are scary/funny. That’s all this is, an 18 yr. old kid posing for a camera trying to look cool. It doesn’t make him a ‘looser’ it makes him normal.

Luigi di Silvanni - Leave Duff and Carry On
Allu: Great! I´ve seen the site. Clean, minimistic, nice images. Really like the colors you picked for the posters. Keep showing us more stuff.

US Dollars Re-Design is Coming!
Georgios L: Its very dull. 98527 lines on a piece of paper. Come on guys let’s get a little more creative for our paycheck.

Neda Salehi Agha Soltan
47: You are worrying me and NEDA’s family. This such thinking is very dangerous. You are really far from what you saying. Im sorry for the WORLD.

Imaginary Friends Studios
foo: Good job!

DYT & UPrinting.com Business 250 Cards Giveaway!
Uprinting.com: Thank you for participating in our giveaway! We truly appreciate the support. For any of you who have a blog and would like to host your own giveaway, apply for blog sponsorship @ http://www.uprinting.com/blog- sponsor-program/ Also, check out our latest Sales and coupons @ http://coupons.uprinting.com/

Neda Salehi Agha Soltan
chris: I read it as “Neda… Never - We Will forget you” because of the colors/layout. Also - something is up with the CAPTCHA. I am using Safari, the text box clearly says “GSUZ” but the audio says “KWME”. I had to try to post 3 times. The audio one was correct the third time.

Young Barack Obama
FrankO: cimmaron on June 23rd, 2009 @5:24 pm Says “Our former leader was just a drunk, insecure fratboy who wanted to outdo his brother jeb just to please his dad. Id take an ivy league weed-smoking leader anytime.” Let me guess Mr. Intelligent. You learned that little bit of information from watching a movie called “W”. This is what we called well educated these days in America. The more TV and movies you watch the more intelligent you become. After...

Young Barack Obama
FrankO: “fro + cig. = total looser sorry liberals” spelling “loser” as with two O’s = total moron. Sorry, republicans. Liberal taking the time to do a post with a misspelled word and then making it appear it was a republican= Loser without a life. Don’t worry Obummer will make sure you continue to get your welfare checks. Being a total MORON is a step up for your kind.

Young Barack Obama
FrankO: This freak has been elected as president of the USA? Am I having a nightmare and just can’t wake up or is this the New Twilight Zone…

Young Barack Obama
Bob barker: Well it seems to me that most of you guys are in a star gaze over Obama. Whats more important to me is how much money i get to keep at the end of the day not if the president of our country looks cool and talks a big game. I also do not like losing freedoms in which our four father so selflessly provided. Also he says hes going to change health care so that the 47 million people that do not have it can have it. I don’t have a problem helping people but what...

Neda Salehi Agha Soltan
MarkyD: You’re just as bad a CNN or FOX NEWS. You deleted most of my first comment. Then left in my words ‘This is sad’ as if i was speaking of the atrocities taking place in Iran, whereas I was really referencing the poor design. You’re taking my words and just reshaping them to fit your needs. This is worse than censoring. You need to go take a look in the mirror. See that it’s people like you that prevent real growth and change in this...

Neda Salehi Agha Soltan
MarkyD: Exactly. Obama isn’t visiting this blog. and that poster isn’t going to wake him up. he knows what’s going on and is being very careful to not do further damage. maybe you guys should read more news and less rhetoric. But anyway, this is a design blog. That’s why people come here. to view and discuss design. Poor design is not going to wake anyone up, and that’s the subject of our comments. And i want you to think hard about what...

Neda Salehi Agha Soltan
joe: Horrible typography…this could’ve been executed much better. Obama doesn’t need a Graphic Designer to remind him of what’s going on over there, he has Twitter doing that already.

Neda Salehi Agha Soltan
minipaintset: Good job at censoring this blog.

Neda Salehi Agha Soltan
47: Im so sorry for you guys. Young innocent people are dying here. You keep talking about graphic and style??? This effect and its very low quality is because of source of the movie. That movie was taken on the scene of crime with a low quality cellphone camera. This is a frame from that movie. And designer (THAT IT IS NOT ME! I JUST LINK THAT!) wants tell President Obama something and REMEMBER him that WE ARE WATCHING HIM, TOO!

3d 72+ 2009 abstract accessories Ad Add new tag adidas ads Advertising afflictedyard after effects amsterdam anfex animals Animated GIF Animation Apparel apple Architecture argentina Art art direction artist artwork australia B/W Barack Obama Barcelona beauty Been-Seen berlin bike black black and white Blog blue book brand branding brazil buy Calendar campaign car cards Cars cartoon cd chair character Character Design characters china clothing Colectiva collage collection color colors colour comics commercial commercial illustration Competition computer concept contemporary contemporary art contest cool cover creative Creative Contest css custom cyrillic dance design Design Competition designer design has no name dezign dhnn digital digital art drawing drawings Eco-friendly editorial Environment event exhibition experimental exposition Fabrik Project fantasy Fashion Fashion Illustrations film fine art flash flickr Font Food france free french fresh Fun funny furniture Future gallery game geek geometric germany girl girls graffiti graphic Graphic Design graphics green hair hellovon Helvetica hip-hop HUGO Create ideas Identity illustration Illustrations illustrator illustrator portfolios illustrators portfolios ink Inspiration installation Installations interactive interior Interview iPhone ipod iran Istanbul italy Jamaica japan japanese Kanye West Kate Moss kulte lamp Lego letterpress light lightform lighting lightpulse links Logo london Luxury mac magazine manipulation masks mexico milan Minneapolis Mixed Media model Modern Art Motion motion graphics movie mtv multimedia Music Music Video My Modern Met My Modern Metropolis nature nerd new new york nike nude Obama oil Okarola OpenType Orgut Cayli original art portfolios Packaging paint painting paintings paper paper art paris pdf pen people performance persian peter dean rickards photo photographer Photography photo manipulation photos photoshop Poland politics portfolio portrait portraits portugal poster poster design posters president print Prints Product Product Design project retro robot robots rock sculpture sculptures self-portrait Sexy shapes shirt shop short film showcase Skate skateboard sneakers sound Space spain stencil stop motion street street art studio style summer surreal sweden t-shirt t-shirts Technology tee tee-shirt tees Terry Richardson textile theispot Threadless tokyo tokyocube Toys tshirt tshirts tv Twitter Type typo typography u.s.a. Urban vector Vernonmac Video vintage visual visual art wallpaper watch water Webdesign web design Web Design Website weekly white woman wood yay monday zek

Last posts by Dmitry

Don't miss:

If you like this, then you might also like:

Who Are You: (required)

Email: (required, will not be published)

Website:

Your Comment:

Members login:

Most Popular Posts

Try Search to Avoid Duplicate Posts

The Bloggers Network: