Why opacity is not mentioned within CSS properties?
div {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}
The link you provided was for css2 opacity was not added until 3.0.
For full support, browser prefixes/filters would be needed for older versions
You can find the specs here for css3 opacity
Related
I am using the below CSS to create a hover opacity for images. I'd like to be able to set a minimum allowance so only images of a certain size take on the opacity.
Ex. My 225x225 images are correctly taking on the opacity, but so is my large header image. I only want images 225x225 and below to take on opacity when hovered over, not all.
img {
opacity: 1;
filter: alpha(opacity=40);
/* For IE8 and earlier */
}
img:hover {
opacity: .8;
filter: alpha(opacity=100);
/* For IE8 and earlier */
}
Thanks for any help!
You can't use media queries on a single element, so you are left to use JavaScript here. There are new CSS rules in the making for this, but it's not reliable to use them at this point.
What you could do is add a listener the img tags with jQuery and review the CSS on page-load. If the image's size does not meet your requirements towards the opacity level, you could cap it.
As Allendar pointed out in his answer; use JavaScript for this, however if JavaScript isn't an option then you'll have to make a class and add that CSS class to each element you want to have the opacity effect on hover.
That transition thing works in Chrome but does not work IE 10. Though it supports CSS3, why doesn't it work?
.box {
-webkit-transition:background-color 0.2s linear;
background-color:#EBEBEB;
}
.box:hover {
background-color:#7bae31;
}
IE10 should support CSS3 transitions without the need for a vendor prefix. Drop the -webkit- part of your css, so that it just reads:
transition:background-color 0.2s linear;
You can see it working at:
http://jsfiddle.net/CnYtu/2/
For future reference, you can check IE CSS3 compatibility at:
http://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx
I stumbled onto this site: and started thinking. Is this possible using twitter's bootstrap? I don't see an opacity setting in the css file? Is it as easy as adding it.
In general, this is possible. Testflightapp uses the background-color: rgba attribute with an opacity level.
So if you want to set a background color with opacity to on of you element use this CSS:
elementname {
background-color: rgba(128, 128, 128, 0.5); /* Red [0-255], Green [0-255], Blue [0-255], Alpha [0-1] */
}
If you want to set the opacity on the element as a whole use:
elementname {
opacity: 0.5; /* opacity [0-1] */
-moz-opacity: 0.5; /* opacity [0-1] */
-webkit-opacity: 0.5; /* opacity [0-1] */
}
This is only supported by browsers that support CSS3.
A late answer, but I just found this question whilst looking up something very similar.
If you're using bootstrap with less, so that you're building the css yourself as part of an asset pipeline you should set opacity using the utility macro.
selector {
.opacity(50); /* opacity [0->100] */
}
It'll define the correct browser prefixes, including the IE filter syntax for you.
If you are using bootstrap with sass. You can use the opacity mixin.
#include opacity([from 0-100]);
This will take handle all browser compatibilities (if supported) dealing with opacity.
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/
I am using CSS3 transitions on my site and the -webkit- seems to be working, whilst the -moz- is not.
Here is the CSS:
article {z-index: 2; float: left; overflow: hidden; position: relative; -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; }
.mousedown{-webkit-transform: translate(-180px, 0) !important; -moz-transform: translate(-180px, 0) !important; }
Just using jQuery to add the mousedown class onto the article.
Any idea where I am going wrong?
Firefox 4 and above supports -moz-transition. See the documentation page.
Currently, transitions aren't supported on CSS transforms in Mozilla.
https://developer.mozilla.org/en/CSS/CSS_transitions
Support for -moz-transition has been added in Gecko 1.9.3 (Firefox 3.7), so right now -moz-transition will only work in a Firefox 3.7 alpha release or Minefield (Firefox nightly build).
UPDATE: see comments. Support for -moz-transition has now been added. Yay!
There is no such thing as -moz-transition (yet), sorry. Mozilla will do transforms, but webkit is still the only engine rendering transitions.
opera is supporting it since 10.5, and much better than webkit
CSS transitions, provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.