The result will be a really nice fade in/out effect for the colored image (transition lasts 1 second. 0.5 is nice too) on learn more, download and games. At the moment it uses a very abrupt transition.
The transition will be visible for all browsers except IE (IE will still function as it is currently).
It's kind of an ugly way to precache images (although there really isn't anything wrong with doing it this way, it's just not as pretty as I like), however, it is a LOT prettier than using js to precache images.
Basically, in case you don't know, this essentially displays those images, thing is, it's moved waaaaaay offscreen so you can't see them. This way, the images are loaded at page load and will already be in the browser cache when a user mouses over the 3 elements in question.
Edit: It's worth noting that the original hover images weren't cached, resulting in some pretty ugly rollovers the first time. This will eliminate all that.
Joined: 17 Nov 2005, 02:43 Location: Raegquitting Spring on 04/24/12
Using opacity wouldn't help (and opacity is an ugly hack anyway). Use the css as it's designed for what it is designed. Not to fake an effect on other browsers. Even on the default site it looks horrid on first hover because the image isn't preloaded.
Last edited by Forboding Angel on 06 Aug 2012, 00:05, edited 1 time in total.
Using opacity wouldn't help. Or are you talking about using opacity with background image? Yeah that would work. Problem is, the images need to be preloaded. Even on the default site it looks horrid on first hover because the image isn't preloaded.
jk is right. Preloading is completely unnecessary. Fade in the element you want to fade in, don't fade in its background image.
Anyway, I'm out. It's a nice effect, but AF knows everything even when he doesn't, and I don't feel like being a part of the circus. He can provide you with the relevant CSS to do it whatever way he likes.
Also, JK, these aren't "hacks". They are part of CSS.
Joined: 01 Jun 2005, 10:36 Location: The Netherlands
Pushed CSS sprite based stuff to test.springrts.com. No fading though, I don't see how to create that without an ugly hack like putting two divs exactly on top of each other each with a different background-image.
Also changed the Videos/Screenshots/Show more! buttons to CSS only.
Users browsing this forum: No registered users and 3 guests
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot post attachments in this forum