Can you use the CSS Filter attribute for IE gradients AND implement a background image?
/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c8bcf', endColorstr='#0068b3');*/
As far as I know the background has to be "transparent" or none for the gradient filter to work..
perhaps you could wrap the gradient div with another div and put the background image on the outer one?
Wait! it does appear to work, glad I checked..
Working Example (IE only)
sorry about that I really thought it didn't work with a background, but couldn't find a reliable source - anyway in that fiddle above I changed the gradient to go from transparent to black
I'm not convinced that it can be done. It appears that in the jsfiddle above, the hex values have an extra 2 "0"s in them. if you set the values to actual hex chars, the example does not work. perhaps the background will show through if the gradient is going from transparent to a color only
Related
We like to get a background on our responsive site that gives the shiny effect of chromed plating.
The real chrome effect is not possible with css. I think I need a picture instead of only css code. But how can I get the right height + width on pc screen + mobile (responsive). And what will me the size (WxH) to include in the css?
How do we do this in css without downgrading the site speed.
We only found images that do not fit our needs.
Thanks in advance.
You can use gradient property of CSS3 to make a chromed color effect using white, gray and black shades.
.yourclass{
background: linear-gradient(angle, color1, color2);
}
Here's the link below to know more about this property.
http://www.w3schools.com/css/css3_gradients.asp
You can see next examples:
Example 1
Example 2
In booth variants you need to use linear-gradient property.
I have a <div> which contains a bunch of <p>s and would like to have an opaque background image behind text, scaled to fill the entire <div>. I.e. no matter how much text I add or remove, the image should grow or shrink to cover the entire background of the <div>.
And only the image should have opacity. Text within the div should be solid black.
How do I do that, please? (and do I have to worry about browsers which do not support CSS3?)
[Answer] from o.p.
I stepped back and looked at the problem another way and found an answer which is cross-browser and does not need CSS3.
I fired up The Gimp and added opactiy into the image itself! Exactly what I sought to do, with no fancy CSS3 necessary ;-)
Thanks very much for your help, #JSW189. I hope you don't mind me posting in your answer, but this is the solution which I chose.
You want to use the background-image property to add the image, then background-size:100% to have the background image fill the entire div.
div {
background-image:url('image_url_goes_here.jpg');
background-size: 100%;
}
JS Fiddle Example.
Further, if you would like to toggle with the opacity, you can use the opacity property. It is set to opacity:1 (opaque) by default, but you can change that by toggling the opacity between 1 and 0. So, for example, if you want an opacity of 50%, you would use opacity:.5.
Opacity JS Fiddle Example.
Note that background-size is a CSS3 property. You can see a browser compatibility chart here. However, this problem can be solved by libraries like modernizr.
I was wondering how I can get shadow on all sides of a div in IE8. In addition to this I want another div that got shadow on all sides but the top.
I have managed to get the shadow on the right and bottom, but not around all 4 sides.. What does the direction property tell me? I have tried with different directions but with no success..
filter: progid:DXImageTransform.Microsoft.Shadow(Strength = 4, Direction = 135, Color = '#cccccc');
Not possible to use css shadows with ie (only ie9).
But you can use shadowOn. It's a great Image based jquery plugin and very easy in use to add shadows to html elements.
you can emulate what you want with http://css3pie.com/
that, or just add a partially transparent div behind your object that's slightly larger to act as a fake shadow
You may work around CSS Borders having glow effect here. You may change the colors and some others parameters.
Hope this helps.
I've added a gradient along with a background image to an element in IE 7 & 8, however the filter property seems to be changing the opacity of the background image so it's not as bright as it should be (instead of being a 1.0 opacity it's more like 0.4).
Does anyone know how to fix this?
I've created a JSFIDDLE so you can try it out. (only works in IE 7-8)
The problem is: IE puts the filter over the background-image, so it actually is not gaining the opacity, but overlaid with gradient.
So, the only solution to this is to add an extra block with image so it would be over the block with gradient, like this: http://jsfiddle.net/9UEGu/2/
If you don't want an extra div in your markup and not against expressions, you can do something like this: http://jsfiddle.net/9UEGu/3/
I have often seen stylesheets written where you have something like this:
#anyelement {
background:transparent url(../img/filename.png) no-repeat left top;
}
The value in question is the "transparent" value - what is the benefit of using this value? I have never really used it with my own css files and my PNG images still seem to work fine in all browsers that support PNGs.
Can anybody shed some light on the use of this value??
Thanks!
If you're inheriting a background color from another declaration then that should clear it out.
Unless I’m missing something, using transparent in a background rule doesn’t have any effect.
When you use the background shorthand property, it always sets values for background-color, background-image, background-position and background-repeat. Any values you leave out of the rule will be set to their default values, which for background-color is transparent anyway.
See http://jsfiddle.net/CN2aJ/2/
Some people might prefer their CSS to be more explicit, and thus include transparent in there for clarity. But I don’t think it’ll ever affect how the page is displayed.
The transparent value in this example is the background color (or lack thereof).
The first part of the background attribute is the background color. This is the color that is shown if the background image is not found. Transparent just means that it shouldn't show a background color. Transparent is also the default btw.