border-image: No more cutting up hell
Written by on August 13th, 2008 in Uncategorized.
Remember when you wanted a growable area with rounded-goodness and you had to cut up the image into a million pieces to have the top corners and the sides? Since then we have gotten nice effects to help us, and John Resig just posted on how Firefox 3.1 will implement what WebKit already has in the border-image CSS 3 magic:
Now you can create the iPhone search button that iUI contains, using the simple CSS:
-
-
border-width: 0 5 0 5;
-
-webkit-border-image: url(toolButton.png) 0 5 0 5 stretch stretch;
-
-moz-border-image: url(toolButton.png) 0 5 0 5 stretch stretch;
-
Here you see the reusable button on the left, that will stretch and become the button on the right:
Next up, rounding the borders themselves in all browsers (border-radius!)
Source: Ajaxian » Front Page
Original Article: http://feeds.feedburner.com/~r/ajaxian/~3/364021448/border-image-no-more-cutting-up-hell