Desk

Buttons in IE9

by Trent Walton Pro | August 11, 2010
Shot_1281556018

24 Responses

  1. Pro Desk Trent Walton

    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

    over 1 year ago

  2. Pro Trav-1 Travis Fleck

    Nice.

    over 1 year ago

  3. Pro Pixelavatar_large_16_color Chris Wallace!

    I heard IE9 type rendering blows away other modern browsers... why does it look so bad here?

    over 1 year ago

  4. Pro Desk Trent Walton

    @Chris Wallace: It could be the PC I'm using to test on... or my font stack.

    over 1 year ago

  5. Pro Pixelavatar_large_16_color Chris Wallace!

    That's what she said.

    likes

    over 1 year ago

  6. Avatar2 Anthony Garand

    Nice, Is it just me or do the rounded corners on IE9 look better than webkit?

    likes

    over 1 year ago

  7. Pro P-cranberries Perceval McElhearn

    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.

    likes

    over 1 year ago

  8. Pro Desk Trent Walton

    @Perceval McElhearn: I think you're right
    @Anthony Garand: I'd agree :)

    Here's our code without prefixes for kicks:
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px rgba(0,0,0,0.4), 0px 0px 0px 5px rgba(228, 59, 5, 0.2);

    over 1 year ago

  9. Pro Twitter-rubin-300px Dan Rubin

    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.

    likes

    over 1 year ago

  10. P-cranberries

    Shot_1281559612_teaser WebKit vs. IE9 border-... 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... August 11, 2010

    Rebound

    WebKit vs. IE9 border-radius Rendering

    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.

    • 8
    • 5
    • 1,155

    over 1 year ago

  11. Pro 1f8f6ded95a14175acba6c272c967787_7 Philip Renich

    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?

    likes

    over 1 year ago

  12. Pro 400 Dave McNally

    @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?

    over 1 year ago

  13. Pro Desk Trent Walton

    @Philip Renich: to me, that's actually a pretty great example:)

    over 1 year ago

  14. Pro Twitter-rubin-300px Dan Rubin

    @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.

    over 1 year ago

  15. Pro Twitter-rubin-300px Dan Rubin

    @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.

    over 1 year ago

  16. Pro 1f8f6ded95a14175acba6c272c967787_7 Philip Renich

    @Dan, sure, I can help out with that. I enjoy that sort of math.

    over 1 year ago

  17. Pro Gravatar2 Chris Coyier

    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.

    over 1 year ago

  18. Pro 400 Dave McNally

    @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.

    likes

    over 1 year ago

  19. Pro Desk Trent Walton

    @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.

    over 1 year ago

  20. Pro Gravatar2 Chris Coyier

    Thanks fellas, now I got a bunch more testing to do =)

    over 1 year ago

  21. 1f8f6ded95a14175acba6c272c967787_7

    Shot_1281592457_teaser Nested Corners CSS @Dan Rubin, 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 bor... August 12, 2010

    Rebound

    Nested Corners CSS

    by Philip Renich

    @Dan Rubin,
    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?

    over 1 year ago

  22. Pro 1f8f6ded95a14175acba6c272c967787_7 Philip Renich

    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?

    over 1 year ago

  23. Pro Desk Trent Walton

    @Philip Renich: I believe the 4th number is the length of the spread.

    over 1 year ago

  24. Pro 1f8f6ded95a14175acba6c272c967787_7 Philip Renich

    @Trent Walton,
    Interesting, css3.info doesn't make mention of that. Thanks for pointing that out!

    over 1 year ago

keyboard shortcuts: ← previous shot → next shot L or F like