Log in to AnswerLog in to Follow
UserImage.jpg
karam sawalha
29Views
2Comments
Solved
UI HELP
Question
Android
Mobile
Application Type
Mobile

Hi,

Please look in the attachments, how can i make this gloosy effect like in the containers.

Regards

Screenshot 2022-08-02 181423.png

0
0
9 days ago

Hi karam sawalha,

For glossy effect you need to inspect the element and adjust glossy effect as you  want  using  second slider .

after that it generate a Hex code,  then use this hex code for your container background  color for glossy effect.

In your share picture container background color is white so first select container background color white after that adjust glossy effect using second slider  .

so here the glossy effect  background color code is 

          background-color : #ffffff66;


 if you not find hexcode then use arrow down/up for change  code to Hex code.


Demo link : https://personal-x1ixzlcz.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/MyTasks/Screen1?_ts=637950854290201579


I'm also attach .oml file  , please check it .

Thanks

GlossyEffect.oml

0
0
9 days ago

Hello

The image you have shared, they have used Cards over there or Containers and as I can see they are translucent this is known as Glassmorphism, it is a term used to describe UI design that emphasises light or dark objects, placed on top of colourful backgrounds. A background-blur is placed on the objects which allows the background to shine through – giving it the impression of frosted glass.  


So to achive that follow the steps.

  • You can do that both on card or container depends on you.
  • You need to apply CSS to your theme or on a perticular screen, I am attaching the CSS that you can use.  


                       background-color: rgba(255, 255, 255, 0.2);   

                       backdrop-filter: blur(8px);    border: 1px solid rgba(255, 255, 255, 0.15);    

                    

  • Sample Images - 



  • These are two main CSS properties by which we can acchive that rest you can customize.
  • You can control the blur by reducing it -  blur(8px); 


Also I am attaching Oml for your refference and Sample Have a look at it

I hope this helps.

Best Regards 

Tousif Khan

SampleMobile.oml

0
0
8 days ago
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.