8 ms·

Brilliant use of CSS drop shadows

426 points by Seldaek 16y ago

flog 16y ago
I use these with caution on animated pages or large elements; I don't have links to hand, but have lots of anecdotal stories of performance degradation with CSS drop shadows. Just a friendly word of (unbacked) warning to frontend devs :)
- splatcollision 16y ago
  This is true in my experience. CSS shadows are awesome, but use with care when you're animating! I see a huge drop in framerate in my CSS animation tool when I have a big fat drop shadow on an element.
- mickeyben 16y ago
  Drop shadows are very slow when animated because they have to be recalculated every time they move.
  - JonnieCache 16y ago
    The fact that you are correct is laughable in this age of GPUs commonly having 512mb+ of dedicated RAM. Think what the latest game engines can do at 60fps, why oh why do our browsers still sweat over a few alpha channels in 2011? EDIT: My galaxy S phone runs Quake 3 at 60fps, flawlessly. MY PHONE RUNS QUAKE 3! Why can't my browser do alpha blending at more than 10fps?
    - ciroduran 16y ago
      Because these calculations are done on software, not GPU. GPU programming is hard. Using the GPU requires extra-integration and extra-work that most developers are not willing to do.
      - vlod 16y ago
        I think browsers are moving to using the GPU: chrome: http://dropshado.ws/post/2857434171/chrome-gpu-accelerated-compositing-and-3d-css http://dropshado.ws/post/2857434171/chrome-gpu-accelerated-c... ie: http://downloadsquad.switched.com/2010/03/16/internet-explorer-gpu-accelerated-html5-interwebs-all-apps-h/ http://downloadsquad.switched.com/2010/03/16/internet-explor... ff: http://www.engadget.com/2010/09/09/firefox-4-beta-5-brings-gpu-acceleration-for-windows/ http://www.engadget.com/2010/09/09/firefox-4-beta-5-brings-g...
      - JonnieCache 16y ago
        >Using the GPU requires extra-integration and extra-work that most developers are not willing to do. Once again, microsoft's decision to deliberately stagnate the browser market making life difficult for us all.
        chadgeidel 16y ago
        Wait, when did MS prevent other browser manufacturers from including hardware-accelerated rendering? Also - to specifically counter your point IE9 will have hardware accelerated rendering via Direct2D: http://blogs.msdn.com/b/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx http://blogs.msdn.com/b/ie/archive/2009/11/18/an-early-look-...
        JonnieCache 16y ago
        They actually completely stopped development on IE between version 6 and 7. There was no IE dev team, beyond people patching bugs. Obviously this did not prevent other people doing GPU-acceleration, but the leading player deliberately halting development will and did cause the market to stagnate.
        chc 16y ago
        That's not really relevant to the issue at hand, though. Bringing up Microsoft's misbehavior with IE 6 in this context is like bringing up the time a kid cut in front of you for lunch in third grade when you meet him in college.
    - bzbarsky 16y ago
      Games do pretty simple things on the GPU. Download textures, then transform them. They do a _lot_ of it, but conceptually the operations are not actually all that complicated or varied, by and large. Browsers have this little thing they have to deal with called "text". Turns out that stuffing reasonable text into a texture and then scrolling it, say, is not something GPUs can do a good job of. This is why games just bitmap all their text and it looks like crap, by the way. I doubt you'd want text in a browser to look like it does in most games. Browsers are working on making this faster, by the way. But it also turns out that not only are GPUs designed around stuff that games do (which is not the same set of stuff that browsers need done), but so are graphics drivers. The parts of them that Firefox 4 has been trying to use are clearly undertested, because they're ... rather buggy. Which is why there's now a driver blacklist (whitelist on Linux) and so forth...
      - jquery 16y ago
        I find this answer unsatisfying. Watch this demo, for example. It runs on high-end modern gaming PCs over 60 FPS. http://www.google.com/url?sa=t&source=web&cd=4&ved=0CDQQtwIwAw&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D9F6zSgtRnkE&ei=mZtdTaeUIIvSsAPP04i7CA&usg=AFQjCNHm5fh2KwOmz3uupug4ugyvPizHoQ http://www.google.com/url?sa=t&source=web&cd=4&v... Tesselation, volumetric shadows, depth of field, etc. Can you really say with a straight face that it's not doing anything complicated? And here we are struggling with drop-shadows. I know the problem domains are different, but I can't help but feel completely underwhelmed at the current state of the web when it comes to graphics. Somehow I think there's more to it than "fonts are hard."
        bzbarsky 16y ago
        It's not only that "fonts are hard" but that "the transformations people do to web pages are very different from the ones the GPU is good at", as I understand. At which point we've reached the end of my second-hand graphics knowledge, unfortunately. I wish I could give you a better technical explanation here...
      - jmtulloss 16y ago
        At palm, I didn't work on the 3d acceleration bits, but I worked with those that did. This explanation is pretty much spot on. In an environment where you don't already know your textures, 3d acceleration is a very difficult task. That's why only a select number of CSS transforms have been hardware accelerated to date.
    - bzbarsky 16y ago
      One other thing. The expensive thing with shadows is not just the compositing, but recomputing the shadow itself. Any time something changes about the thing that's casting the shadow you have to rebuild the shadow. If the change is of a kind the GPU knows about (polygon moved or rotated or whatnot), it might be doable on the GPU. If it's something like "the width changed and the text layout has to be redone", you lose.
