This week I’m attending the CSS Summit 2011 conference, a two-day online conference with presentations from CSS experts from around the world.
I attended the first CSS Summit two years ago, and it only gets better each year.
Lea Verou packed her presentation on CSS3 and gradients with example after example of what could be done with CSS3 gradients from multiple colors to striped backgrounds and more.
Here are my notes from her talk:
- Gradients in CSS with bitmap background images have excellent cross-browser compatibility, but decrease page load speed with an extra HTTP request, and large file size. Plus making changes can be tedious as hell.
- Need gradient to display on iPhone & iPad & older Webkit browsers? You need to use -webkit-gradient syntax.
- You can add multiple colors to CSS3 gradients: syntax: background: linear-gradient(silver, deeppink, black);
- CSS-based slide show by Lea Verou on Github
- You can even create pie charts using CSS
- CSS gradients in CSS3 are a lot easier to create and maintain.