How to make CSS3 { transition } to fade out?

Download source file
More info on: http://css3.bradshawenterprises.com/


<style type="text/css">
h1{
color:#7F0000;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
cursor: pointer;
}
h1:hover {
color:#666;
-webkit-transition: all 500ms;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
</style>


<h1>It works!</h1>

Slides from jQuery Mobile: Building Tools for a Changing Web - Mobilism

An easy explanation of jquery mobile utilization, below are those slides. Watch and implement.

CSS, jquery dropdown nav bar

Download source file

Details later ;)

The world is going through the deepest change in history

This 2 minute video will inspire+uplift you right now: Robin Sharma

CSS float: Vs display: inline-block; no whitesapce

Most of us have banged our heads against monitors when there was an issue with the CSS 'float'property. It’s become obvious these days to see most query hits on CSS float property. Since we want columned structure in UI, we have to use 'float' property unless we choose to use tables.

Recently I faced the same issue, but this time the issue was with the mobile website. To fix the issue I used 'display: inline-block;' property and it worked just the way I exppected, except........ IE7(wicked). As usual IE7 prefers eating stuff differently (rather in weird/uncommon way). To educate IE7 about 'inline-block' property I had to add these two properties -

'*display: inline;'
'zoom:1;'

Then I validated this page with W3C validation service and the result was Green! One more advantage of using inline-block is that you don't have to use unnecessary 'clear: both' DIV in your markup, whereas it's must with float property.

A fact to keep in mind: Every time you use ‘display: inline-block;’ property for columned structure, never forget to include ‘vertical-align:top;’ in your CSS, because browsers tend to position the LIs/DIVs/SPANs at the bottom. Also, browsers add some white space after every inline-block element (LI). To fix this issue we need give 'letter-spacing:-4px;' to the UL (parent element), and to LI we need to add 'letter-spacing:0px;'.

Browsers are kind of rivals of CSS float property. To avoid these unexpected issues let's not use ‘float’ property and start using 'display: inline-block'.

Demo: http://jsfiddle.net/3SHc8/

body, div height 100%

body, div height 100%?

This question has a very simple answer, here goes the code –

<style type="text/css">

html, body {
height: 100%;
}

</style>

You must define ‘html’ element along with body and write ‘height: 100%’ property in it. Once you have this, “doctype version” doesn’t matter, it works just fine.

Bonus - A complete & descriptive list of HTML5 elements

Enjoy!!

How great leaders inspire action

Why Apple is very innovative?