Box-shadow is a pretty powerful property in modern browsers. With just six little values, you can make some really neat stuff. How much neat stuff, you ask? To find out, I set a little time aside each day to play with it. The result is 39 ridiculous little experiments that, due to whatever issues, can only be viewed in Chrome 11 or better.
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.
don’t copy code, remix it!
Now that we can use CSS transitions in all the modern browsers, letâs make them pretty. I love the classic Penner equations with Flash and jQuery, so I included most of those. If youâre anything like me*, you probably thought this about the default easing options: âease-in, ease-out…yawn.â The mysterious cubic-bezier has a lot of potential, but was cumbersome to use. Until now. Also, touch-device friendly!
Everything you could possibly want to know about CSS Background Properties, including default values, browser support, targeting the DOM, and what to look for in CSS3.
The Shapes of CSS All of the below use only a single HTML element. Any kind of CSS goes, as long as it’s supported in at least one browser.
This is a rather simple pure CSS trick you can use to style your blog post tags, usually placed at the bottom of the posts.
Currently in development level 3 of CSS includes new ways of styling and designing websites. In this project we explored them in an artistic way. Picassos “Guernica” served as the footage. The masterpiece was chosen in regards of the origin relation between our tutor Javier Roman Cortes and Picasso, both from Malaga. Inspired by CSS 3D Meninas, we seperated the picture into different layers and animated them. The CSS3-attributes work in updated browsers: The very perfect repeating animation is visible in Safari only, Opera animates without repeating, the hover effect without animation works in Firefox and Chrome.
Over the past couple of months, Iâve been hacking together some CSS3 tests. I did this to try to figure out what should be included in the upcoming fourth edition of the CSS Pocket Reference (and thereafter CSS: The Definitive Guide) and didnât plan to do anything public with them, but at this point, I figure what the heck. Maybe theyâll be of interest to others.
In this article, the focus is on whatâs coming: styling techniques youâll use in the immediate and near-term future. From styling HTML 5 elements to rearranging layout based on display parameters to crazy selection patterns to transforming element layout, these are all techniques that you may use tomorrow, next month, or next year. With partial browser support, theyâre all on the cutting edge of Web design.
The button is also a great place to showcase many of the new CSS3 properties in one place, which is another reason Iâm particularly taken with buttons at the moment. Through the use of box-shadow, text-shadow, border-radius, and CSS gradients, we can create highly polished interface components that donât require images.
this page shows a clearer overview of the implemented, prefixed properties, and their counterparts in other engines.