Css3: What is the fuss about

2,680 views

Published on

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

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,680
On SlideShare
0
From Embeds
0
Number of Embeds
404
Actions
Shares
0
Downloads
63
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Css3: What is the fuss about

  1. 1. CSS3 what’s the fuss about DavideDiCillo.com @DavideDiCillo Thursday, October 22, 2009
  2. 2. BORDER RADIUS -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; Thursday, October 22, 2009
  3. 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. 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. 5. RGBA AND OPACITY rgba: (200, 30 30, 0.2); opacity: 0.5; Thursday, October 22, 2009
  6. 6. ANY FONT YOU LIKE @fontface { font-family:‘Museo’; src: url(‘/fonts/museo.otf’) format (‘opentype’); Thursday, October 22, 2009
  7. 7. TRANSFORM -webkit-transform: rotate(45deg); Thursday, October 22, 2009
  8. 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. 9. TRANSITIONS div { opacity: 1; -webkit-transition: opacity 1s linear; } div:hover { opacity: 0; } Thursday, October 22, 2009
  10. 10. MUCH MORE Multiple Background Images Gradient Borders Columns Support Masking Text Overflow Thursday, October 22, 2009
  11. 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. 12. REMEMBER THIS? Only cause we can, doesn’t mean that we have to Thursday, October 22, 2009
  13. 13. THANKS! DavideDiCillo.com @DavideDiCillo Thursday, October 22, 2009

×