The CSS 3 transition specification makes it possible to make very impressive animations with just a few lines of CSS. Here´s a quick example for your reference. Vendor prefixes are still very necessary at the time of writing but will probably be less important soon.
Here's an example of the box-shadow property using the inset directive.This will yield a drop shadow inside the element.
CSS3 brings us drop-shadow in text. Most browsers support it now but oddly IE9 still doesn't. Here's an example of the syntax:
I just found a nice practical example of ui button styling through CSS3 features such as box-shadow, text-shadow and border-radius.
If you want to prevent scrollbars from being hidden on MAC OSX Lion and always show the scrollbars on Webkit browsers (Chrome / Safari) on this version of Mac OS, you can add the following rule to your CSS to force the browser to always show the scrollbar.
CSS 3 allows us to add drop shadows using the box-shadow directive. The box shadow directive is for creating drop shadows on box-model elements, eliminating the need for background images or JavaScript solutions to achieve this effect. The box shadow directive is not for adding shadows to text
An example of the box shadow property used for creating an inner shadow effect:
This little script outlines all elements on the page several levels deep.
Apart from refreshing the page the refresh metatag can also be used to to redirect a visitor to another page:
Used to link to a named link on the page
The following bit is an example of how you can set multiple css background properties in one line of code:
CSS 3 finally delivers specifications for the rounding of corners. CSS 3 allows you to specify a radius for the corners of an element. This offers the promise of no longer having to use awkward rounded corner / border hacks based on images or CSS / JavaScript for such a simple graphic effect.
PPK (http://www.quirksmode.org/) summarized this problem on his post: Explorer z-index bug (http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug. html): It appears that in Internet Explorer (windows) positioned elements do generate a new stacking context, starting with a z-index value of 0, causing the lime-green box to appear above the yellow box. This is a serious violation of the CSS specifications, causing headages and a lot of misunderstanding of what z-index really does. While crediting Aleksandar Vacić for first reporting this bug, PPK doesn't mention Aleksandar's simple solution. Give the parent a position:relative and z-index:1..( http://www.aplus.co.yu/css/z-pos/)
IE6 doesn't support the min-width or max-width css properties. But it does understand this : (not W3C valid css)
CSS for scrollbars. Works in Internet Explorer only. Other browsers / w3c don't recognize and ignore these specifications
hide dotted outline in Firefox on clicked and active links
To provide a common cross-browser building ground on which you can apply your classes, a reset-CSS snippet can bring all html elements to a less ambiguous, more neutral lay-out starting point.
Use any of the following - see this article for xplanation - http://www.alistapart.com/stories/doctype/
Here are the conditions you can use:
| Item | Example | Comment |
|---|---|---|
| IE | [if IE] | The only currently supported feature is the string "IE", corresponding to Internet Explorer. |
| value | [if IE 7] | An integer or floating point numeral corresponding to the version of the browser. Returns a Boolean value of true if the version number matches the browser version. For more information, see Version Vectors. |
| ! | [if !IE] | The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression. |
| lt | [if lt IE 5.5] | The less-than operator. Returns true if the first argument is less than the second argument. |
| lte | [if lte IE 6] | The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument. |
| gt | [if gt IE 5] | The greater-than operator. Returns true if the first argument is greater than the second argument. |
| gte | [if gte IE 7] | The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument. |
| ( ) | [if !(IE 7)] | Subexpression operators. Used in conjunction with boolean operators to create more complex expressions. |
| & | [if (gt IE 5)&(lt IE 7)] | The AND operator. Returns true if all subexpressions evaluate to true |
| | | [if (IE 6)|(IE 7)] | The OR operator. Returns true if any of the subexpressions evaluates to true. |
| true | [if true] | Always evaluates to true. |
| false | [if false] | Always evaluates to false. |
Just a couple of examples of serif and sans-serif font family specifications.
This sets opacity in perty much any browser that supports it, including IE8