Top css3 Questions

List of Tags

I want to use CSS3 gradients for my background color and then apply a background-image to apply some sort of light transparent texture. Is this possible?

Answered By: Gidgidonihah ( 393)

Yes, you can.

background: #6cab26;
background-image: url(IMAGE_URL); /* fallback */
background-image: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: url(IMAGE_URL), -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
background-image: url(IMAGE_URL),    -moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
background-image: url(IMAGE_URL),     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
background-image: url(IMAGE_URL),      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
background-image: url(IMAGE_URL),         linear-gradient(top, #444444, #999999); /* W3C */

These 2 lines are the fallback for any browser that doesn't do gradients. See notes for stacking images only IE < 9 below.

  • Line 1 sets a flat background color.
  • Line 2 sets the background image fallback.

The rest set a background image and gradient for specific browsers.

  • Line 3 is for old webkit browsers.
  • Line 4 is for newer webkit browsers.
  • Line 5 is for Firefox 3.6 and up.
  • Line 6 is for Internet Explorer 10.
  • Line 7 is for Opera 11.10 and up.
  • Line 8 is what one day all the browsers will hopefully use.

See http://www.w3.org/TR/css3-background/#layering for more information about it.

Also see http://css3please.com for cross-browser css3 templating. Currently it doesn't allow you to do multiple backgrounds with gradients, but it gives you the browser prefixes and is kept up to date.

Stacking images ONLY (no gradients in the declaration) For IE < 9

IE9 and up can stack images this same way. You could use this to create a gradient image for ie9, though personally, I wouldn't. However to be noted when using only images, ie < 9 will ignore the fallback statement and not show any image. This does not happen when a gradient is included. To use a single fallback image in this case I suggest using Paul Irish's wonderful Conditional HTML element along with your fallback code:

.lte9 #target{ background-image: url(IMAGE_URL); }
186
Ken

Is there a simple way to display a color bitmap in grayscale with just HTML/CSS? It doesn't need to be IE-compatible (and I imagine it won't be) -- if it works in FF3 and/or Sf3, that's good enough for me.

I know I can do it with both SVG and Canvas, but that seems like a lot of work right now. Is there a truly lazy person's way to do this?

Answered By: SalmanPK ( 212)

Support for CSS filters has landed in Webkit. So we now have a cross-browser solution.

Create a file named filters.svg with the following contents:-

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
 </filter>
</svg>

Then use this CSS:- [Demo]

img {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}


To disable grayscale on hover you can use:-

img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}
162
Derek

Is it possible to make a div 50px less than 100% in pure CSS? I want the <div> to be only 50px less than 100%. I don't want any JavaScript.

Answered By: Derek ( 201)

Yes you can. Without using the IE's expression(), you can do that in CSS3 by using calc().

div {
    width: 100%;
    width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% - 50px);
}

Demo: http://jsfiddle.net/thirtydot/Nw3yd/66/

This will make your life so much easier. It is currently supported in the 3 main browsers: Firefox, Google Chrome (WebKit), and IE9: http://caniuse.com/calc

MDN: https://developer.mozilla.org/en/CSS/-moz-calc