- antimatter15 16y ago
  I think recently Webkit got a fix for that.
  - pohl 16y ago
    https://bugs.webkit.org/show_bug.cgi?id=22102 https://bugs.webkit.org/show_bug.cgi?id=22102
- xutopia 16y ago
  It isn't just when animating. Scrolling a page when there is drop shadows is jittery.
- andrenotgiant 16y ago
  Chrome for Mac was exceptionally bad at drop shadows last time I checked...
- alanh 16y ago
  Indeed, simply scrolling this demo page in Chrome 9 feels very laggy. Edit: OS X, late 2009 MBP, BUT with the BetterHN tab/iframe on top (other pages are smooth though).
  - Groxx 16y ago
    Really? 9.0.597.98 seems to be scrolling smoothly on Win 7 here.
    - blinkingled 16y ago
      Yep, Chrome is far better on Windows than OS X. So long as I was using OS X on my MBP I couldn't use Chrome and kept going back to FF - but since switching the machine to Win 7 I can't not use Chrome.
      - notyourwork 16y ago
        I have not noticed any issues with Chrome on my pro. Am I missing out on performance?
        blinkingled 16y ago
        It may be specific to my MBP model (17" Core i7) which has the weirdo combination of Intel and Nvidia GPUs that are switched flakily in software at OSX's whim and Chrome has been known to trip the GPU switching - http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=chrome+osx+gpu+switch http://www.google.com/search?sourceid=chrome&ie=UTF-8&#3... . Scrolling was very jittery in general and page rendering/painting was also slower. Not like molasses slow but definitely not acceptable for a Core i7 machine. With Win 7 which uses only one GPU, the Nvidia one, it is very smooth and fast as I said - definitely wouldn't want to go back.
        notyourwork 16y ago
        I am running the 13" mbp and have not noticed anything out of the ordinary though now I am going to start using firefox for a few weeks and see how I feel.
- ilikepi 16y ago
  I'm seeing an interesting effect on OS X Leopard with Safari 5. If I bring another program to the foreground on top of the Safari window, and then switch back to Safari, only the shadows and background color appear. It takes a second or so for the white boxes and text to appear, as well as the chrome around the top portion of the window. This was repeatable several times at first, but now it's become intermittent. It takes me back to the days of tweaking settings in X-Windows, when there was a "saveunder" setting that would specify whether to retain the contents of a window in memory when it became obscured by another window.
- benihana 16y ago
  I can attest to this. I had a page with four dropped shadows and one div that is animated via jQuery's slideDown/slideUp methods. Sliding up and down was painfully slow and ragged.
- duarte 16y ago
  Scrolls perfectly on my iPad.
mike-cardwell 16y ago
Nice. Which browsers does it work in? Firefox 3.6 works, IE7 doesn't. Not tested other versions of IE.
- mike-cardwell 16y ago
  Ah, read: http://nicolasgallagher.com/css-drop-shadows-without-images/ http://nicolasgallagher.com/css-drop-shadows-without-images/ "Known browser support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+"
  - MichaelApproved 16y ago
    Why not edit your original comment instead of posting a reply to yourself? You posted both within 1 minute of each other.
- Seldaek 16y ago
  It works in latest versions of all browsers, including IE9 Beta where it's almost perfect - don't have the RC at hand to try, but hopefully it improves the few glitches I'm seeing. The good thing is that in IE<9, it just shows a white box. But it's still perfectly readable and usable, it just looks less fancy, which is an acceptable loss in some cases.
- eik3_de 16y ago
  I fired up a VM with Windows XP with IE8, that's how it looks there: http://ge.tt/4bP3tEZ/ie8.png http://ge.tt/4bP3tEZ/ie8.png Firefox 3.6 and Chrome all good though.
  - theycallmemorty 16y ago
    My first thought was that it would suck in IE. The effects don't work, but at least they degrade gracefully unlike other CSS tricks.
- markszcz 16y ago
  Ran this on my Droid X: Works on the defualt browser, Works on the Opera Mobile brwoser, Works on the Firefox browser. So my mobile phone has better CSS rendering then my desktop IE8. Go figure.
hazelnut 16y ago
well done, wonderful css3 presentation!
weego 16y ago
Chrome on my MBP really chugs trying to scroll down the page, I'm surprised it's being pushed that hard looking at the code.
- ugh 16y ago
  Both Chrome and Safari get ever so slightly jittery on my four year old MBP. The most important thing to test is probably whether performance is affected if you want to use drop shadows. There are other factors which can make scrolling less than butter smooth on slightly aged hardware, this seems to be a weak spot of many fancy designs. I don’t know whether those designs are just not tested in all browsers and on slightly older hardware or whether that’s an intentional trade-off. I’m extremely annoyed by even slightly jittery scrolling, but that’s probably just me.
ollysb 16y ago
Very nice. I was a little disappointed to discover how much code was required to achieve the effects though. Having to resort to using content:"" always feels like a workaround. Not having to use images is great though, I'll definitely be using this as a reference.
pilom 16y ago
A little tear in my heart. I must use IE7 at work.
- lisperforlife 16y ago
  It is probably time to change your job. :-)
