Implement CSS Box Shadow

Would be great to see a CSS3 style box shadow for UI elements.

Possible implementation:
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Would love to have this too.
Is this on the roadmap? Since #191 is closed.

I'd like to see this too, to make nice looking card interfaces. Pretty!

If anyone's interested, I've discovered this sort-of-hack:
view.android.setBackgroundResource(android.R.drawable.dialog_holo_light_frame)
which gives an alright drop shadow on Android.

However add my +1 to this as well, it would be great to have a customisable, cross platform solution!

+1

This would be awesome! +1

+1

Is there any estimate of when this might be a thing? We aren't deploying our app right away so can afford to wait for a bit, if someone could tell me if it's a few months out or more like a year, that would be super helpful.

Thanks to all of you who maintain NativeScript. ❤️

Try this https://market.nativescript.org/plugins/nativescript-vue-shadow/ There's an angular implementation too.

Agreed here - we have often implemented this in angular projects via directives - will bring up in next weeks TSC meeting to put on the plan for 7.1 or shortly after, would be nice to close the loop here.

@NathanWalker

@NathanWalker any news on this from the TSC meeting? :)

Yes we are putting this on the 8.0 plan for sure however there may be an option to introduce in 7.x series.

@NathanWalker

@NathanWalker I've noticed the box shadow disappears when a border-radius is applied. Is this the expected behavior for box shadows right now? I'm using ns 8

@alexgritton

Hey @alexgritton thats correct we are adding combined with border radius in 8.1.

<FlexboxLayout width="200" height="200" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);" >
i added it to my code, but i still can not see box-shadow
use "@nativescript/core": "~8.0.0"

i also downloaded your demo project, but box-shadow doesnt work there too
https://github.com/williamjuan027/nativescript-movies-demo

I can't see it either. I just cloned nativescript-movies-demo and ran tns run android. I see no box-shadow on any element.

I can't see it either. I just cloned nativescript-movies-demo and ran tns run android. I see no box-shadow on any element.

+1

I don't get it either, am I missing something ? it does mentioned in the blog they now support in 8.0: https://blog.nativescript.org/nativescript-8-announcement/#css%3A-box-shadow I have :

ns --version
8.5.3

I've also added to my element in line style: style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);" is this the case where only in CSS stylesheet perhaps is supported?
UPDATE
It does seem to work under some circumstances I my case I found out that it show at the top but not a the bottom not sure why, also when I set borderBottomWidth="1" borderColor="black" then it doesn't work for me at all, but the same worked well for single label and buttons:

As you can see in the screenshoot the shadow only show at the top but only when I added and element above that:

<AbsoluteLayout>
   <Label text="Other Label" left="10" top="10"></Label>
</AbsoluteLayout>
   <StackLayout style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);">...</StackLayout>

Just to note I have a GridLayout bellow with RadListView.

Navigation Menu

Repository navigation

Implement CSS Box Shadow #550

154 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Implement CSS Box Shadow #550

Description

Activity

mischah commented on Dec 15, 2015

jlooper commented on Dec 16, 2015

lyonzy commented on Dec 16, 2015

aliatsis commented on Dec 28, 2015

tiagordc commented on Jan 7, 2016

andreyluiz commented on Jan 12, 2016

shantamg commented on Jan 16, 2016

gabrielbiga commented on Feb 1, 2016

arnolduis commented on Feb 13, 2016

ljx0517 commented on Feb 24, 2016

treio commented on Mar 4, 2016

burkeholland commented on Mar 13, 2016

Premitium commented on Mar 15, 2016

digitaldoggo commented on Mar 29, 2016

154 remaining items

Tyler-V commented on Jun 16, 2020

steve-79 commented on Aug 25, 2020

kennethkeim commented on Sep 1, 2020

kan101 commented on Sep 25, 2020

NathanWalker commented on Sep 26, 2020

oslc15 commented on Oct 23, 2020

NathanWalker commented on Oct 23, 2020

alexgritton commented on Apr 10, 2021

NathanWalker commented on Apr 10, 2021

PetroSuch commented on May 12, 2021

PetroSuch commented on May 13, 2021

cascading-jox commented on Dec 11, 2021

schoettler commented on Nov 23, 2022

lano-vargas commented on Nov 21, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions