Method 1: If you are looking for a self-invoking transition then you should use CSS 3 Animations. They aren’t supported either, but this is exactly the kind of thing they were made for. CSS Demo http://jsfiddle.net/SO_AMK/VV2ek/ Browser Support All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-animation Method 2: Alternatively, you can use jQuery (or plain JavaScript; see the … Read more
The code you have is a white with low opacity. If something white with a low opacity is above something black, you end up with a lighter shade of gray. Above red? Lighter red, etc. That is how opacity works. Here is a simple demo. If you want it to look ‘more white’, make it less … Read more
Removing floats, and using inline-block may fix your problems: (remove the lines starting with – and add the lines starting with +.) Show code snippet inline-block works cross-browser, even on IE6 as long as the element is originally an inline element. Quote from quirksmode: An inline block is placed inline (ie. on the same line … Read more
It sounds like you want to use a transparent background, in which case you could try using the rgba() function: rgba(R, G, B, A) R (red), G (green), and B (blue) can be either <integer>s or <percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or … Read more
Is it a good practice to use many classes on one single HTML element? For example: I don’t mean that two or three classes on one element is bad, but how about four, five or even six?
There is not a Transparent color code, but there is an Opacity styling. Check out the documentation about it over at developer.mozilla.org You will probably want to set the color of the element and then apply the opacity to it. You can use some online transparancy generatory which will also give you browser specific stylings. … Read more
The solution is to use AnimationEvent listeners. Here’s my raw implementation: CSS • 2 animations (open, close) • 2 classes (opened, closed) • 2 states (overflow hidden/visible) opened and closed are always toggled at animationstart, while hidden/visible states are differently worked out on animationend. Note: you’ll see a #main-menu element: it’s an UL with transitioned … Read more
Create a container for your text content, a span perhaps. Expand snippet JSFiddle
A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change. Give the footer a negative margin-top: