I have a very simple requirement, make a link look disabled. Why is it this hard??
.disabled {
-moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); opacity:.50;
}
Is my style. I have applied it to an li...but in IE7 it just does nothing. FF and IE8 it seems to work in, but IE7 is just rubbish
Any clues?
As far as I remember, an element needs either layout (e.g. "zoom: 1") or a background color for filter:alpha to work.
Can i make a suggestion that I appreciate not exactly what you want but would give you an effect similar to opacity.
Open your image editor type some text in your default link colour
Change the opacity to 50%
Capture the new colour value
.disabled {
color:#yournewcolorvalue;
}
for example if i take default blue link color #0000FF
the 50% opacity value is #7F7FFF
It needs explicit dimensions or a zoom factor to "have layout" in IE land.
Not sure, but try 0.50 instead of .50
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity:.5;
Related
I have a document that I can't edit the HTML of (a payment page on Shopify) so for security reasons, they don't allow you to edit this (unfortunately, same as the javascript).
You can however, edit your own css. So this is why it must be css only if possible.
I want to basically replace text via css. I know that this itself isn't possible, but this is how I've managed to do the next best thing:
HTML
<P>This is some nice text here</p>
CSS
p:before{
content:'This text has replaced the original.';
visibility:visible;
}
p{
visibility:hidden;
}
JsFiddle - Codepen (for viewing in IE8/EI9)
For the most part, this works and for now is our preferred method.
However, in IE8/EI9, visibility is not supported. (Source)
I've tried other methods such as:
display:none;
and
opacity:0;
but both of them hide :before.
I have also tried to change the text color to the background color, but we don't like the idea of having the text still on screen if highlighted (I know, beggars can't be choosers).
My question is: Are there alternatives to this approach that work in IE8/EI9?
Thanks.
You could use font-size : http://codepen.io/anon/pen/KuJln
p:before{
content:'This text has replaced the original.';
font-size:16px;/* if rem not supported */
font-size:1rem;
}
p{
font-size:0.01px;/* 0+ for ie , yep :) */
}
You can change the color.
http://jsfiddle.net/Epte8/1/
If you don't have a solid background, you could use rgba for IE9 to set the transparency of the color, but that is unfortunately not supported in IE8 (I don't think you can set a transparent text color there).
You know the part of a modal popup (image lightbox, yes/no dialog) that dims out everything behind it? I call it the Blanket. Cozy.
Anyway, I want my modal to be tucked in by a blanket who is half see-through. I can't seem to get it to work in IE7 and IE8.
Based on my readings from
This CSS Tricks Snippet,
This Quirksmode Article,
and Satzansatz's Article on the Quirky Behavior IE's Schizophrenia Can Yield,
This is what I have come up with:
.blanket {
z-index:100;
position:fixed; top:0;right:0;bottom:0;left:0;
/*//////*/ background:black; /*//////*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
It doesn't work at all. I have no idea why, and I haven't found any permutations where it does work. At all. I can't even make a little static-positioned black square. What's going on?
How can I make opacity work across all significant browsers?
CodePen
The Fullscreen CodePen Result (for testing in IE)
In IE7 & IE8, I just see pure black.
Am I going crazy? Let me know if I'm going crazy..
But I'm starting to suspect that maybe IE10's "Browser Modes" emulation shit is quirky, insufficient, and responsible..
Was it something I've done? Or didn't!?
I have a class called "button", I simply use it for all hover elements. Most of my buttons are black (background-color), and the .button:hover changes the background-color value of the items to gray.
However, some of my buttons have random colors so they lose the effect when their background-color changes to light gray. for this reason, I would like to change the "satauration" value of the hovered item instead of modifying the whole color. That way, the hover effect will base on the base color..
I was thinking... if it is possible to change the "saturation" value (only) of the background-color so that my hover effect will still be useful for random colors.
Using filter currently seems to only work for webkit-based browsers..
-webkit-filter: saturate(3);
filter: saturate(3);
Demo | Source
Coupling the saturation filter with brightness seems to have the most effect, with the black being visibly affected
-webkit-filter: brightness(0.2) saturate(3);
filter: brightness(0.2) saturate(3);
Demo | Source
Additional demo: http://html5-demos.appspot.com/static/css/filters/index.html
There are two solutions for this problem:
First, use a transparent png with a white to transparent gradient. On onHover, apply the image over the button. I haven't tried it but it looks promising.
Second, use a css inset dropshadow. With the parameters set correctly, you can easily manage the gradient effect.
You can also use rgba(r,g,b,a) for making changes to the underlying button color. But remember that the text value of the button will also get affected, giving you issues of usability.
I found a Stackoverflow article on creating text shadows in IE: StackQuestion
Now I tried all of the 'filter' solutions in there, and in IE9, the text renders horrible(although the shadow shadow shows, the text pixelates heavily...).
Does anyone know of a proper text-shadow technique for IE? Even if it is just for IE9...
Thank You
Check this site out: http://css3pie.com/
It's a plugin that enables you to use CSS3 in IE6-9
You can get text-shadow effects in Internet Explorer, taming IE's crunky filter shadow effects, forcing them to look okay and stop pixelating the text. Use the IE Chroma filter:
Set a background colour that is close to, but not the same as, your shadow colour - e.g. for black shadows, a dark grey, for white glows, a light grey
(set the background colour in a stylesheet or style rule inside an IE-only class or conditional comment, to not wreck your design in every other browser!)
Precede your IE filter CSS rule with a Chroma filter set to the same colour as the background fill
It looks (almost) quite good!
jsfiddle examples (load in IE8, IE9)
...or if you don't have easy access to IE8/9, here's a screenshot from that fiddle in IE9 IE8 mode. Notice the difference between the horrible, artifact-ridden, pixelated mess that is IE's default filter, against the quite crisp, normal-looking Chroma filter equivalents.
CSS code examples. Note how you've got a Chroma filter then another filter, all on one line, in quotes against one -ms-filter - and how the Chroma colour matches the background colour precisely, and how the Chroma colour compliments (but doesn't match) the main effect colour:
.chroma-glow {
background-color: #dfdfdf;
-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#dfdfdf)progid:DXImageTransform.Microsoft.Glow(color=ffffff,strength=4)";
}
.chroma-shadow {
background-color: #dfdfdf;
-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#dfdfdf)progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ffffff)";
}
Some requirements (learned the hard way...)
Elements must be block or inline-block, can't be inline.
Filters fail to apply to any children that are position: relative; or position: absolute;
(they work if applied directly to position: absolute; or `position: relative; elements)
If you're adding the filters dynamically, e.g. with jQuery like $elem.css('filter','progid...');, it seems like the background colour must be applied directly to the element with the filter for the chroma to work. A couple of tips:
Have the effect colour, applied background colour, and chroma colour all identical
Since you'll want this background colour only in IE, use feature detection or IE detection.
#element {
filter: glow(color=black,strength=5);
}
How do I change the highlighting color of <select> that is the color that highlights <li> while cursor passes over it by using CSS?
No idea what you mean about "the color that highlights <li>", but it sounds like you want to change the background colour of <option> elements. I tried it and it doesn't work, you always get the system color.
If you wanted to highlight the entire <select> element on mouseover, this kinda works:
select:hover { background-color: red; }
However the behaviour is different in different browsers. For example, Chrome doesn't highlight the options in the drop down; Firefox does, but then it doesn't change them back if you move the mouse away and they are still pulled down.
As has been stated on many, many similar questions, you can't reliably style form controls. See here for more details.
You can't change the highlight color of the options through something like -> background:#f9f9f9
You can do something like this:
select > option:hover{
box-shadow: 0 0 10px 100px #FED20F inset;
transition: all .2s ease-in-out;
}
As mentioned above, setting background-color will work however :hover is buggy in IE7 - setting your doctype to strict will help.
You can use the :hover pseudo class
eg
.classOfElementToColor:hover {background-color:red; color:black}
Works with most browsers, but not on all elements in IE6
Simply use this CSS selector:
select option:hover {
background-color: yellow;
}