Drop-Shadow effect for UI elements

Literally a black frame with no borders, transparency, slight offset, Z Index

7 Likes

Something like CSS Box-Shadow would be pretty sweet. box-shadow - CSS: Cascading Style Sheets | MDN

12 Likes

you can do this (along with quite a number of other cool effects) with 9-slice.

1 Like

Step 1.
Clone GUI inside of itself and set the ZIndex -1 to the main one

Step 2.
The clone must be black, including ImageColor3, Stroke and background

Step 3.
Offset it by about 2-5 pixels in any direction

Step 4.
Set Image, Background (and) stroke transparency to about 0.8-0.9

4 Likes

those are some great Ideas for doing this manually. I’ve just been playing with guis for a few days and trying to think of a few extra easy options that devs could use to make better looking guis with studio alone. Making a black frame with .5 transparency still wouldn’t have the nice soft rounding effect on corners and that little bit of fade out at the edges like a real drop-shadow effect would have. but it will work if I really want that drop-shadow.

And I like Userings’ idea of having a corner radius, and my other idea of using vector color gradients.

1 Like

Drop shadows for UI elements in 2015? That is so 1995. Back then, a major UI revamp from Windows 3.1 to Windows 95 included the introduction of sharp rectangular buttons and pseudo-3d shadows.

3 Likes

Still looks better than metro

9 Likes

[quote] those are some great Ideas for doing this manually. I’ve just been playing with guis for a few days and trying to think of a few extra easy options that devs could use to make better looking guis with studio alone. Making a black frame with .5 transparency still wouldn’t have the nice soft rounding effect on corners and that little bit of fade out at the edges like a real drop-shadow effect would have. but it will work if I really want that drop-shadow.

And I like Userings’ idea of having a corner radius, and my other idea of using vector color gradients. [/quote]

What’s your rationale for not using 9-slice?

1 Like

XP that 95 stuff isn’t what i had in mind. more like

1 Like

I’m not against it.

1 Like

Why not let us custom create frames?
Give it a 48x48px picture that becomes all the edges.
It doesnt scale the image. It cuts the edge 16x16 and put it on the top, then cut from 16,0 another 16x16 peice the stretches the top part. You get the point…

This can be done through 8 different images, but to have a simple “FrameImage” property would make it alot smoother.

2 Likes

[quote] Why not let us custom create frames?
Give it a 48x48px picture that becomes all the edges.
It doesnt scale the image. It cuts the edge 16x16 and put it on the top, then cut from 16,0 another 16x16 peice the stretches the top part. You get the point…

This can be done through 8 different images, but to have a simple “FrameImage” property would make it alot smoother. [/quote]

2 Likes

Well that’s a fancy word now isn’t it? XD

2 Likes

It would be neat if we could create a button “collision box” from a black and white bitmap, where the white pixels would capture mouse click/hover, and black pixels wouldn’t.
Circle buttons! :smiley:

2 Likes

Imma drop this here for yall because it’s relavant and a good way to make drop shadows, you’re welcome. :slight_smile:

2 Likes

[quote] It would be neat if we could create a button “collision box” from a black and white bitmap, where the white pixels would capture mouse click/hover, and black pixels wouldn’t.
Circle buttons! :smiley: [/quote]

Yes yes yes yes yes [size=2]yes yes yes yes[/size] [size=1]yes yes yes yes[/size] [size=1][size=1] I really want this in case you can’t tell[/size][/size]

1 Like

I’ve been trying for an hour to get good looking drop shadows with 9-slice tech. I finally got ok results. I’m not 100% satisfied with the results or with how long it took. Since I brought it up I’m sharing my resources if anyone wants to use them.

1 Like

[quote] It would be neat if we could create a button “collision box” from a black and white bitmap, where the white pixels would capture mouse click/hover, and black pixels wouldn’t.
Circle buttons! :smiley: [/quote]

circle buttons could also be made if Userings idea for corner-radius were to be implemented.

1 Like

General rule: if you can see a drop shadow, it’s too harsh.

1 Like

Sorry for the bump, but nowadays drop shadows are part of the “normal” design language developers use. let’s take the developer forum for example:
image
As I am making this comment right now there is a shadow in here.

this is not possible to do in roblox and limits me and (probably) other developers and UI Designers from making cool creations such as depth in UI (Like the devforum example I just gave, it looks like the writing card is infront of the background). In conclusion, for roblox to keep with the current design language (Example,More Details) it needs to add drop shadows.

9 Likes