keyboard shortcuts: ← previous shot → next shot L or F like
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.
112,870,738,731 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
24 Responses
Pro
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
almost 3 years ago
Pro
Travis Fleck
Nice.
almost 3 years ago
Pro
Chris Wallace!
I heard IE9 type rendering blows away other modern browsers... why does it look so bad here?
almost 3 years ago
Pro
Trent Walton
@Chris Wallace: It could be the PC I'm using to test on... or my font stack.
almost 3 years ago
Pro
Chris Wallace!
That's what she said.
almost 3 years ago
Nice, Is it just me or do the rounded corners on IE9 look better than webkit?
almost 3 years ago
Pro
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.almost 3 years ago
Pro
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);
almost 3 years ago
Pro
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.
almost 3 years ago
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.
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?
almost 3 years ago
Pro
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?
almost 3 years ago
Pro
Trent Walton
@Philip Renich: to me, that's actually a pretty great example:)
almost 3 years ago
Pro
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.
almost 3 years ago
Pro
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.
almost 3 years ago
@Dan, sure, I can help out with that. I enjoy that sort of math.
almost 3 years ago
Pro
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.
almost 3 years ago
Pro
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.
almost 3 years ago
Pro
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.
almost 3 years ago
Pro
Chris Coyier
Thanks fellas, now I got a bunch more testing to do =)
almost 3 years ago
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?
almost 3 years ago
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?
almost 3 years ago
Pro
Trent Walton
@Philip Renich: I believe the 4th number is the length of the spread.
almost 3 years ago
@Trent Walton,
Interesting, css3.info doesn't make mention of that. Thanks for pointing that out!
almost 3 years ago