Wednesday, April 25th, 2007
Rounded and Shaded Corners
Category: UI
You can see his demo at work, and you can add corners by doing this:
- .detail {
- display:block;
- margin-top:2em;
- padding: 0 1.1em 2em;
- background: url("rounded?bc=white&w=600&h=40&shadow=true&ah=10&aw=10&sw=4&o=.5") left bottom no-repeat;
- }
Related Content:
- RND
Rendering slide... - SHADE
Rayshade ray... - Analyst corner: security and compliance
In Analyst Corner we round up the latest papers from the research firms that cover the IT industry. This week, we focus on security and... - Analyst corner
In Analyst Corner we round up the latest papers from the research firms that cover the IT industry. This week we examine trends around server... - Highest acceptable latency to attempt a VoIP call over
3.8 rating from 37 votes
My eyes, my eyes – Why do i keep seeing black dots that don’t exist!!
Is there no code to look at?
…or am I missing something?
This particular technique involves generating the images on the server – so the code is there it’s just not in js. Anyone can view it to their hearts content though – http://svn.apache.org/viewvc/tapestry/tapestry4/trunk/tapestry-contrib/src/java/org/apache/tapestry/contrib/services/impl/.
Nope, no code. Seems like a pretty useless posting. After all, the OP is the first to mention that Google did it first.
Whoop-de-do! A dude named Jesse knows how to copy a good idea! Maybe some code would make this post a little more interesting?
Has anyone devised a solution that will create transparent images? Primarily, I am concerned with placing a rounded corner on an element that has a background image, as opposed to a solid background color. However, due to the way that IE handles (or does not handle) transparency, I have yet to find a solution that is truly viable.
just use CSS3:
http://www.the-art-of-web.com/css/border-radius/
sorry IE is ugly anyway:(
This seems like it may be a bit fragile, dependent on the users’ cache settings. If the browser is set to rebuild the page every time, that means the image function on the server is invoked every time as well. This might not be scalable on a large website. Having said that it is a nice idea since it works with no javascript and uses plain old CSS in the front-end.
Mike: The image generation logic caches the rendered images as well as setting / responding appropriately to the common browser cache header settings – so I think it should scale fine for most usages. It still has lots of things that need doing (I wimped out and used png at the last minute for instance – not very friendly for ie and also not necessary since the background color is an optional parameter) but overall I think google had a great idea.
I’ll just keep using CSS3 for my boarders. They look great in Webkit, OK in Firefox, and who cares about IE.
Doesnt work in IE6, would have been great if it did though.
Phill: Sure, no one is forcing you to use it. ;) That being said, I’m not impressed with the built in rounding provided by most of the browsers. It’s always too pixelated compared to the real thing.
It’s also probably not a good idea to ignore IE, unless of course you aren’t doing anything public facing.
Evan: Yeah I’m sure that’s a png thing. I’ll be adding support for regular gifs once I’ve had time to go back and turn the alpha stuff off. Ie6 should work fine then.