HomeОбразованиеRelated VideosMore From: LearnWebCode

CSS Sprites Tutorial

450 ratings | 40924 views
In this CSS tutorial we take a look at CSS Sprites. Check out my premium 9 hour web design video course: https://www.udemy.com/web-design-for-beginners-real-world-coding-in-html-css/?couponCode=YOUTUBE-HALF-OFF View Live Demo of Code: http://learnwebcode.com/tutorial-files/css-sprites-tutorial/ Download Files used in Video (.zip): http://learnwebcode.com/tutorial-files/css-sprites-tutorial/CSS-Sprites-Tutorial.zip Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need: http://learnwebcode.com/web-hosting/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode
Html code for embedding videos on your blog
Text Comments (37)
ReinierMatthews (3 months ago)
Lol. After all those years, your material still is a great reference in times my poor memory gets flooded with all the code and development. "hmz, forgot how it was. Let's ask Brad!" and watch a vid of yours. I know making videos is hard work and I wanted you to know (again and again) you're an inspiration and I owe you. Greets form abroad.
J0kuc (6 months ago)
1. Why are you using span instead of div if you're going to display it as a block anyway? 2. Why the text indent? You're not going to have text there so why bother?
Kean Sovai (1 year ago)
Thanks you a bunch!
everest108 (2 years ago)
Don't you mean down 120px, not up? Great video, and yes, I fucking learned something. :P
MrHuaquito (2 years ago)
it doesnt work
superjokerrr (2 years ago)
Does not work with li inside nav>ul
Kwisatsoundman (2 years ago)
I can't see why it wouldn't work for links placed inside an unordered list?! Unless I'm mistaken, CSS sprite technique works well with virtually any HTML element that can have a background-image (in other words, with any element that are displayed as 'block' and to which you can therefore assign a width and a height).
Jewelry July (3 years ago)
I don't understand how he knows the exact location of the icon he wants? How does he know that the house is 120 by 120? I understand how he is moving them but how does he know the exact pixel location of each icon?
Jewelry July (3 years ago)
thank you!
Kwisatsoundman (3 years ago)
+Jewelry July Because he created this image file in Photoshop (or whatever other image editing software) by using the "grid" feature (from the "view" menu) in order to position each element at a precise location in pixels.
Sapna Naveen (3 years ago)
This was Helpful. Thanks :)
7 Days in sunny june (4 years ago)
great video, thanks for the tutorial!
Derek Brown (4 years ago)
Right at 6:43 is what I was having trouble with. I just couldn't visualize what or why we added the -120px, in this instance for example, but it's because when the user hovers we will include the imagine at -120px to show that section of the image. At least I think. I am starting to get it.
LearnWebCode (4 years ago)
@Derek Brown Thanks! I had a similar issue when I was first starting to understand sprites, but you described what is going on perfectly! Creating your own demo / example always helps me fully understand something as well.
Derek Brown (4 years ago)
Oh and great video, by the way!
Stephen Ung (4 years ago)
Thanks for the tutorials, now I am confident to build a responsive website!
LearnWebCode (4 years ago)
@Stephen Ung That's great to hear - good luck with the new site!
MRTProblems (4 years ago)
Thanks alot! got it! ;)
Jason B. Lewis (4 years ago)
Great tutorial! Thanks!
very useful video. one of the most understandable that I have seen
hrblocked (5 years ago)
"Hope you feel like you learned something" sounded like "Hope you Fk'n learned something" haha. Good tutorial!
Naomi Butler-Abisrror (5 years ago)
This finally makes sense! Thank you for the tutorial.
LearnWebCode (5 years ago)
You're welcome! I'm glad you found the video helpful :)
Evan Wilson (5 years ago)
Thanks. 
Ernst Hammann (5 years ago)
Fascinating!
charliehrse650 (5 years ago)
Tutorial begins just after 4:15
MRTProblems (4 years ago)
so what. hahaha
Carlton Stith (5 years ago)
Your explanation really rocked! I have several images that I needed to use for a web site that I just built and I was having a difficult time understanding Sprites until I watched your tut.
RideShare REJJ (5 years ago)
This video simply ROCKS! thanks for sharing. really!
Gintas DX (5 years ago)
SpriteSheep :D
Gintas DX (5 years ago)
Why not simply using SpriteSheet offline CSS sprites generator for Windows? It will generate CSS code with all sprite positions.
17zu8 (6 years ago)
is it possible / sensible to create a picture gallery (only 3 or 5 images) with this? (so when you click on the image, the next one will appear)
Khair Attamimi (6 years ago)
Great and easy to understand straight-forward tutorial. Good job! I just got a few questions.. 1) For the contact image background property, can I use "url(img/sprites.jpg) top right no-repeat" instead of "-120px 0px no-repeat" ? Also am I correct to say the width of your sprite image is 240px? thank you!
PLEASE PLEASE PLEASE! HELP ME!?! How do i distort or condense my FONT to be 80% on the x axis??? please help me???
PLEASE PLEASE PLEASE! HEP ME!?! How do i distort my FONT to be 80% on the x axis??? I liked and SUBSCRIBED please help me
pcfreakout (6 years ago)
what editor are u using?
MickJnr7 (6 years ago)
I absolutely love your tutorials! They are so much better than the rest on YouTube!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.