Any way to add a drop shadow to a view?
I know it's easy to do in CSS. Is there any property you can use when creating a view to add a drop shadow to it?
9 Answers
-
To add drop shadows is not as easy as a line of CSS have a look at this blog article
-
Yeah, I need something nicer looking than that (i.e. with a blurred edge). Guess I'll just have to use images. I would think that'd be a good property for Titanium to support, since it's a fairly standard element in user interface design.
-
If you need blurred effects I would recommend experimenting with gradient views. You can get some nice effects if you use multiple views creatively :-)
Don't be surprised to come across bugs though when you layer multiple views and when you use gradients in some of them. I hit one of those with dashboard views where using gradients in one of the lower layers would completely cover the ui for the elements in higher level views (while still allowing the event detection).
-
There's a good answer here for labels (via Jeff's demo), but for views you would need to use two views of the same size, and offset one relative to the other. Here's a snippet you can drop into an app.js to see in action:
http://gist.github.com/425669
-
I think a variant on what Kevin suggest works quite good with some "blur":
Code SampleScreenshot from iPhone Simulator
A bit clunky but works ok:ish.
/J
-
You could use background image on the second view if the shadow effect isn't nice enough with views (based on my example).
-
Here is a View with a transparent drop shadow and rounded corners:
-
Here is a View with a transparent drop shadow and rounded corners:
-
Here is a View with a transparent drop shadow and rounded corners:
