Posts Tagged "css"

Css3 Om-nom-nom’s

Posted by on Jul 6, 2011 in Coding | 0 comments

I decided to start my own CSS collection of helpful classes and designs.

The initial page contains 3 table designs I scavenged from my previous projects, but the future will probably add more.

The code is @ github and the demo page is accessible here.

Live Demo

 

Creative Commons License
CSS3OmNoms is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Read More

Making the web experience smoother with loading fades

Posted by on Jun 15, 2011 in Coding | 0 comments

CSS3 transitions and jQuery animations have greatly affected the web experience. Following up on the idea, here's a quick snippet to make the webpage smoothly fade in/out on page loads.

When you click on a link, the page fades out, leaving only white behind, when the loading of the new page is complete, the page fades in again. A couple of things to note though: the trick will only be useful with really small pages, since loading large pictures leaves the user wondering what the hell happened since (s)he can't see any action. One of the principles of browser design is to show the content as soon as it's available, hence the page 'jumping' one sometimes sees with a slower connection. That said, only use it on cacheable, static and small pages.

First, hide the body of the page with CSS:

body { display: hidden; }

…and add the following JavaScript to hide/show the page. Don't forget to include jQuery first!

$(document).ready(function(){
    $('body').fadeIn('slow');
});

$(document).unload(function(){
   $('body').fadeOut('fast');
});

Update: After using the technique for a while, I noticed several problems with it. Firstly, what happens when the user doesn't have JS enabled? The page stays white. JS crashes due to syntax errors also cause failure with fadeIn. Secondly, if the page is large enough, the user might simply leave. A Loading… spinner would fix that.

Read More