- joelackner 16y ago
  i'd quit.
- joshfinnie 16y ago
  IE6 @ work here. No luck viewing this page. HA! Looks great on my Droid though...
thetylerhayes 16y ago
Aesthetics: :D Performance: o_O
- patrickaljord 16y ago
  It's super fast here on Ubuntu chrome 10.
ck2 16y ago
Almost works in IE9, that's amazing in itself. But dead in IE8/7 of course. (via browserling) http://img29.imageshack.us/img29/4448/ie9corners.png http://img29.imageshack.us/img29/4448/ie9corners.png Hmm, webpagetest shows it works completely in IE9 http://cdn.webpagetest.org/thumbnail.php?width=930&test=110217_MP_e262e699747f7e48dd52b5227c00dcc7&run=1&file=1_screen.jpg http://cdn.webpagetest.org/thumbnail.php?width=930&test=... maybe a later release
- Sephr 16y ago
  There was a recent update a few days ago. Check Windows Update.
- Seldaek 16y ago
  I can now confirm that it renders perfectly in IE9 RC1, it looks exactly like in Opera 11 & Firefox 3.6. Chrome 9 is the only one rendering them a bit awkward (tiny details, but still).
zakovyrya 16y ago
Until they fix performance problems I'm pre-rendering stuff like that. Thank you very much.
Timmy_C 16y ago
I like how he uses CSS transforms on the :before and :after pseudo element to give it that "lifted" effect. That's something I never thought to try before.
ajaykam 16y ago
This is awesome on chrome, but I'm having some trouble on my iphone4. It worked fine on the 3gs though, so I'm not sure whats up.
mrchess 16y ago
This post reminds me of how I "creatively" used CSS3 shadows for a job interview. One of my tasks for this interview was to mimic an overlaying drop-shadow effect from a PSD file. I couldn't figure out how to do it smoothly using transparent images, so CSS3 box shadows to the rescue! Here is the result. The images would slide left to right as a slideshow, and the box shadows are on the borders to create the "layered" effect. The images however do indeed use real image shadows. http://i.imgur.com/0D7WQ.png http://i.imgur.com/0D7WQ.png

426 points by Seldaek 16y ago

flog 16y ago

I use these with caution on animated pages or large elements; I don't have links to hand, but have lots of anecdotal stories of performance degradation with CSS drop shadows. Just a friendly word of (unbacked) warning to frontend devs :)

splatcollision 16y ago
This is true in my experience. CSS shadows are awesome, but use with care when you're animating! I see a huge drop in framerate in my CSS animation tool when I have a big fat drop shadow on an element.
mickeyben 16y ago
Drop shadows are very slow when animated because they have to be recalculated every time they move.
- JonnieCache 16y ago
  The fact that you are correct is laughable in this age of GPUs commonly having 512mb+ of dedicated RAM. Think what the latest game engines can do at 60fps, why oh why do our browsers still sweat over a few alpha channels in 2011? EDIT: My galaxy S phone runs Quake 3 at 60fps, flawlessly. MY PHONE RUNS QUAKE 3! Why can't my browser do alpha blending at more than 10fps?
  - ciroduran 16y ago
    Because these calculations are done on software, not GPU. GPU programming is hard. Using the GPU requires extra-integration and extra-work that most developers are not willing to do.
    - vlod 16y ago
      I think browsers are moving to using the GPU: chrome: http://dropshado.ws/post/2857434171/chrome-gpu-accelerated-compositing-and-3d-css http://dropshado.ws/post/2857434171/chrome-gpu-accelerated-c... ie: http://downloadsquad.switched.com/2010/03/16/internet-explorer-gpu-accelerated-html5-interwebs-all-apps-h/ http://downloadsquad.switched.com/2010/03/16/internet-explor... ff: http://www.engadget.com/2010/09/09/firefox-4-beta-5-brings-gpu-acceleration-for-windows/ http://www.engadget.com/2010/09/09/firefox-4-beta-5-brings-g...
    - JonnieCache 16y ago
      >Using the GPU requires extra-integration and extra-work that most developers are not willing to do. Once again, microsoft's decision to deliberately stagnate the browser market making life difficult for us all.
      - chadgeidel 16y ago
        Wait, when did MS prevent other browser manufacturers from including hardware-accelerated rendering? Also - to specifically counter your point IE9 will have hardware accelerated rendering via Direct2D: http://blogs.msdn.com/b/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx http://blogs.msdn.com/b/ie/archive/2009/11/18/an-early-look-...
        JonnieCache 16y ago
        They actually completely stopped development on IE between version 6 and 7. There was no IE dev team, beyond people patching bugs. Obviously this did not prevent other people doing GPU-acceleration, but the leading player deliberately halting development will and did cause the market to stagnate.
        chc 16y ago
        That's not really relevant to the issue at hand, though. Bringing up Microsoft's misbehavior with IE 6 in this context is like bringing up the time a kid cut in front of you for lunch in third grade when you meet him in college.
  - bzbarsky 16y ago
    Games do pretty simple things on the GPU. Download textures, then transform them. They do a _lot_ of it, but conceptually the operations are not actually all that complicated or varied, by and large. Browsers have this little thing they have to deal with called "text". Turns out that stuffing reasonable text into a texture and then scrolling it, say, is not something GPUs can do a good job of. This is why games just bitmap all their text and it looks like crap, by the way. I doubt you'd want text in a browser to look like it does in most games. Browsers are working on making this faster, by the way. But it also turns out that not only are GPUs designed around stuff that games do (which is not the same set of stuff that browsers need done), but so are graphics drivers. The parts of them that Firefox 4 has been trying to use are clearly undertested, because they're ... rather buggy. Which is why there's now a driver blacklist (whitelist on Linux) and so forth...
    - jquery 16y ago
      I find this answer unsatisfying. Watch this demo, for example. It runs on high-end modern gaming PCs over 60 FPS. http://www.google.com/url?sa=t&source=web&cd=4&ved=0CDQQtwIwAw&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D9F6zSgtRnkE&ei=mZtdTaeUIIvSsAPP04i7CA&usg=AFQjCNHm5fh2KwOmz3uupug4ugyvPizHoQ http://www.google.com/url?sa=t&source=web&cd=4&v... Tesselation, volumetric shadows, depth of field, etc. Can you really say with a straight face that it's not doing anything complicated? And here we are struggling with drop-shadows. I know the problem domains are different, but I can't help but feel completely underwhelmed at the current state of the web when it comes to graphics. Somehow I think there's more to it than "fonts are hard."
      - bzbarsky 16y ago
        It's not only that "fonts are hard" but that "the transformations people do to web pages are very different from the ones the GPU is good at", as I understand. At which point we've reached the end of my second-hand graphics knowledge, unfortunately. I wish I could give you a better technical explanation here...
    - jmtulloss 16y ago
      At palm, I didn't work on the 3d acceleration bits, but I worked with those that did. This explanation is pretty much spot on. In an environment where you don't already know your textures, 3d acceleration is a very difficult task. That's why only a select number of CSS transforms have been hardware accelerated to date.
  - bzbarsky 16y ago
    One other thing. The expensive thing with shadows is not just the compositing, but recomputing the shadow itself. Any time something changes about the thing that's casting the shadow you have to rebuild the shadow. If the change is of a kind the GPU knows about (polygon moved or rotated or whatnot), it might be doable on the GPU. If it's something like "the width changed and the text layout has to be redone", you lose.
antimatter15 16y ago
I think recently Webkit got a fix for that.
- pohl 16y ago
  https://bugs.webkit.org/show_bug.cgi?id=22102 https://bugs.webkit.org/show_bug.cgi?id=22102
xutopia 16y ago
It isn't just when animating. Scrolling a page when there is drop shadows is jittery.
andrenotgiant 16y ago
Chrome for Mac was exceptionally bad at drop shadows last time I checked...
alanh 16y ago
Indeed, simply scrolling this demo page in Chrome 9 feels very laggy. Edit: OS X, late 2009 MBP, BUT with the BetterHN tab/iframe on top (other pages are smooth though).
- Groxx 16y ago
  Really? 9.0.597.98 seems to be scrolling smoothly on Win 7 here.
  - blinkingled 16y ago
    Yep, Chrome is far better on Windows than OS X. So long as I was using OS X on my MBP I couldn't use Chrome and kept going back to FF - but since switching the machine to Win 7 I can't not use Chrome.
    - notyourwork 16y ago
      I have not noticed any issues with Chrome on my pro. Am I missing out on performance?
      - blinkingled 16y ago
        It may be specific to my MBP model (17" Core i7) which has the weirdo combination of Intel and Nvidia GPUs that are switched flakily in software at OSX's whim and Chrome has been known to trip the GPU switching - http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=chrome+osx+gpu+switch http://www.google.com/search?sourceid=chrome&ie=UTF-8&#3... . Scrolling was very jittery in general and page rendering/painting was also slower. Not like molasses slow but definitely not acceptable for a Core i7 machine. With Win 7 which uses only one GPU, the Nvidia one, it is very smooth and fast as I said - definitely wouldn't want to go back.
        notyourwork 16y ago
        I am running the 13" mbp and have not noticed anything out of the ordinary though now I am going to start using firefox for a few weeks and see how I feel.
ilikepi 16y ago
I'm seeing an interesting effect on OS X Leopard with Safari 5. If I bring another program to the foreground on top of the Safari window, and then switch back to Safari, only the shadows and background color appear. It takes a second or so for the white boxes and text to appear, as well as the chrome around the top portion of the window. This was repeatable several times at first, but now it's become intermittent. It takes me back to the days of tweaking settings in X-Windows, when there was a "saveunder" setting that would specify whether to retain the contents of a window in memory when it became obscured by another window.
benihana 16y ago
I can attest to this. I had a page with four dropped shadows and one div that is animated via jQuery's slideDown/slideUp methods. Sliding up and down was painfully slow and ragged.
duarte 16y ago
Scrolls perfectly on my iPad.

mike-cardwell 16y ago

Nice. Which browsers does it work in? Firefox 3.6 works, IE7 doesn't. Not tested other versions of IE.

mike-cardwell 16y ago
Ah, read: http://nicolasgallagher.com/css-drop-shadows-without-images/ http://nicolasgallagher.com/css-drop-shadows-without-images/ "Known browser support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+"
- MichaelApproved 16y ago
  Why not edit your original comment instead of posting a reply to yourself? You posted both within 1 minute of each other.
Seldaek 16y ago
It works in latest versions of all browsers, including IE9 Beta where it's almost perfect - don't have the RC at hand to try, but hopefully it improves the few glitches I'm seeing. The good thing is that in IE<9, it just shows a white box. But it's still perfectly readable and usable, it just looks less fancy, which is an acceptable loss in some cases.
eik3_de 16y ago
I fired up a VM with Windows XP with IE8, that's how it looks there: http://ge.tt/4bP3tEZ/ie8.png http://ge.tt/4bP3tEZ/ie8.png Firefox 3.6 and Chrome all good though.
- theycallmemorty 16y ago
  My first thought was that it would suck in IE. The effects don't work, but at least they degrade gracefully unlike other CSS tricks.
markszcz 16y ago
Ran this on my Droid X: Works on the defualt browser, Works on the Opera Mobile brwoser, Works on the Firefox browser. So my mobile phone has better CSS rendering then my desktop IE8. Go figure.

hazelnut 16y ago

well done, wonderful css3 presentation!

weego 16y ago

Chrome on my MBP really chugs trying to scroll down the page, I'm surprised it's being pushed that hard looking at the code.

ugh 16y ago
Both Chrome and Safari get ever so slightly jittery on my four year old MBP. The most important thing to test is probably whether performance is affected if you want to use drop shadows. There are other factors which can make scrolling less than butter smooth on slightly aged hardware, this seems to be a weak spot of many fancy designs. I don’t know whether those designs are just not tested in all browsers and on slightly older hardware or whether that’s an intentional trade-off. I’m extremely annoyed by even slightly jittery scrolling, but that’s probably just me.

ollysb 16y ago

Very nice. I was a little disappointed to discover how much code was required to achieve the effects though. Having to resort to using content:"" always feels like a workaround. Not having to use images is great though, I'll definitely be using this as a reference.

pilom 16y ago

A little tear in my heart. I must use IE7 at work.

lisperforlife 16y ago
It is probably time to change your job. :-)
joelackner 16y ago
i'd quit.
joshfinnie 16y ago
IE6 @ work here. No luck viewing this page. HA! Looks great on my Droid though...

