You could use a combination of Bitmap.extractAlpha and a BlurMaskFilter to manually create a drop shadow for any image you need to display, but that would only work if your image is only loaded/displayed once in a while, since the process is expensive. Pseudo-code (might even compile!): BlurMaskFilter blurFilter = new BlurMaskFilter(5, BlurMaskFilter.Blur.OUTER); Paint shadowPaint … Read more
This works for me on all my browsers: .shadow { -moz-box-shadow: 0 0 30px 5px #999; -webkit-box-shadow: 0 0 30px 5px #999; } then just give any div the shadow class, no jQuery required.
Two choices: Option 1: Add a border element with the effect on it as a sibling of the border / rectangle element tree you have. Something like this: <Grid> <Border Margin=”68,67,60,67″ BorderBrush=”Black” BorderThickness=”1″ CornerRadius=”10″> <Border.Effect> <DropShadowEffect /> </Border.Effect> </Border> <Border Margin=”68,67,60,67″ BorderBrush=”Black” BorderThickness=”1″ CornerRadius=”10″> <Rectangle Fill=”White” Stroke=”Black” Margin=”37,89,118,98″> </Rectangle> </Border> </Grid> Option 2: Put the … Read more
Something like this? div { border: 1px solid #202020; margin-top: 25px; margin-left: 25px; width: 158px; height: 158px; padding-top: 25px; -webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75); box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75); } <div></div>
Instead of using a triangle hack, you can just rotate a div using transform and get a real box-shadow. Since you only want the shadow on one side of the div (the visible triangle side), you have to make the blur smaller and lower the opacity. Demo: http://jsfiddle.net/ThinkingStiff/mek5Z/ HTML: <div class=”bubble”></div> CSS: .bubble{ background-color: #F2F2F2; … Read more
Okay, I don’t foresee any more answers on this one, so what I ended up going with for now is just a solution for rectangular images. I’ve used the following NinePatch: along with the appropriate padding in XML: <ImageView android:id=”@+id/image_test” android:background=”@drawable/drop_shadow” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:paddingLeft=”6px” android:paddingTop=”4px” android:paddingRight=”8px” android:paddingBottom=”9px” android:src=”https://stackoverflow.com/questions/3693234/@drawable/pic1″ /> to get a fairly good result: … Read more
The z-index property works only on positioned elements. Those include position: relative, position: absolute, position: fixed, and position: sticky elements. Try to give your div #middle a position: relative.
I know this question has already been answered but I want you to know that I found a drawable on Android Studio that is very similar to the pics you have in the question: Take a look at this: android:background=”@drawable/abc_menu_dropdown_panel_holo_light” It looks like this: Hope it will be helpful Edit The option above is for … Read more