In CSS3 you can create a gradient background with multiple color stops. But did you know that you could throw alpha transparency into the mix? This is an example of the CSS used to create a blue-green linear gradient:
.gradient {
background: #4C95AF; /* for IE */
background:
-moz-linear-gradient( /* for firefox */
center bottom,
rgb(76,149,175) 5%,
rgb(183,185,52) 95%
);
background: -webkit-gradient( /* for chrome and safari */
linear,
left bottom,
left top,
color-stop(0.05, rgb(76,149,175)),
color-stop(0.95, rgb(183,185,52))
);
}This will result in:
The colour stops are defined using the rgb format. Watch what happens when we add alpha to the end of the color stop declarations.
.gradient {
background: #4C95AF;
background:
-moz-linear-gradient(
center bottom,
rgba(76,149,175,0.1) 5%,
rgba(183,185,52,0.9) 95%
);
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.05, rgba(76,149,175,0.1)),
color-stop(0.95, rgba(183,185,52,0.9))
);
}You can inspect these divs with a developer tool, they’re not images!
This opens up a whole new dimension of transparency in your designs. Imagine what you could do with a few more colour stops, changing the angle of the gradient, or using a radial gradient instead of a linear one! Please note: this technique is not supported in Internet Explorer or Opera. It is possible to use Microsoft’s filter mechanism to create a transparent gradient, but it’s not recommended (more information). A more practical solution would be to create a fallback based on 24 bit PNGs, and then convert the images into data URIs to negate the need for an extra http request.
Enjoy!
Hi.
This is an excellent feature. I can see that this post is almost 3 years old. Do you know if there has been any progress with Opera?
I’d love you to do a quick How To with the coding needed for wordpress (if you have time). This, apart from being a really cool feature, seems like an excellent performance optimisation nearly everyone could benefit from.
Thanks for the info.
Peter
Hi Peter,
Honestly, I don’t know if there’s been any progress with Opera – but I think they mentioned they were changing their rendering engine to WebKit a while back, so perhaps in a future update? Something for me to look into 🙂
What specifically did you want to know about WordPress? I’m looking for some topics to write on, but I never know what to write about, so I’m always happy to receive suggestions.
Well, in relation to WordPress … I’m trying to find some optimisations for my site(s).
This post about CSS Gradients was something I didn’t even know I could use CSS for. Excellent stuff: It saves a http call and some bandwidth and theoretically provides for a better rendering experience on the visitors end and a faster load time too. I love it.
Currently I use a png gradient for some of the bling that appears on my site(s), but I think that repeating the small png may negatively impact on the user experience whilst someone is scrolling down the page. I believe it is the rendering of the png gradient that results in a jerky scroll. I’m looking for a smooth fluid scroll as you move down the page.
Well, HEY PRESTO = Enter your CSS Gradient again. 🙂
The only thing I am worried about is cross browser compatibility. They (all the browsers) still seem to be using different standards.
I know most people use Firefox or I.E. but, I use Opera and have done so for years – and not about to change.
Unfortunately, as appealing as it is, the form exercise doesn’t render correctly in Opera. It does in the other major browsers. I was wanting to lift you code for a form on my sight. In the name of ‘speed’ and security I am trying to dispense with some of the WordPress plugins I currently use.
What browser do you use? Mozilla? I.E? or both? Chrome? I guess you test in all the browsers before signing off on client work.
SO, as to tips to publish? WordPress CSS customisation is a great one. I use the Suffusion theme and there is a spot in the back end settings to insert custom CSS. I have itchy fingers to try out some custom code. HEY PRESTO = enter you background gradient. I just have to find some time to do it now. 🙂