frosted glass

[Michael4771079]

Hi,
I have a collapsible content area which is set to transparent with css, I have a grid on the content and I would like to make the grid cells frosted, like the selectmenu in ios7, is this possible, heres a s/s

[Maryna Brodina]

Hello!

You would need to use custom CSS http://docs.appery.io/documentation/w...

[Michael4771079]

Cheers Maryna,
I have the collap content area set with css

.ui-collapsible-content {

background: transparent !important;
}

and the grid cells are set with a colour in the properties menu, I was trying to imitate the frosted glass look with either of these components

[Alena Prykhodko]

Hi Michael.

Please use the following style to make background-color with opacity:
pre

background-color: rgba(0, 120, 201, 0.7);/pre

Read more about this solution: http://stackoverflow.com/questions/63...

[Michael4771079]

Hi Alena,
cheers for that, I had a look, but maybe I didn't ask correctly.

Here is a link to a demo of the effect I would like to implement on a collapsible block content area.

In this demo it about the header, if you scroll the screen you will see what I am trying to do

Do you think this could work in appery.io for the collapsible block content area.

thanks again

[Michael4771079]

link,
http://ionicframework.com/demos/frost...

[Igor]

Hi Michael.

Sorry but this is complex effect. It could be implemented but it's not easy.

This effect builds on the copy of the content.

For this content copy applying the following CSS:

pre
-webkit-filter: blur(15px);
opacity: 0.5;
/pre
And make sync between real content and this copy when scroll.

So you have seen two copies of content simultaneously. Top - blured and bottom - normal.

Also you can see about filters here: https://html5-demos.appspot.com/stati...