Working on a stylesheet for all of Wikipedia, and this is how I chose to approach blockquotes. It's all CSS with no control over the markup and it has to work at iPhone and iPad size, both horizontal and vertical. I thought the torn edge leant some nice character, while also making it abundantly clear that the content is in fact a blockquote, taken out of context from another source.
Good solution, Andy. I would maybe make the torn edge slightly less ragged/irregular - with everything else being so orderly and blocky, it could possibly look distracting.
@David Sizemore the hard edged drop shadow isn't ideal, but it's partially a limitation of CSS and the fact that the element needs to work at any size. Perhaps I could overlay some semi-transparent white fades in the corners though...
7 Responses
Working on a stylesheet for all of Wikipedia, and this is how I chose to approach blockquotes. It's all CSS with no control over the markup and it has to work at iPhone and iPad size, both horizontal and vertical. I thought the torn edge leant some nice character, while also making it abundantly clear that the content is in fact a blockquote, taken out of context from another source.
I'm excited for us to drop this one.
4 months ago
Pro
Andrew Witherspoon
I can't wait either. Have you guys named the app?
4 months ago
Good solution, Andy. I would maybe make the torn edge slightly less ragged/irregular - with everything else being so orderly and blocky, it could possibly look distracting.
4 months ago
@Andrew Witherspoon we're calling it Wikiweb.
@Trevor Baum I'm currently working on making some other things a bit less blocky as well...
4 months ago
Pro
David Sizemore
A stylesheet for all of Wikipedia. No biggie!
I agree with Trevor—the tear, with the straight down shadow, seems out of place. I'm not saying it's not worth pursuing further, though.
4 months ago
Love it, how are you planning on distributing it? Stylebot?
4 months ago
@Brad McNally It's part of an iOS app we're working on. It will be universal, for both the iPad and iPhone, and the Wikipedia reader is only one half of it. See: http://dribbble.com/shots/283036-Wikiweb.
@David Sizemore the hard edged drop shadow isn't ideal, but it's partially a limitation of CSS and the fact that the element needs to work at any size. Perhaps I could overlay some semi-transparent white fades in the corners though...
4 months ago