Your SlideShare is downloading. ×
0
Css3: What is the fuss about
Css3: What is the fuss about
Css3: What is the fuss about
Css3: What is the fuss about
Css3: What is the fuss about
Css3: What is the fuss about
Css3: What is the fuss about
Css3: What is the fuss about
Css3: What is the fuss about
Css3: What is the fuss about
Css3: What is the fuss about
Css3: What is the fuss about
Css3: What is the fuss about
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Css3: What is the fuss about

2,434

Published on

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

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,434
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
62
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×