Drop-Shadow effect for Guis

Just what the title says. A Drop-Shadow Effect, with customizable color, transparency, offset and z filter. The Shadows would only show on gui objects.

6 Likes

Ohhh, great idea!

This could improve many GUIs.

2 Likes

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

1 Like

Something like CSS Box-Shadow would be pretty sweet. https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

2 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

1 Like

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.

1 Like

Still looks better than metro

1 Like

[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.

1 Like

[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]

1 Like

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

1 Like

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:

1 Like

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

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]

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