View topic - Replacements for spring site indexv1.css

View unanswered posts | View active topics



Board index » Spring » General Discussion

All times are UTC + 1 hour


Post new topic Reply to topic  Page 1 of 1
  [ 13 posts ] 
  Print view Previous topic | Next topic 
Author Message
Forboding Angel
PostPosted: 04 Aug 2012, 01:06 
Evolution RTS Developer
User avatar

Joined: 17 Nov 2005, 02:43
Location: Raegquitting Spring on 04/24/12
For the mainsite,

Replace lines 91-93 in indexv1.css with:
Code:
.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).
Top
 Offline Profile  
 
Tobi
PostPosted: 04 Aug 2012, 04:50 
Spring Developer

Joined: 01 Jun 2005, 10:36
Location: The Netherlands
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.
Top
 Offline Profile  
 
Forboding Angel
PostPosted: 04 Aug 2012, 05:46 
Evolution RTS Developer
User avatar

Joined: 17 Nov 2005, 02:43
Location: Raegquitting Spring on 04/24/12
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:
.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.
Top
 Offline Profile  
 
Forboding Angel
PostPosted: 04 Aug 2012, 06:18 
Evolution RTS Developer
User avatar

Joined: 17 Nov 2005, 02:43
Location: Raegquitting Spring on 04/24/12
Ok, try #2,

add this to the css:

Code:
.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:
<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.
Top
 Offline Profile  
 
AF
PostPosted: 05 Aug 2012, 05:14 
AI Coder
User avatar

Joined: 14 Sep 2004, 10:32
Location: Cookieland
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
Top
 Offline Profile  
 
jK
PostPosted: 05 Aug 2012, 05:28 
Spring Developer
User avatar

Joined: 28 Jun 2007, 06:30
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".
Top
 Offline Profile  
 
Forboding Angel
PostPosted: 05 Aug 2012, 13:01 
Evolution RTS Developer
User avatar

Joined: 17 Nov 2005, 02:43
Location: Raegquitting Spring on 04/24/12
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.


Last edited by Forboding Angel on 06 Aug 2012, 00:05, edited 1 time in total.

Top
 Offline Profile  
 
AF
PostPosted: 05 Aug 2012, 14:03 
AI Coder
User avatar

Joined: 14 Sep 2004, 10:32
Location: Cookieland
Forboding Angel wrote:
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.
Top
 Offline Profile  
 
Forboding Angel
PostPosted: 05 Aug 2012, 15:55 
Evolution RTS Developer
User avatar

Joined: 17 Nov 2005, 02:43
Location: Raegquitting Spring on 04/24/12
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.
Top
 Offline Profile  
 
AF
PostPosted: 06 Aug 2012, 14:27 
AI Coder
User avatar

Joined: 14 Sep 2004, 10:32
Location: Cookieland
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:
.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;
}
Top
 Offline Profile  
 
Tobi
PostPosted: 11 Aug 2012, 13:32 
Spring Developer

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.
Top
 Offline Profile  
 
AF
PostPosted: 12 Aug 2012, 00:38 
AI Coder
User avatar

Joined: 14 Sep 2004, 10:32
Location: Cookieland
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
Top
 Offline Profile  
 
Forboding Angel
PostPosted: 12 Aug 2012, 04:23 
Evolution RTS Developer
User avatar

Joined: 17 Nov 2005, 02:43
Location: Raegquitting Spring on 04/24/12
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.
Top
 Offline Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  Page 1 of 1
  [ 13 posts ] 

Board index » Spring » General Discussion

All times are UTC + 1 hour


Who is online

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

Search for:
Jump to:  
Powered by phpBB® Forum Software © phpBB Group

Site layout created by Roflcopter et al.