I am trying to to overlay some rotated text over my images but I am having some difficulty with it. Here is my code without all the jQuery: http://jsfiddle.net/vCbcz/4/
Issues:
The span does not align with the div after the rotation
The background transparency isn't showing up in Internet Explorer even though the span is positioned and I have added filter: alpha(opacity = 30); to my css.
EDIT: I would like the spans to look like http://jsfiddle.net/vCbcz/6/ except with rotated text. Please don't tell me to put the text in a seperate container.
Setting left:-25px; on the spans fixes it for me in Firefox. See here.
Edit
With regards to IE, the reason your alpha filter isn't being applied is because your second filter: is overwriting your first. If you want them to both be applied, you put them in the same filter: separated by a space like so:
filter: alpha(opacity = 30) progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
I noticed that in IE the left:-25px; makes it worse so perhaps you'll have to do some conditional comments or CSS hacks to get around it. (Icky!)
Just a warning, this doesn't work in Opera at all.
Edit 2
Here's my changes with fixing IE's bugs and supporting Opera and possibly other browsers if they support the CSS3 transform property.
Related
I created www.studycraft.net but then noticed that in Internet Explorer the shadow that goes across the background is at an angle (In Safari, FireFox and Chrome it's a straight vertical edge). I asked on the theme's developer's site how can I make it straight and he had told me to add this to my custom css box:
.angled-background {
transform: initial;
}
(this may have fixed it for Chrome and/or Firefox, I had only really tested it with Safari and IE before having this "transform" property set)
This does seem to be the right element because this is where he fixed another issue where this shadow wasn't always (certain window sizes) wide enough to cover the title and made that text hard to read against the non-shadowed background - my .angled-background actually looks like:
.angled-background {
min-width:1250px;
display: block;
transform: initial;
}
But in any case, this doesn't seem to fix it for IE - the shadow stills has an angle and it even cuts back in at a certain window sizes to make a strange looking corner to the shadow and then looks really bad. Here's a pic:
thanks for any help.
I heard back again from the theme's developer and he provided the solution - it should be "transform: none" instead of "transform: initial". So the correct code is:
.angled-background {
transform: none;
}
Is there a css-way to grayscaling a div with a properly percentage?
I can do this in non-IE browsers with webkit support:
-webkit-filter: grayscale(0.7); //e.g. 70%
But in IE I can only use a boolean function like this:
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); //with '1'
Can I find out a way (possibly a not-svg way), I can grayscaling an image with a percentage with?
Check this link desaturate
Browser Compatibility:
Internet Explorer 5.5+, Opera 9.5+, Firefox 2+, WebKit Nightly
#A.K's suggestion looks good, although I couldn't immediately see how to do partial grey-scale...
For a CSS-only solution - you can achieve a similar effect by making whatever you want to grey-scale partially transparent and putting a background colour behind it, like this:
http://jsfiddle.net/R23LG/
Obviously you'd want to play around with the transparency settings etc. to get it how you want it.
There are many working solutions to display transparent pngs correct in IE, but all these solutions will not work if the image is in a rotated container.
I' ve tried
img{
background: transparent;
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)”;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
zoom: 1;
}
to work around IE' s transparent png bug, but it does not work.
Ive created a show case at .
http://jsfiddle.net/s__a/Hmyc2/
Please be shure you visit this with Microsoft Internet Explorer 7, rotation is not implemented there for IE8.
Can anybody help to display the rotated image correct in IE7/IE8?
Best regards.
Solid Background Only Solution Found
It took some digging around to piece it together. My first lead was this site, which yielded the following change of code. Actually, I just now noticed, what I have below is the same code you said didn't work in your question, but yet it does for me... recheck my fiddles and see if it works for you now. Note that in this fiddle it worked for IE7 but not IE8 (the img does not rotate).
.test-1{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF,endColorstr=#FFFFFFFF)";/* IE 8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF,endColorstr=#FFFFFFFF); /* IE 6 & 7 */
clip:rect(0px 276px 267px 0px); /* top,right,bottom,left */
}
So a little more digging and a Stack Overflow answer helped make a fiddle work for IE8 too! The IE8 final fix was that the item being transformed with the Matrix filter needed to have a z-index added in order to correct the bug of it not rotating the child img element.
However, this "fix" is apparently still only a partial one. The issue on the rotated element remains at present for any transparency to the background itself, because if the alpha value for the gradient is set to transparent #00FFFFFF then it only functions on the non-rotated element.
When I use only rounded corners on my div, it looks about how I expect in IE9.
border-radius: 7px;
However, when I add the following line to make a drop shadow, I get an unexpected effect:
filter: progid:DXImageTransform.Microsoft.Shadow(color='#818181', Direction=135, Strength=3);
Here's a screenshot of the effect. I'm referring to the ugly little black corners suddenly appended to my light blue div:
http://imageshack.us/photo/my-images/406/blackcorners.png/
How can I get rid of that?
IE9 supports box-shadow natively, so there's no need to use the old filter style.
If you're using the filter for the benefit of older IE versions, then it may be that both shadows are coming into play in IE9, and slightly different, thus causing the weird effect.
My first suggestion is simply to drop the filter style. This will mean that versions of IE won't see the box shadow, but it's not really a critical element of the layout.
If that's no good, then I would suggest using CSS3Pie to implement the box shadows for older versions of IE. As a bonus, it'll do the border-radius too.
With CSS3Pie, you can use the standard CSS box-shadow style in older versions of IE, and not need to worry about the filter style. And, to show how it directly answers your question, it will switch itself off automatically in IE9, so you won't get the double shadow effect.
Hope that helps.
I have the two images below.
They are the same image, with one having a slight glow effect on the text.
They are setup as below:
<div id="header"><a></a></div>
withe the original image being the background for the div, and the 'glow' image being the background for the anchor tag, with display:block; width: 100%; height: 100%;opacity: 0;
i am the using the below jquery code
$('#header a').hover(
function() {$(this).animate({"opacity":"1"}, 1000);},
function() {$(this).animate({"opacity":"0"}, 1000);});
to fade the anchor image in and out on hover.
this works fine in firefox, chrome ect.
But in internet explorer the image is given a solid black background where there is transparency.
How can i fix this?
NB: I am only worried about ie7/8 not 6.
http://webspirited.com/header-reachsniper.png
http://webspirited.com/header-reachsniper-hover.png
Update
I have decided that this is simply not worth my time to do in internet explorer.
However this works perfectly in ie9, so i guess ill remove this effect for browsers less that ie9.
In order to set the opacity of a transparent PNG image, you need to use the AlphaImageLoader filter, even in IE8.
EDIT: You also need to add the alpha filter in the CSS, like this:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path", sizingMethod="scale"),alpha(opacity=100);
Otherwise, jQUery will clear the existing filter as it adds the alpha filter.
This post from Dave Shea's mezzoblue.com may help you: http://mezzoblue.com/archives/2010/05/20/ie8_still_fa/
It notes all of the methods which he tried, and the final solution he arrived at the end:
What did work was a little library
called DD_belatedPNG that applies PNG
transparency via VML instead of
AlphaImageLoader. It’s designed for
IE6, but it works just fine in IE7 as
well. For IE8, I was forced to throw
out an X-UA-Compatible meta tag and
step IE8 down to IE7 mode for this
particular page.
With a tiny caveat at the end
It’s still not perfect. I noticed a
faint white bounding box poking
through at lower opacities that forced
me to slightly adjust hover effects
for all versions of IE. But you know,
for all that, it’s darn well good
enough.