A basic overview on some of the new features offered by CSS3

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(‘/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 Overflow
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