Thank God...finally got someone on YT to explain sprites without complicating the stuff around....thanks for the clear explanation and keep up the good work! Subscribed already
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.
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.
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.
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.
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!
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).
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?
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 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.
Thank God...finally got someone on YT to explain sprites without complicating the stuff around....thanks for the clear explanation and keep up the good work! Subscribed already
11 years and this video is still great, thank you
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.
"Hope you feel like you learned something" sounded like "Hope you Fk'n learned something" haha. Good tutorial!
I absolutely love your tutorials! They are so much better than the rest on TH-cam!
“Just Google gimp…..editor. Gimp IMAGE editor”
Good catch. Could’ve traumatized many a css curious coder… or triggered a new fetish 😂
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.
This is one of t the best tutorials on the internet frr!
Great tutorial. Works even after 7 years of publishing it!
This is so clever and I wonder why no one talks about this anymore!
very useful video. one of the most understandable that I have seen
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.
Oh and great video, by the way!
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.
Where do you draw the sprites? Could you please suggest some softwares or provide links?
Thank You!
This finally makes sense! Thank you for the tutorial.
You're welcome! I'm glad you found the video helpful :)
Thanks for the tutorials, now I am confident to build a responsive website!
Stephen Ung That's great to hear - good luck with the new site!
great video, thanks for the tutorial!
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!
You are so good teacher Allah bless you with more knowledge and skill .
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)
This video simply ROCKS! thanks for sharing. really!
what editor are u using?
nice explanation, thanks
Great tutorial! Thanks!
Thanks. It was very useful to me.
how do i make the sprite sheet?
Awesome man
This was Helpful. Thanks :)
Fascinating!
Don't you mean down 120px, not up?
Great video, and yes, I fucking learned something. :P
Tutorial begins just after 4:15
so what. hahaha
Thanks alot! got it! ;)
Does not work with li inside nav>ul
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).
Thanks you a bunch!
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?
PLEASE PLEASE PLEASE! HELP ME!?! How do i distort or condense my FONT to be 80% on the x axis???
please help me???
Why not simply using SpriteSheet offline CSS sprites generator for Windows?
It will generate CSS code with all sprite positions.
Content are Not visible properly.
this man has a teaches more at Udemy so if you wanna learn more you can go there
Thanks.
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 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.
thank you!
SpriteSheep :D
it doesnt work
Sounds like Bucky from thenewboston. *Sellout Bucky* we call him 😁