Get flash to fully experience Pearltrees
I'm fall in love with the new UI of Path . I really love the user interaction design like the "add menu". So, as I'm a front-end developer, I tried to recreate the same thing on my browser.
"Animating" with CSS used to be limited to hovering effects. With :hover and :focus pseudo classes we've been able to change color , size , background-color , position , and many other CSS properties based on user action. The :hover trick provides only two states - hovered and non-hovered - with only two keyframes: start and end, and no tweening between these states, creating a harsh and sudden transition. This isn't really animation.
background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
With the arrival of IE9, Microsoft has signalled its intent to work more with standards-based technologies. With IE still the single most popular browser and in many ways the browser for the uninitiated, this is hopefully the long awaited start of us Web craftsmen embracing the idea of using CSS3 as freely as we do CSS 2.1. However, with IE9 not being supported on versions of Windows before Vista and a lot of businesses still running XP and reluctant (or unable) to upgrade, it might take a while until a vast majority of our users will see the new technologies put to practice. While plenty of people out there are using CSS3, many aren’t so keen or don’t know where to start. This article will first look at the ideas behind CSS3, and then consider some good working practices for older browsers and some new common issues.
This article originally appeared in issue 210 of .net magazine - the world's best-selling magazine for web designers and developers. While the following list does not include all of the great new properties in the CSS3 specification, this selection of the top 10 will give you a great start with your front-end coding projects. They’ll save you a lot of time and effort. Note: with the exception of @font-face, neither IE6, 7 nor 8 (from here on referred to as “the older IEs”) support any of the CSS3 properties. IE9 supports several properties and will be indicated.