thetylerhayes 16y ago

Aesthetics: :D Performance: o_O

patrickaljord 16y ago
It's super fast here on Ubuntu chrome 10.

ck2 16y ago

Almost works in IE9, that's amazing in itself. But dead in IE8/7 of course. (via browserling) http://img29.imageshack.us/img29/4448/ie9corners.png http://img29.imageshack.us/img29/4448/ie9corners.png Hmm, webpagetest shows it works completely in IE9 http://cdn.webpagetest.org/thumbnail.php?width=930&test=110217_MP_e262e699747f7e48dd52b5227c00dcc7&run=1&file=1_screen.jpg http://cdn.webpagetest.org/thumbnail.php?width=930&test=... maybe a later release

Sephr 16y ago
There was a recent update a few days ago. Check Windows Update.
Seldaek 16y ago
I can now confirm that it renders perfectly in IE9 RC1, it looks exactly like in Opera 11 & Firefox 3.6. Chrome 9 is the only one rendering them a bit awkward (tiny details, but still).

zakovyrya 16y ago

Until they fix performance problems I'm pre-rendering stuff like that. Thank you very much.

Timmy_C 16y ago

I like how he uses CSS transforms on the :before and :after pseudo element to give it that "lifted" effect. That's something I never thought to try before.

ajaykam 16y ago

This is awesome on chrome, but I'm having some trouble on my iphone4. It worked fine on the 3gs though, so I'm not sure whats up.

mrchess 16y ago

This post reminds me of how I "creatively" used CSS3 shadows for a job interview. One of my tasks for this interview was to mimic an overlaying drop-shadow effect from a PSD file. I couldn't figure out how to do it smoothly using transparent images, so CSS3 box shadows to the rescue! Here is the result. The images would slide left to right as a slideshow, and the box shadows are on the borders to create the "layered" effect. The images however do indeed use real image shadows. http://i.imgur.com/0D7WQ.png http://i.imgur.com/0D7WQ.png