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! 
2 Likes
Imma drop this here for yall because it’s relavant and a good way to make drop shadows, you’re welcome. 
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! [/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! [/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:
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.
8 Likes