CSS3 . Info - All you ever needed to know about CSS3. Understanding z-index. How to use it The six color boxes (A, a, B, b, C, c) are "draggable", which means you can use your mouse to position them anywhere in the page.The input elements in the colored fieldsets below let you set z-index and position values for each one of these six boxes. These fieldsets are color coded, which means a fieldset's background color matches the background color of the box it is supposed to style. Set and reset Things to keep in mind: The z-index value is set once the input field loses focus or if the user presses the enter key while the caret is in that field, so you need to type some value and then TAB out of the box (or click outside of that box) for the new value to "kick-in".Dragging a box makes its position relative (note that the relevant radio button is "checked" only after that box is "dropped").The "set" and "reset" links above allow you to remove the negative margin applied by default to box A, B, C and also let you revert the document to its original state.
Markup Hint. CSS Three — Connecting The Dots - Smashing Coding. Advertisement As a web community, we’ve made a lot of exciting progress in regards to CSS3. We’ve put properties like text-shadow & border-radius to good use while stepping into background-clip and visual effects like transitions and animations. We’ve also spent a great deal of time debating how and when to implement these properties. Just because a property isn’t widely supported by browsers or fully documented at the moment, it doesn’t mean that we shouldn’t be working with it. In fact, I’d argue the opposite. Best practices for CSS3 usage need to be hashed out in blog posts, during spare time, and outside of client projects. Where Do I Start? One of my favorite things to do is to scan a list of CSS properties and consider which ones might work well together. Note: While Opera and Firefox may soon implement specs for many of the CSS3 properties found here, some of these experiments will currently only work in Webkit-browsers like Google Chrome or Safari.
Example #1: CSS3 Transitions. Europe, CSS & jQuery clickable map by Winston Wolf. Free interactive map of forty-seven countries of the European continent. It's a better way to convert a list of regions into a stylish clickable map without a Flash Player or any external plug-ins ..just a well known CSS sprites ..which works in all modern browsers ..even on the mobile devices as iPhone or iPad. ten maps: 250, 320, 430, 540, 650, 750, 850, 960, 1280 and 1450px wide (including gaps) with .psd source filesmultiple click modelist of agents / addressesonClick / onHover custom eventssticky or floating tooltipsvisible list of regionsmarked citiespreloader FreeDownloadcssmap-europe-v4-4.zipsize: 10.3MB | script version 4.4 Also available clickable maps of: Interactive maps made for web designers These clickable maps were created by using proven and well-known properties of old CSS 2.1 With a little help of jQuery (mostly to simplify the markup) the CSS style sheets available in the package, allows you to convert a simple list of links into the interactive map.
Accessibility.