CSS Gradients and Transitions
One of the features I like best about CSS Level 3 is the ability to easily add gradient fills for backgrounds. Simple background colors have been available since the early days of the World Wide Web, but until HTML 5 and CSS3 came along, the only way to add a gradient fill was with a graphic file. Gradients seem to be an object of scorn in the professional website design community, which considers them to be overused. I'm as guilty as anyone of adding gradients just for the fun of it, but it was the article titled Everything You Wanted To Know About Gradients by Ethan Marcotte that really inspired me to play with this visual effect and present them in this tutorial. I understood simple gradients, but I wanted to really understand them and Marcotte's article really helped explore the possibilities. The first version of this document pre-dated the widespread browser support for advanced CSS Level 3, so some legacy code remains until I'm able to fully update it. I appreciate your patience.
This page is really more of a demonstration than a tutorial. I just wanted to present you with some new possibilties in website design. What I ended up with was a work-in-progress that I hope to expand and improve over time. So, please forgive the length of this article and the lack of organization.
To begin, as usual, we have to deal with cross-browser compatibility issues with regard to CSS gradients. Fortunately, the Webkit folks have added support for the Mozilla/W3C syntax for both linear and radial gradients, so while you still have to add separate vendor prefixed property settings for both browser families using the proper prefix, you no longer have to worry about the differences in syntax, which are shown in the next section.
Linear Gradient Syntax
linear-gradient( [point || angle,]? stop, stop [, stop]* )
Radial Gradient Syntax
radial-gradient( [position || angle,]? [shape || size,]? stop, stop[, stop]* )
Basic CSS Gradients
The most common use of gradients is to provide a pleasing background for a section of your webpage or occasionally for the background of the entire page. I've included some basic examples of linear gradients here. The top spectral gradient taken from the W3C example page uses the simplest syntax consisting only of a starting point and a list of color names:
background-image: linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
From there, I created a grayscale gradient with seven color stops to create a smooth, gradual transition from one level to the next, with a 30 degree angle to demonstrate that option, using:
background-image: linear-gradient(left 30deg, #fff 5%, #c0c0c0 20%, #a0a0a0 30%, #808080 50%, #404040 70%, #202020 90%, #000 100%);
And finally, I made a vertical gradient where the color shading starts off at the top with a dark green, ramps up to a light green peak, and then ramps back down to the original dark green. You often see menu bars and headline blocks use images to achieve this effect. Here we rely only on CSS, with:
background-image: linear-gradient(top, rgb(0,135,72) 0, rgb(120,255,138) 50%, rgb(0,135,72) 90%);
Radial gradients in CSS have some interesting capabilities, too. You can start anywhere you like, spread out to the edges of the containing element or constrain the effect to within it, and use the familiar color stops any way you prefer.
To learn more, see Art of Web's excellent article on radial gradients that demonstrates many creative uses for this new CSS property.
CSS Gradient Image Masking Effects
CSS Gradient
CSS gradients aren't limited to making simple colored backgrounds. One of the design issues I often struggle with is to make the images on my webpages stand out, or at least look less like a photograph pasted into a scrapbook. So I usually add some CSS styling to my display images to give them some pop. I often add a box-shadow or a white border, depending on the theme and tenor of the website. But I'm always looking for something new, and CSS3 has added a nifty feature: multiple background images. A background image gradient combined with a normal image background lets you display your images with a flair. The method is simple. You first draw the normal image, and then superimpose a gradient over it. By adjusting the opacity/alhpa channel of the gradient colors, you can smoothly blend the image into your page. The first example on the left here shows an image with a feathered bottom edge using a linear gradient mask. The CSS settings are:
background-image:
linear-gradient(bottom,
rgba(255,255,224,1) 1%,
rgba(255,255,224,.8) 5%,
rgba(255,255,224,0) 15%),
url('images/myImage.jpg');
Using the alpha channel through an rgba color setting, the opacity of the white background color controls how much of the background image bleeds through the mask. With an alpha channel set to 1 on the mask, none of the image bleeds through, and with a setting of 0, the image is fully opaque. Since I just want the effect on the far left edge, I chose settings that start to ramp up to full opacity at just 3% from the edge of the image, and by 15% the image is fully visible.
The second image is a classic vignette effect using a radial gradient mask on the same image. Using a starting point of "50% 50%" to center the gradient, the idea is to use no masking until we get close to the edges of the image, and then ramping the settings up smoothly until we reach 100% masking. I tried many settings, but this looks pretty good.
background-image:
radial-gradient(50% 50%,
farthest-side,
rgba(255,255,224,0) 80%,
rgba(255,255,224,.1) 87%,
rgba(255,255,224,.2) 93%,
rgba(255,255,224,.4) 95%,
rgba(255,255,224,.8) 97%,
rgba(255,255,224,1) 99%
), url('images/myImage.jpg');
Image Captions Using CSS Gradients
The CSS size settings are in percentages, so the size adjusts to fit. The background gradient's colors are set with rgba, so the text is fully opaque.
When it comes to website design, I always try to steal from the best. So when I spotted an attractive image caption design on CNN.com that used a gradient, I thought I'd try to replicate it. The goal is to overlay an image with a caption overlaid on the right half of the image that still allows some of the image to bleed through. The method I chose was to create a containing div for the image, with the image itself in a div set to position:absolute and its z-index set to 1, overlaid with a div for the caption that is sized to 50% of the image and positioned right:0 with a z-index of 2. The key is to give the caption's div a background image that uses a gradient that relies on rgba for the color settings in order to provide control over the alpha channel for transparency. I came pretty close, but it needs tweaking. CNN used this on large vertical images, which was much more attractive. Still, this is the basic idea. Check the source code for this page to see the actual CSS code. For more details, see my transparent CSS captions tutorial.
In the end, I wasn't satisfied with my attempts to replicate this effect. I tried to fine-tune it many times, but just never found a great combination. My frustration led me to write a PHP script that lets you create a transparent background image with optional gradient. It lets you easily create a translucent PNG graphic using any color you like, with the option of a gradient transparency level so that the background goes from solid at one edge to fully transparent at the opposite edge. Check it out!
The folks at Colorzilla have a great cross-browser CSS Gradient Editor that will let you create your own CSS gradient settings with an interactive tool that lets you see your gradients as you adjust them. And, best of all, the settings work in most version of Internet Explorer via the filter: property - which I rarely use, but should.
CSS Transitions and Animations
With HTML 5, the web takes a giant leap toward improved user interaction and enhanced visual effects. Among these are transitions, which provide gradual changes in the appearance of the selected elements. You set transition to select the CSS properties you want to have changed, along with a duration setting. Then when the transition fires with hover, the selected properties will slowly change from the old settings to those in the :hover settings. I've provided a simple example here that's much like those you've probably seen elsewhere, but it does show the possibilities of transitions. Just mouse over the box to see the effect.
One simple and practical example of how transitions can enhance a page is for a simple menu bar, as seen above. Instead of having the appearance change immediately on a hover event, transitions allow for a gradual change. It's the kind of effect that used to require JavaScript or Flash to achieve in CSS Level 2. See for yourself by mousing over the menu items and you'll see the colors of the font and background gradually change. And this is one effect where you don't have to worry about compatibility because older browsers will just see the hover effects take place immediately. The HTML is just a plain div I named "fauxMBar" and it contains four anchor tags. The CSS for this couldn't be simpler:
#fauxMBar { width:420px; margin:0 auto; }
#fauxMBar a { float:left; width:23%; height:20px; padding-top:4px;
background-color:#008000; border:solid 1px blue;
text-align:center; font-weight:bold; text-decoration:none; color:white;
transition:all 1s;
}
#fauxMBar a:hover { text-decoration:underline; color:black; background-color:lightyellow; }
I set the transition property to "all" so that the transition would be applied to every available property and set it to 1 second so that it would work just fast enough to be pleasing. On a good day, I'd set the width and border properties properly, but this is just an example. You can find out more about transitions on the Mozilla Developer website.
Another practical and eye-catching application for the 'transition' property is
a simple image zoom effect. Many sites show a thumbnail version of an image and allow the user
to see an enlarged copy by clicking on the smaller image. But wouldn't it be nifty if the
zoomed image were displayed automatically? Try putting your mouse pointer over the image of
the Golden Gate Bridge on the left.
The code required is very simple. We start by having two instances of the img tag using the same 'src', but each with its own class name to designate the thumbnail and the full-size image, 'rdAutoThumb' and 'rdAutoZoom', respectively. The magic happens in the CSS. We set an appropriately small 'width' of 100px on the thumbnail. Then for the zoom copy we set 'position:absolute' to remove it from the document flow and insuring that it won't displace any adjacent elements. We also set its 'width' to 0 to make it invisible, and it's 'z-index' high enough to insure it appears on top of any other content. Finally, we set the 'transition' on the 'width' to animate the change in appearance. The next step is critical. We use an adjacent sibling (".rdAutoThumb:hover + .rdAutoZoom") selector to change the 'width' of the zoom image when the user hovers over the thumbnail. The key here is to set a specific width. If you use 'auto', the transition doesn't work. But that's it.
style .rdAutoThumb { width:100px; } .rdAutoZoom { position:absolute; width:0px; transition:width 0.5s; z-index:2; } .rdAutoThumb:hover + .rdAutoZoom { width:300px; } /style div style="float:left; margin-right:10px;" img class="rdAutoThumb" src="pics/ggb_vertical.jpg" alt="Golden Gate Bridge" img class="rdAutoZoom" src="pics/ggb_vertical.jpg" alt="Golden Gate Bridge" /div
Scaled Vector Graphics
Since the beginning of the web, designers have wanted to be able to simply draw on their pages. With HTML5, Scaled Vector Graphics (SVG) now give designers the ability to do just that with some powerful graphic primitives that you can use to draw shapes and text with both fill and stroke settings.
This page was last modified on September 24, 2021
