Css3: What is the fuss about
?
2 likes?910 views
The document discusses new features in CSS3 including border radius, border images, box shadows, text shadows, opacity, fonts, transforms, gradients, transitions, multiple backgrounds, and columns. It notes that browser support for CSS3 is still limited, with only around half of users able to render CSS3 correctly due to lack of support across browsers. While CSS3 introduces many new possibilities, the document cautions that just because something can be done with CSS3 does not mean it needs to be used, especially given current browser compatibility issues.
Css3: What is the fuss about
- 1. CSS3 what¡¯s the fuss about DavideDiCillo.com @DavideDiCillo Thursday, October 22, 2009
- 2. BORDER RADIUS -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; Thursday, October 22, 2009
- 3. BORDER IMAGE -moz-border-images: url(/images/border-image.png) 5 repeat; -webkit-border-images: url(/images/border-image.png) 5 repeat; -moz-border-images: url(/images/border-image.png) 5 repeat; Thursday, October 22, 2009
- 4. BOX AND TEXT SHADOW -moz-box-shadow: 10px 10px 25px #ccc; -webkit-box-shadow: 10px 10px 25px #ccc; box-shadow: 10px 10px 25px #ccc; text-shadow: 10px 10px 25px #ccc; Thursday, October 22, 2009
- 5. RGBA AND OPACITY rgba: (200, 30 30, 0.2); opacity: 0.5; Thursday, October 22, 2009
- 6. ANY FONT YOU LIKE @fontface { font-family:¡®Museo¡¯; src: url(/slideshow/css3-what-is-the-fuss-about/2319284/¡®/fonts/museo.otf¡¯) format (¡®opentype¡¯); Thursday, October 22, 2009
- 7. TRANSFORM -webkit-transform: rotate(45deg); Thursday, October 22, 2009
- 8. GRADIENTS -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9))); Thursday, October 22, 2009
- 9. TRANSITIONS div { opacity: 1; -webkit-transition: opacity 1s linear; } div:hover { opacity: 0; } Thursday, October 22, 2009
- 10. MUCH MORE Multiple Background Images Gradient Borders Columns Support Masking Text Over?ow Thursday, October 22, 2009
- 11. Firefox Internet Explorer Chrome Safari 3.2% 2.8% 48.0% 45.9% PROBLEMS ? Only half of the users can render CSS3 ? Different markup between browsers Thursday, October 22, 2009
- 12. REMEMBER THIS? Only cause we can, doesn¡¯t mean that we have to Thursday, October 22, 2009
- 13. THANKS! DavideDiCillo.com @DavideDiCillo Thursday, October 22, 2009