Replacements for spring site indexv1.css

[Forboding Angel]

For the mainsite,

Replace lines 91-93 in indexv1.css with:

Code: Select all

.learnmorebar { 
		background-image: url("http://springrts.com/images/notselected_learn.jpg");
		-o-transition:background-image 1s ease-in-out;
		-ms-transition:background-image 1s ease-in-out;
		-moz-transition:background-image 1s ease-in-out;
		-webkit-transition:background-image 1s ease-in-out;
}
.downloadbar  { 
		background-image: url("http://springrts.com/images/notselected_download.jpg");
		-o-transition:background-image 1s ease-in-out;
		-ms-transition:background-image 1s ease-in-out;
		-moz-transition:background-image 1s ease-in-out;
		-webkit-transition:background-image 1s ease-in-out;
}
.gamesbar     { 
		background-image: url("http://springrts.com/images/notselected_games.jpg");
		-o-transition:background-image 1s ease-in-out;
		-ms-transition:background-image 1s ease-in-out;
		-moz-transition:background-image 1s ease-in-out;
		-webkit-transition:background-image 1s ease-in-out;
}

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).

[Tobi]

DRY version of this pushed to http://test.springrts.com/ for testing

https://github.com/spring/spring-websit ... 26b7738623

Note: doesn't work in FF14, which happens to be the Firefox in Fedora 17.

[Forboding Angel]

hmm, image needs to be cached, otherwise it doesn't load until on hover. That's no good.

Add this to the css (preferably before the hover section (just for posterity)):

Code: Select all

.learnmorebar:before {
		content: url("http://springrts.com/images/selected_learn.jpg");
		width:0;
		height:0;
		visibility:hidden;
}
		 
.downloadbar:before {
		content: url("http://springrts.com/images/selected_download.jpg");
		width:0;
		height:0;
		visibility:hidden;
}

.gamesbar:before {
		content: url("http://springrts.com/images/selected_games.jpg");
		width:0;
		height:0;
		visibility:hidden;
}

Pretty simple little pre-caching trick. Should work.

Edit: It doesn't. Needs to be cached using an invisible div moved offscreen.

[Forboding Angel]

Ok, try #2,

add this to the css:

Code: Select all

.selected_learn-preload {
		background: url(http://springrts.com/images/selected_learn.jpg) no-repeat -9999px -9999px;
}

.selected_download-preload {
		background: url(http://springrts.com/images/selected_download.jpg) no-repeat -9999px -9999px;
}

.selected_games-preload {
		background: url(http://springrts.com/images/selected_games.jpg) no-repeat -9999px -9999px;
}

Then, in the header (preferably before the </head> tag) call these three divs like so:

Code: Select all

<div class="selected_learn-preload"></div>
<div class="selected_download-preload"></div>
<div class="selected_games-preload"></div>

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.

[AF]

Instead of just applying it to the background image you should also apply a transition to the elements themselves, using opacity. This will cover the initial fade in.

Using a CSS sprite would also help

[jK]

please no such hacks anymore, I spend hours to remove them from the html code ...
There is no need for empty fake divs, same as for ":before".

[Forboding Angel]

Fake divs are cleaner and faster than using javascript image pre-loading.

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.

[AF]

Fake divs are cleaner and faster than using javascript image pre-loading.

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.

[Forboding Angel]

This is the current site upon first visit:
http://www.evolutionrts.info/random/Nee ... load-1.mp4 (75 kb)

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.

[AF]

This code makes your frontdoor self retract

It needs to know somebody is there before it can retract

AF: Install Hinges

Something similar to this should do the job when adding to the original code:

Code: Select all

.learnmorebar { 
      opacity: 1;
      -o-transition:opacity 1s ease-in-out;
      -ms-transition:opacity 1s ease-in-out;
      -moz-transition:opacity 1s ease-in-out;
      -webkit-transition:opacity 1s ease-in-out;
}

[Tobi]

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.

[AF]

Right now you're fading the background of the div.

To get it to fade in on load, instead, fade in the div itself as well as the background image. So transition opacity, and background-image

[Forboding Angel]

Sandwiching divs is an ugly hack and should not be done. It also isn't proper css either for this purpose, so in principle, I protest using it in this manner.

Firefox will at some point implement background image transitions. When FF does, it will work. Chrome is #1 in the browser market for a lot of excellent reasons.