Using Gradient with transparency for menu backgrounds

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
Using the Gradient CSS you can make a background visually better.

ScreenFlow.gif
ScreenFlow.gif (5.46 MiB) Viewed 21295 times

The CSS is:

Code: Select all

background: linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0));
And is used in the CSS Styles of an element.

Looking at the CSS code you will see the "deg0". This is the direction of the gradient, so 0 would be vertical and 90 would be side to side.
RGB colour, so 0.0.0 will be black and 255.255.255 would be white.
You can use the Pano2VR colour picker to get the colour you require.


Screenshot 2021-05-28 at 19.28.50.png
Screenshot 2021-05-28 at 19.28.50.png (125 KiB) Viewed 21295 times

In the above screenshot, you can see the colour is black, so 0.0.0.

The last number is the alpha, so 0 is transparent and 1 is solid.

In the three skins attached you can see the CSS added to the background Rectangle.
GridMenu and menu_background

The Grid Menu lends itself to both desktop and mobile so the "both" skin has the vertical thumbnail and grid menu.
At 450px wide and below the grid menu will show and above this the vertical thumbnail menu will show.

For the Grid Menu, use the skin configuration button to set the Menu Title.
Also, use the skin configuration button to set if the vertical thumbnail menu will be open or closed on project open as well as show and hide the thumbnail titles.

Regards,
Attachments
thumbnail_vertical.ggsk
(3.12 KiB) Downloaded 305 times
thumbnail_grid.ggsk
(4.47 KiB) Downloaded 297 times
thumbnail_both.ggsk
(5.76 KiB) Downloaded 323 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Post Reply