Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Rounded Corners Everywhere

753 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Rounded Corners Everywhere

  1. 1. Rounded Corners Everywhere Scott Olmsted http://www.railsrescue.com
  2. 2. Problem: replace Photoshop objects with styled text showingrounded corners and box shadows
  3. 3. Solution: CSS3li { -moz-border-radius: 5px; -moz-box-shadow: 0 1px 3px #999999; -webkit-border-radius: 5px; -webkit-box-shadow: 0 1px 3px #999999;}
  4. 4. Instant Web 2.0:Text + CSS3 styling
  5. 5. Problem: browsers withoutCSS3 border-radius support: IE
  6. 6. Solution: CSS3 PIEhttp://css3pie.com/
  7. 7. One file and a little styling—li { behavior: url(/stylesheets/PIE.htc); border- border-radius: 5px; box- box-shadow: 0 1px 3px #999999; -moz-border-radius: 5px; -moz-box-shadow: 0 1px 3px #999999; -webkit-border-radius: 5px; -webkit-box-shadow: 0 1px 3px #999999;}
  8. 8. —and IE behaves like a “modern” browser
  9. 9. Plus an alternate way to callli { behavior: url(/stylesheets/PIE.php php); php ...}
  10. 10. Thankyouthankyouverymuch

×