Syndicate content


Jul 01

Linear CSS Gradients that ANY Browser Can See

Thu, 07/01/2010 - 17:33 — julie

In the past, if you wanted to have an HTML entity to have a gradient background you created in image of a gradient and displayed it in the entity using the background-image attribute in CSS. With the evolution of browsers and CSS/HTML, this is no longer the case. In this tutorial we will learn how to use CSS to add a linear gradient to the background of entities.

The Setup

First, we need to decide how we are going to use the gradient. I suggest using the gradient as an enhancement. Keep in mind that some browsers will not display the gradient well or at all. So you will want it to degrade gracefully. If the browser doesn’t display the gradient the design should still be excellent and not require the gradient in order to function.

Gradients can be applied to block elements such as DIV tags. We will be using a simple DIV tag in this example.


Mar 25

Quick Tip: Understanding CSS3 Gradients “Creating an image...

Thu, 03/25/2010 - 02:13 — julie

Quick Tip: Understanding CSS3 Gradients

“Creating an image only for the purpose of displaying a gradient is inflexible, and is quickly becoming a bad practice. Unfortunately, at the time of this writing, they very well might still be required, but hopefully not for much longer. Thanks to Firefox and Safari/Chrome, we can now create powerful gradients with minimal effort. In this video quick tip, we’ll examine some of the differences in syntax when working with the -moz and -webkit vendor prefixes.”


Copyright 2009. E-mail Me
Auto Spare Parts