Css3 Cross Browser Opacity

Which css properties for cross browser opacity are recommend for usage today?

.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%; 

/* Theoretically for IE 8 & 9 (more valid) */   
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);

/* Older than Firefox 0.9 */
-moz-opacity:0.5;

/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;

/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
  }

For today usage.

.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}

source

Cross-Browser Opacity Javascript Properties

He's making it seem like all of a sudden opacity works in every
browser old and new.

You can find browser usage stats here:

http://caniuse.com/#feat=css-opacity

caniuse.com estimates a global user base of 0.63% for IE8.

The other browsers (IE7 and lower, Netscape and Safari 1) are not listed.

How to implement Cross Browser Opacity Gradient (Not Color Gradient)

There's -moz-linear-gradient for recent Firefox versions and -webkit-gradient for WebKit browsers. Transparency for those two should be possible by using rgba colors.

https://developer.mozilla.org/en/CSS/-moz-linear-gradient

https://developer.apple.com/library/content/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html

The only real 100% cross-browser compatible solution is an image though.

css3 cross browser opacity

opacity: 0.5;
filter:alpha(opacity=50);

try this

jquery opacity cross browser?

this is probably better:

$(element).fadeTo(0, 0.5);

CrossBrowser transparent text with css

You can't. The only way to do anything like this is to have the "background with the text taken out" be an image that you put on top of the background image.

What transparent / Opacity Background Codes are compatible with ALL browsers?

I'm not totally clear which browsers you're looking to support - if you mean just all the modern browsers then you wouldn't be particularly concerned about compatibility - but anyways:

background-color: transparent; should work just about anywhere.

If you want an entire element to be partially opaque then you can use filter for IE8 and opacity for everything else, as shown here.

If you want to be able to set background-color (or any other colour) to a partial-opacity colour, you can use rgba, eg: color: rgba(255,0,0,0.5);. More info + support tables here here. Spoiler: it doesn't work in IE8.

CSS Cross-browser opacity from Javascript

There are various browsers-specific settings and notations you need to take into consideration.

See Quirksmode.org: CSS2 - Opacity

I suggest using a Framework like JQuery, Prototype, MooTools or Dojo. I know it seems ridiculous to add dozens of kilobytes of code just for some opacity at first, but it's really worth it. It just works in one way for all browsers.

CSS Cross Browser Timed Animations

Currently the properties are applied at the end of the animation, removing the element.

To simply hide on load and then show an element, use opacity:

• The animation can be simplified and written in the shorthand syntax
• The default iteration count is 1 so this can be omitted
• Specify an unprefixed property as well as the -webkit- most browers support the native property

Example

div {  -webkit-animation: hidemeforabit 3s;  animation: hidemeforabit 3s;  opacity: 1;}@-webkit-keyframes hidemeforabit {  from {    opacity: 0;  }  to {    opacity: 1;  }}@keyframes hidemeforabit {  from {    opacity: 0;  }  to {    opacity: 1;  }}

<div>Here I am!</div>

Cross-Browser Transparent Letters

A couple of thoughts.

This example isn't exactly what you have described, but the result is good and should work well cross-browser:

http://jsfiddle.net/panchroma/JHvgp/

The key CSS is

h1.figcaption { 
color:white;
position: absolute; 
bottom: 0px; 
left: 20px; 
font-size: 90px; 
opacity: 0.35;
filter: alpha(opacity=35);
text-shadow: 2px 2px 2px #000;
}

Alternatively, maybe it's possible to do something with with sIFR ... not sure about this though.

Good luck!

EDIT

Good suggestion from Adrien Be below -- with improved cross-browser transparency code:

http://css-tricks.com/snippets/css/cross-browser-opacity/

---

Related Topics