Screenshot from webkit up top & IE9 down below.
border-radius, rgba, and box-shadow all seem to be happy. This is quite encouraging!
*I may need to see about my cleartype or font smoothing settings on this testing PC
almost 3 years ago
I heard IE9 type rendering blows away other modern browsers... why does it look so bad here?
@Chris Wallace: It could be the PC I'm using to test on... or my font stack.
That's what she said.
Nice, Is it just me or do the rounded corners on IE9 look better than webkit?
The border-radiuses don't look the same. It seems IE uses the same center to draw both the box's and the border's (I'm guessing it's a border) radius "circles", while WebKit doesn't.
@Perceval McElhearn: I think you're right
@Anthony Garand: I'd agree :)
Here's our code without prefixes for kicks:
box-shadow: inset 0px 0px 5px rgba(0,0,0,0.4), 0px 0px 0px 5px rgba(228, 59, 5, 0.2);
Getting nested rounded corners "right" (in Photoshop/Fireworks or CSS) is something that still needs to be written about — I've been meaning to for ages, but I'm not enough of a math wizard to explain in numbers what I know by eye.
All that aside, IE9 has been doing a fantastic job in my tests so far — it's already better than Webkit in a lot of small ways, like this border-radius example shows.
by Perceval McElhearn
Top bubble: WebKit doesn't use the same center to render the box's radius (where the black lines cross on the bottom left) and its shadow's radius (where the lines cross on the top right).
Bottom bubble: IE9 uses the same center to render the box's radius and its shadow's radius.
almost 3 years ago
I'm not much of a fan of WebKit's border-radius rendering. I feel like FF (and maybe now IE9's?) is much more robust.
Take for example http://elfboy.com/burger/ View it in FF and then in Safari or Chrome. FF is definitely better and more what I intended. (I know there are better CSS examples than this, but I can't recall them so I'm tooting my own horn, sorry)
In your shot the effect makes IE9 look slightly shorter/differently aligned.
@Dan - by nested corner write-up are you talking about the border radius in combination with the box radius?
@Dan - I'm sure you've written on the topic already? Or was it audio? Thinking it may have been the "Design Is In The Details" talk you did with Bryan?
@Philip Renich: to me, that's actually a pretty great example:)
@Dave: Someone's paying attention in class! ;) I've talked about it a few times, and Bryan and I did indeed include a small note about it that presentation, but I've never felt like I've done it justice.
If anyone here is good at figuring out simple equations, I would love to work out how to calculate the correct radii for nested corners, then write an article about it with numerous examples.
@Philip: Nice example :)
I meant "nested" as in: if you were to specify (in CSS or in a graphics app) two (or more) radii to achieve a similar effect as in Trent's shot but with, say, two elements both using border-radius (e.g. an img within a div).
When done correctly, the resulting space between corners (sometimes it's a border, but it's frequently white space between elements) should appear to be a consistent width from straight line to corner back to straight line (as IE9 does above, but not as Webkit renders the effect, where the distance is greater at the apex).
Too often, designers get this wrong, and you'll find many "nested" corners (I'm certain there's a better term for this) around the web created in Photoshop/Fireworks that use the same corner radius, which gives an uneven visual result.
@Dan, sure, I can help out with that. I enjoy that sort of math.
There is a version of IE9 where we can browse whereever we want now? Last I had played with it it was pretty locked down.
@Chris - When I checked, it didn't have an address bar but you could enter a URL via an open option in the file menu.
@Chris Coyier: Dave's right... Page->Open
Not much has changed... It's pretty minimal still with no date for a full beta release quite yet.
Thanks fellas, now I got a bunch more testing to do =)
by Philip Renich
If I understand you correctly (which I feel I am not) getting the nested corners to be correct isn't difficult. You basically just change the border-radius by the amount that it is padded from the inner box.
So here we have first of all Trent's example with the code he pasted in his comment. My shot is in Safari so the corners aren't correct, but they are in FF.
Below that are two boxes, one nested inside the other. They use the same border-radius (10px).
The third box edits the outer border-radius to 15px since it also has a padding of 5px. That padding is what causes the second box to not look correct.
All of this is up on a test page so you can look at the code.
Be-all-end-all is that it's simple to do, just take your internal radius add your padding and your result is what the outer radius should be. Were you thinking of something more complex?
PS - @Trent, your code has four pixel values on the second box-shadow, but if I'm not mistaken the spec only calls for three sets?
@Philip Renich: I believe the 4th number is the length of the spread.
Interesting, css3.info doesn't make mention of that. Thanks for pointing that out!
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter