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.
Related
I have a PNG image containing a white logotype. Is it possible to change the color of the logotype from white to red using CSS only?
Solution 1:
You can convert the .png to .svg and change the color by code.
Solution 2:
A png with your logo in the middle, transparent, over a container, and changing the container's background color.
CSS filters, once they have more browser support, will be able to change display of images in some ways, but the best shot for changing the color that I see in very brief scrolling through MDN documentation would be hue-rotate, and I'm not convinced that could turn white into non-white.
This is how you do it with CSS filters
.white2red {
filter: sepia(100%) saturate(100);
}
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'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 a menu with 5 items of varying text length - home, about us, contact us, etc
In the mockup in photoshop, I created a background image for the hover state but if it's longer than the text it gets cut off and it doesn't work in IE. The image is 105 X 28. Here's a link to example You'll see when you hover the background image gets cutoff. How can I fix this? Thanks
add a css rule to #main-nav li a{ min-width: 105px;}
I would recommend having a fixed size though ie 105px.. and then text-align:center for each of the menu items so they all line up nicely .. but that is up to you
The buttons aren't wide enough for the background image.
Give each li tag either the style width: 105px; height: 28px; or make a CSS class with that styling and apply the class to each one.
You can try using a rectangular background image and using the CSS border-radius attribute to round the corners.
If that doesn't get you the look you want or isn't compatible enough, the usual way is to make the image in three parts. The two ends plus a middle section that can be stretched or tiled.
A third approach is to use a rectangular background image again, and then creates "masks" which are images of the corner cutouts (which are same color as background) that are overlayed on the main background image to make the corners appear rounded. I haven't seen this approach as much since the border-radius attributes became widely supported.
Here is a pure CSS solution...
http://jsfiddle.net/wdm954/tAaCF/1/
Basically using CSS3 border-radius and box-shadow to replace the need for an image. This is going to be a bit less stylish in older browsers. For simple styling like this it shouldn't be a deal breaker if those who are already suffering through a lack of CSS3 across the Web don't get to see some pretty rounded corners. The older browsers will still show a blue background on hover.
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