CSS3 Bling Presentation

Last night, I did a presentation at the Interactive Developers of Nashville meetup group about some of the interesting and creative things that developers can do with CSS3.

For those in the area who weren’t able to make it, and for those who aren’t in the area and would like to see the presentation and play around with some of the code I showed off, you can clone the CSS Bling repo on Github and the open the static/presentation.html file to see some simple examples of the topics I covered.

To see more advanced examples, you’ll need to serve the repo from a directory that can be accessed by a web server, as I use Less to compile some of the styles. Once you do that, you can open the static/background.html file, and the static/css/background.less files in your editor of choice. Then open background.html in your browser.

In the background.less file, you’ll see some commented import statements. Uncomment any of them and refresh your browser to see the changes in the page.

If you really want to see something cool, open up the iphone.html page in your browser and you will see a very nice image of an iPhone. Now look at the source for that page, and you’ll see some of the amazing power of CSS3, as there is only one DIV in the entire document and that image of the iPhone is built using CSS3 box shadows.

Leave a Reply