![]() ![]() So top left is equivalent to to bottom right, bottom is equivalent to to top, and so on. The direction keywords are the opposite way round and don’t include the word to.For compatibility with older browser versions and WebKit versions, you should consider including vendor prefixes versions of the property, all including the older syntax. Note that the newest versions of Opera, Firefox and IE all support the current syntax of linear gradients, without prefixes, while WebKit-based browsers still require the old syntax. Figure 6: A repeating gradient example Browser support, and old syntax The above example looks something like Figure 6. Then, because it is a repeating gradient, it keeps repeating this pattern until the end of the block. Here we are starting at a bright full red, moving to a darker red after 20 pixels, then moving back to the full red at 40 pixels. This is the default, and is equivalent to writing this:īackground-image:repeating-linear-gradient( In the first example, we didn’t specify any kind of direction or angle, and the gradient went from the top of the block to the bottom. In modern browsers, the gradient will hide the color. To prevent older browsers displaying white text on the white background of the page, you can give your button a background-color:gray so the text remains readable and the button doesn’t appear broken. Imagine your page has a white background, and you have a button with a gradient background and white text above it. ![]() We always used to apply gradients using CSS background images, plus now you can use CSS multiple backgrounds to layer multiple images on top of gradients, if you like.īecause gradients are background images however, you can - and should - specify a fall back background-color. So why is the gradient applied as a background image and not a background colour, which might seem more appropriate? This is because of flexibility and familiarity. Figure 1: A really basic CSS3 linear gradient ![]() Here I’m applying it to a simple article element, but you can apply it to any block level element you like. This creates a simple gradient that goes from a darker grey at the top of the element the gradient is applied to, down to a lighter grey at the bottom, as seen in Figure 1. To create a basic linear gradient, you need to provide a start point and an end point, like so: Download this example and play with different values as you read through the sections below. I have included some simple examples for you to play with in my linear gradients demo. Note: Radial gradients are covered in the article CSS3 radial gradients. In this article I will explore how to use linear and repeated linear gradients, which are supported across Opera 11.10+, Firefox 3.6+, Safari 5.0.3+ and Chrome 7+. However, doing it this way is rather inflexible, given that if you want to vary the colour scheme or other features of the gradient, you need to go back to your graphics tool and create another image! Wouldn’t it be better if you had complete control over the gradients using CSS?ĬSS3 comes to the rescue with the CSS Image Values and Replaced Content Module Level 3: part of this module defines CSS gradients, which allow us to create any gradients we want using only CSS. The CSS is simple, and creating a gradient using Photoshop, Fireworks, or another graphics tool is not hard. Up until now, we have always used repeated background images to create gradient effects. ![]() If you want to create a fantastic looking button, panel, gauge, progress bar or other UI feature, a gradient is the way to go. Introductionįor as long as we can remember, we have used colour gradients on the Web to brighten things up, and add class to designs. Some color combinations work better than others, so you might need to play around with it to get it right.The article has been updated to cover the gradient syntax covered in the (at the time of writing) latest Image Values and Replaced Content Module Level 3 specification, dated June 12th 2012. It can help make your design look modern and fresh with a nice visual splash.Ī classic modern font that has a clean look. How do you avoid this?Ĭhunkier sans serif fonts tend to be visually better on the eye than your standard websafe sans serif. While gradients are cool, they can easily make your design look like 90s web. Here's the quick code snippet for it □ h1 How do you make gradient text look less '90s web'? Here are some cool examples in the wild: Vercel - cloud platform The magic lies in linear-gradient, -webkit-background-clip and -webkit-text-fill-color ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |