Rounded corners are hot. They have been for a long time and still are. Recently things got a whole lot easier due to the fact that lots of browsers started supporting (their vendor specific prefixed version of) border-radius. One of the problems with it is that border-radius cannot be used on images. Tim Van Damme recently went over the possibilities to using rounded corners with images and developed a nice CSS solution for it. Javascript geek as I am, I took the liberty of making a tad bit more dynamic by creating a javascript enhanced version of his solution.
-
Recent Posts
Archives
- February 2012
- January 2012
- December 2011
- November 2011
- October 2011
- September 2011
- August 2011
- July 2011
- June 2011
- May 2011
- April 2011
- March 2011
- January 2011
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
- June 2007
- May 2007
- April 2007
- March 2007
- February 2007
- January 2007
- December 2006
- November 2006
- October 2006
- September 2006
- August 2006
- July 2006
- June 2006
- May 2006
- April 2006
- March 2006
- December 2005
- November 2005
- August 2005
- July 2005
- June 2005
- May 2005
- April 2005
- March 2005
- February 2005
- November 2004
- October 2004
- August 2004
- July 2004
- June 2004
- May 2004
- April 2004
- March 2004
- February 2004
- October 2003
Categories
Meta
Bram.us is the technical/geeky weblog of Bram Van Damme (nicknamed Bramus!), a 28 year old geezer raised in Deinze and living in
This is probably how Tim’s technique would be applied on larger websites with a lot of pictures. The downside of this approach (other than the fact it relies on jQuery) is that it causes FOUC.
Btw (for the sake of nit-picking): your script relies on jQuery, not just JavaScript. JavaScript !== jQuery.
No FOUC is present as the images already are in place. The only thing that changes when the DOM is loaded is that the borders then become rounded.
About the jQuery part: from the moment I enhance a site with Javascript, I rely on jQuery. Writing Javascript without a library is unimaginable (and a huge PITA) nowadays.
How is that not a FOUC?
When I think FOUC, I think links that are 11px, times not so new roman, #00F which then, on onload, magically change into <whatever you can imagine by applying some CSS>
But yes, technically speaking this is a FOUC, although I don’t experience this as one. The addition of the rounded corners merely is an enhancement: no layout jumps happen, no unstyled text appears, etc. – the built up layout doesn’t shift/blink/whatever when the rounded corners are added.
I agree with you, Bramus, about FOUC.
And this is a great tweak of Tim’s technique.
The only thing I have found is that if the image in question has a margin on it, then that margin won’t display when its opacity is set to 0. The obvious fix is to add the margin to an appropriate rounded selector as well. For example, I had:
#people img {margin-bottom: 5px;}
When my margin disappeared I got it back with:
#people img,
#people .rounded {margin-bottom: 5px;}
Great work, thanks.
Pingback: CSS3 Image Styles | Bram.us