Is there a way to REMOVE completely the Transparency on Toastr.js?
I tried to change the various lines on the .less files
.opacity(#opacity) {
#opacityPercent: 100; // instead of #opacity * 100;
opacity: 1; // instead of #opacity;
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{opacityPercent})";
filter: ~"alpha(opacity=#{opacityPercent})";
}
and every place where it stated opacity(x) where x was not 1 but it still displays opacity.
I also tried to add the following lines on my own CSS
.toast {
opacity: 1;
}
#toast-container > div {
opacity: 1;
}
but i still get the semi opacity on div message display. On mouse over, the div color becomes full (no transparency). I'm trying to always have it full color (no transparency).
Try overriding it using !important:
.toast {
opacity: 1 !important;
}
#toast-container > div {
opacity: 1 !important;
}
You can also try "inspect element" in Chrome to see which css tag is causing the opacity.
If that doesn't work, can you perhaps provide a link to your page?
It Depends on What You Mean by "Remove"
If you don't want the mixin generating any CSS at all, but also don't want to remove all the mixin calls within the code, then just do this (comment out the code):
.opacity(#opacity) {
// #opacityPercent: #opacity * 100;
// opacity: #opacity;
//-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{opacityPercent})";
//filter: ~"alpha(opacity=#{opacityPercent})";
}
The above will "do nothing." If you want some type of CSS generated (for some reason, I cannot think of why), but you do not actually want to have that code apply any opacity setting in the browser, then give it a bogus value that the browsers will ignore, something like this:
.opacity(#opacity) {
#opacityPercent: bogus;
opacity: bogus;
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{opacityPercent})";
filter: ~"alpha(opacity=#{opacityPercent})";
}
You can check out that the above generates no opacity within a browser by looking at this fiddle and examining it with an inspection tool (like Firebug, etc.).
I really believe you seek the first option however.
The following works with v2.1.3
#toast-container > div {
opacity: 1;
}
With the !important flag, there would be no fadeIn and fadeOut.
Related
I'm trying to do an hover effect with a svg. This is the effect I would like to achieve. When I do a mouseover on the two paths and the text, I want the other paths and texts to have a lower opacity (I did this part), but I also want the the percentage to appear. When the mouse isn't over anything, I want all the paths and texts to have an opacity of 1 and no percentage visible.
I used this code to change the opacity of the paths
.tracciati:hover > g {
opacity: 0.25;
}
.tracciati:hover > g:hover {
opacity: 1;
}
This is the code: http://jsfiddle.net/ysrzjs28/
I refactored your html to include the percentage elements next to their respective graph elements. This made it easier to select the sibling element for display using CSS. Since there is no parent selector in CSS, you would have to use jQuery or javascript to achieve the results you want using pure CSS. I added a container g element and re-assigned your classes. The CSS looks like this
.container:hover > .tracciati {
opacity: 0.25;
}
.container:hover > .tracciati:hover {
opacity: 1;
}
.percentuali {
opacity: 0;
}
.tracciati:hover + .percentuali {
opacity: 1;
}
Here is a working fiddle: http://jsfiddle.net/ysrzjs28/2/
I'm trying to use Angular-Strap to handle modal opening/closing from the controller. However the backdrop animation CSS given on the Angular-Strap docs keeps giving me errors - pretty sure I'm using it wrong, but I can't seem to find much info on how to use the CSS. Here's a plunker of the problem. It seems like it's the ampersands causing problems. Here is the code given on the angular-strap docs:
.modal-backdrop.am-fade {
opacity: .5;
transition: opacity .5s linear;
&.ng-enter {
opacity: 0;
&.ng-enter-active {
opacity: .5;
}
}
&.ng-leave {
opacity: .5;
&.ng-leave-active {
opacity: 0;
}
}
}
Edit: To further clarify, opening/closing the modals doesn't cause me problems. The CSS actually does seem to work until it gets to the &.ng-enter.
Changed CSS to look like so:
.modal-backdrop.am-fade {
opacity: .7;
transition: opacity .35s linear;
}
.modal-backdrop.am-fade.ng-enter {
opacity: 0;
}
.modal-backdrop.am-fade.ng-enter.ng-enter-active {
opacity: .5;
}
.modal-backdrop.am-fade.ng-leave {
opacity: .5;
}
.modal-backdrop.am-fade.ng-leave.ng-leave-active {
opacity: 0;
}
I see you've effectively figured out the problem, but for completeness' sake: the syntax with the ampersands is using LESS CSS style syntax.
As you assumed, the ampersand is used as the parent element, so in this case, '&' gets preprocessed to become '.modal-backdrop' because it is used within the braces of the .modal-backdrop's CSS.
LESS adds a layer of syntactic sugar on top of CSS, but requires a pre-processor to do a pass over the LESS to convert it all to standard CSS, which is why it wouldn't have worked for you until you manually did the preprocessing.
See: http://lesscss.org/
(Note: I'd add this as a comment instead of an answer, but I can't yet comment on posts because I don't have enough internet points.)
I have a issues with css filters for IE8 ... I have one div with gradient background and this div need to have opacity 0 .. when you hover with mouse over div he get opacity 1 ... my code look like this...
#myDiv {
filter: alpha(opacity=0);
opacity: 0;
background:rgba(75,29,79,0.85); /* For modern browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#D84B1D4F', EndColorStr='#D84B1D4F')"; /* For IE8 */
}
and then I have hover for this div
#myDiv:hover {
filter: alpha(opacity=100);
opacity: 1;
}
but it does not work .. I guess because it uses both filters, Is there an option that they work together?
Make sure that the display property is set for both. For instance: try setting display:block for the aforementioned div.
Also you can reset the transparency with -ms-filter: "";
Try:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#D84B1D4F",endColorstr="#D84B1D4F",GradientType=1);
Bear in mind that the first 2 digits of your rgb value are setting the opacity so there is no need to use opacity as well. You could use visibility:hidden for example.
In my CSS I have the following:
.Thing {
filter: alpha(opacity=40);
opacity:0.4;
-moz-opacity:0.4;
}
.Thing button {
filter: alpha(opacity=100);
opacity:1;
-moz-opacity:1.0;
}
However, the button is still .4 opacity. I then try opacity: 2 and such and it looks like I can give it less opacity but not more. Is there a way I can remove it or do I have to write multiple rules to get everything but the button?
I am testing with Firefox and Chrome.
use rgba with a rgb fallback.
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.5); /*ie6 will ignore this*/
rgba will only apply opacity to the target element.
What i've recently been doing is using the rgbapng sass/compass plugin which generates a png image to use as a fallback for browsers without rgba support.
Note: you'll still need to use an ie6 png fix for this to work.
Not a fix for the opacity issue but a possible workaround.
How about removing the button from the normal document flow and then placing back inside the .Thing
Something like this: http://jsfiddle.net/CqgkM/
Can I control the visibility of some div in my website and make to become see-through using CSS only? In flash it's done through controlling what is called Alfa so I'm wondering if such a thing exist in CSS!
Edition 001
Can I control the opacity of the div's background only? So the text in the div wouldn't be effected?
You can use opacity in CSS
.transparent_class {
opacity: 0.5;
}
I think there are some problems with opacity in Internet Explorer so here is example how to change transparency in IE:
.opaque1 { // for all other browsers
opacity: .5;
}
.opaque2 { // for IE5-7
filter: alpha(opacity=50);
}
.opaque3 { // for IE8
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
HTH
http://www.quirksmode.org/css/opacity.html
.opaque1 { // for all other browsers
opacity: .5;
}
.opaque2 { // for IE5-7
filter: alpha(opacity=50);
}
.opaque3 { // for IE8
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
Another way to make only the background transparent is by using a transparent png as background-image, and then use this jQuery fix for the special snowflake IE. This works in all browsers as far as I know.
Here is a good link talking about CSS navigation menue I hope it would be helpful:
http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml