I need my visual content to become darker (like when modal Alert is shown). I've tried to look up in the source code of Alert and PopUpManager, but found only blur and fade effects there... Is there any basic Filter to do set content darker? Thanks
You can use ColorTransform with color multipliers:
component.transform.colorTransform = new ColorTransform(0.5, 0.5, 0.5);
There are 4 styles you can set on the global identifier in styles to set all modal popup background effects. I think you'll want something like this:
global
{
modal-transparency-blur:0; /* no blur */
modal-transparency:0.5;
modal-transparency-color:#000000;
modal-transparency-duration:0; /* no animation, goes straight to faded black. in ms */
}
What about creating a new UIComponent/Sprite whatever you use, making it black with opacity liek 50% and pushing on top of the display list just below stuff you want to show.
Related
My Figma element has transparent background but I want to get it solid, simple as that, and I can't find the correct way how to do it.
Which thing in the settings I should check?
To do what you want:
First:
make sure the element fill is 100%, when you are selecting the element layer itself, it's here:
Second:
make sure the frame itself has no grid active, so you can click the minus icon behind the grid section if it's active, like here:
I needed to remove layout grid for the whole page and colors became normal. I think that is so user could see the background grid so he could make the best possible design and then you delete it when you stop developing and your work is finished
Go to the fill section of the items settings and make sure the percentage next to the color is 100% or whatever opacity you want.
I have a button on which I set the background image using css, and then sometimes need to change it dynamically in the code. But if I change it, I see both images, one on top of the other.
Here's my css:
ExpertVideoButton{
cn1-derive: Label;
background-image: url(images/play-video.png);
cn1-source-dpi: 180;
cn1-background-type: cn1-image-scaled-fit;
}
And my code:
mStateMachine.findViewVideoBtn(f).getAllStyles().setBgImage(mStateMachine.res.getImage("no_video.png"));
The previous background image doesn't get replaced by the new one. Any ideas on how to solve this?
Update
The original background image wasn't actually being set from the css - there was a css style that was unused, and the image was being set from the code, twice. The first time I had made it the Label's icon, and the second time its background image. Unfortunately, this was a case of me having trouble reading my own code!
Since you use transparent images you need to set the bgTransparency of the style to transparent (0) in the CSS (not sure how you do it there).
I want to apply the following effect to the background. Right now, when popup come up, the background fades a bit. I am trying to make the background blur. I read that the .popup-container class is the outside background of the popup. For example changing background-color of the .popup-container to red makes the background red. I want to make the text or any content that is behind the popup blur .
I am trying to add blur but it does not seem to do anything. Can you please help? http://codepen.io/anon/pen/gPbQNZ
.my-popup.popup-container {
filter: blur(2px);
}
What you want to do is conditionally apply a class, using ng-class, to your entire view. Whether it's your ion-content or just some div or whatever. Then you can set the properties of this new class to blur just like you have above with the .popup-container.
The condition under which this class gets applied should be whenever your popup is open.
Example here
First timer here, I installed Lightbox and it is running brilliantly.
Buttons are not visible normally, but when i hover the where it should be, buttons becomes visible.
You have to check your lightbox.css file. By default Lightbox hides the controls. In the css you will see lines where the opacity is set to zero. So what you might be looking for is something like the following.
.lb-prev, .lb-next {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); //change to 100%
opacity: 0; //change to 100%
}
Since you say you say your a first timer I would recommend going through the CSS file and where you see something recarding the opacity change it saved it and check what it did, till you get the result you want.
I want to have a transparent background-color and I use gradient filter as a fallback of RGBA in IE. The code is like this:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bfffffff,endColorstr=#bfffffff);
I also want to trigger an event when the user clicks the background, but it seems like the click event doesn't get triggered after I set the filter. Everything is ok without the filter.
So is it another IE bug? How can I solve the problem?
This is probably related to the IE bug that makes links with transparent background no longer clickable: I came across it today. I had a link with a transparent background and display set to block: the main area of the link wasn't clickable, but a 10px border I set on it was. It seems IE also has problems with filters.
This kind of bug is discussed here and here. The first guy's solution is to give a fake background image to the element before setting the filter. The second guy's is to give the element a background colour and set the opacity to 1%, which will make it practically invisible in IE. Hopefully you'll be able to get round it using one of these.
This is not the deal.
Internet explorer creates the filters on a separate layer which is placed above your element and since the new graphic layer is not part of the element - which you have the click event on - there will be no event bubbling.
Recently I made a label element with a nice gradient filter for IE. Only the text can be clicked. If I analyze the label layers from the side with and without the gradient layer, then you will understand the problem.
without gradient filter:
------------------
text layer
------------------
background layer
------------------
with gradient filter:
------------------
text layer
------------------
gradient layer
------------------
background layer
------------------
By the way, that is the reason, why you cannot put a border radius on a gradient filter too. Try it. Create an element, and style it with border radius and give it a gradient filter and run it in IE 9. No matter how you try to force the gradient to stay inside the round borders - with for example overflow:hidden -, it will never obey. Its like a separate element which is positioned absolute and right above your element to cover it up and right under the text.