I am using CSS3 PIE for adding CSS3 Rules to IE.
http://css3pie.com/
It's great but I have a little problem now m using a semi transparent image for the background and PIE.htc automatically adds a gray background.
"background-color:Transparent;" is not working for me.
My question is this: how can I use CSS3 PIE with transparent background?
Okay, well the problem is that you are probably setting just the background property but not the generated -pie-background property. So, try this -pie-background: transparent;. Sorry, I may not be of much help because I am not familiar to CSS3 PIE.
My guess is that you're running into this issue: https://github.com/lojjic/PIE/issues/12
If you have a box-shadow applied, PIE draws that shadow all the way behind the background area of the element rather than making it transparent like other browsers. So if your element's background is transparent then you will see through to the opaque shadow shape behind it. Unfortunately there is no workaround other than removing the box-shadow.
Related
I have tried to make gentle zooming backgrounds like on this site http://iworks.ozythemes.com but with css3. I have tried transforming with scale on the body but then everything scales, which I don't want.
Any clues?
How about the background-size CSS3 property?
You can change the value of it with javascript.
Unfortunately currently have no method to zooming a background image using css,maybe you can try background-size:cover; to fit the background image.
I have a page where the body is set to a background colour. I have a fixed-position footer that is above some text that scrolls behind it.
I have used a css3 gradient to attempt to create a sort of fade effect, but there seems to be a brighter line occurring somewhere along the gradient. Any tips to remove this line would be greatly appreciated. Ideally, I would like to avoid using images as the colours are changing dynamically across various pages, so it would be nice not to have to create a new background image for every colour.
I have created a jsbin to demonstrate:
http://jsbin.com/okedut
I also took a screenshot and increased the contrast/size in photoshop which confirms there is indeed a line appearing for some reason:
It seems like a browser bug when you are using rgba values.
The effect that you want to achive can be done with CSS masks.
http://www.webkit.org/blog/181/css-masks/
For FF you can use a SVG solution:
https://developer.mozilla.org/en/applying_svg_effects_to_html_content
I'm using CSS3 PIE to do border-radius, drop shadow and transparency effects to make the transparent area around the main of the page. I'm trying to make it look like this:
http://www.palosverdes.com/rpv/re-design/JANUARY-2012/C-10.html
Here's my current version:
http://www.palosverdes.com/rpv2012/indexforie7.cfm
This renders the effects I want in the modern browsers, but in IE7 the drop shadow seems to be filling the area that should be transparent. Here's a screenshot:
imgur.com/lD0JG (I still can only post two hyperlinks, sorry)
Any ideas what might be causing the problem?
It turns out that css3pie doesn't support drop-shadow on items that are not opaque (it shows through). Here's the relevant link: css3pie.com/documentation/supported-css3-features/#box-shadow As far as I can tell, this problem can only be resolved in ie7/8 by using a png-based drop shadow with some css or adding the drop-shadow as part of the background-image for the div.
I want to give a div a gradient with multiple color-stops, which IE's filter property does not support. Anyone have a creative workaround to simulate the color stops in IE?
I already thought of creating multiple divs right next to each other... anything else?
Thanks!
Multiple divs with coordinated gradient colors is the best way (short of using images) to create 3+ color gradients. See fiddle below for a working test:
http://jsfiddle.net/Hauhx/
I'd recommend you to use a background image as a fallback for browsers (as Opera and IE) that don't support CSS gradients.
Or use CSS3 PIE. Way easy.
From Setting linear gradient's starting and ending position in MSIE 9 and older
div {
background-image: -moz-linear-gradient(360deg,rgb(255,255,255) 25% ,rgb(241,123,25) 75%);
-pie-background: linear-gradient(360deg,rgb(255,255,255) 25% ,rgb(241,123,25) 75%);
behavior: url(/PIE.htc);
}
Update: if the div has a top margin then it seems to do away with it. At least in my case. Don't know if it's a combination of two things.
For things like menubars and headers, a background color is nice.
But a background color that gracefully transitions from say Blue to White is even nicer.
I know this can be done by making a 1-pixel wide, X-pixel tall image file containing the desired fade and repeating it across the div, but does CSS have native support to just define colors and be done with it?
Can any other language handle this?
With CSS3, you can do that. However, CSS3 is not widely supported through browsers, so only the most recent of browsers (and not even all of them) will be able to display the gradient. Unless you're only interested in working with those browsers that can do it, you're going to have to stick with the 1px background image.
http://www.quirksmode.org/css/contents.html
http://www.w3.org/Style/CSS/current-work#CSS3
You mean a gradient?
Webkit browsers(Chrome and Safari), and apparently FF 3.6 now support CSS gradients:
see this link
According to the article, even IE has some proprietory CSS gradient support, I don't know how well that works though. You should always have a fallback to solid color though.