![]() Next (phew, there are a lot of steps for this one) we add a border-radius to the pseudo-element equal to that of its parent (let’s apply 10px each). Adding a z-index of -1 will ensure that the gradient block moves to behind the div. The correct forum for discussion of the gradient syntax and behavior is the will give us a solid gradient block covering the whole of our div. To reiterate, we’ve implemented support for these new gradients so that you, as web developers and authors, can give feedback. So is -webkit-gradient going away? Certainly not! We’ll maintain support for -webkit-gradient for the foreseeable future for all the existing content out there that uses it. You can, however, produce elliptical gradients with the new syntax, which was not possible with -webkit-gradient. Similarly, radial-gradient no longer allows you to specify different start and end points for radial gradients, so the new radial gradients are always concentric. If you really want the gradient to stop before the edges of the box, you can do so via color stop placement. linear-gradient does away with this in favor of convenient box-filling behavior. You should be able to recreate most of the gradients you made with -webkit-gradient with this new syntax, but there are some changes to be aware of.įirst, -webkit-gradient uses a two-point syntax that lets you explicitly state where a linear gradient starts and ends. webkit-repeating-radial-gradient(top left, circle, red, blue 10%, red 20%) Changes from -webkit-gradient First, you can specify the side or corner where you want the gradient to start: All that you have to think about is what direction you want the gradient to run in. Since filling the element’s box is the most common use for gradients, this is the standard behavior for linear gradients. Later when the specification is out of the draft phase you’ll be able to use them without the prefix. One nice thing is that the syntax for the repeating and non-repeating variants is identical.īecause this specification is still in draft form, we’ve prefixed these gradient functions with -webkit- prefix. The names are pretty self-explanatory, but I’ll say more about repeating gradients later. The new syntax has four gradient functions: This means that you can use them anywhere you’d use a url(image.png). Here are some simple examples (note that all these examples are resizable, so you can see how resizing the box affects the gradients):īackground-image: -webkit-radial-gradient(circle, white, black) ĭon’t forget that gradients are a type of generated image, not a property. If you’re not already running one, go and grab a recent nightly build so that you can see the examples in this post. A secondary goal was to specify something where implementations were compatible across browsers. The main goal of the new syntax is simplicity it’s now really easy to code up common gradients, as you’ll see in the examples below. Note that the proposal is still an editor’s draft, which means that it’s still possible, and even likely to change due to user feedback. ![]() WebKit and Mozilla have now implemented this proposal so that web authors can experiment with it, and provide feedback to the Working Group. Over the past several months, the CSS Working Group has had extended discussions about making the gradient syntax easier to use, and recently Tab Atkins included a proposal in the latest draft of the Image Values and Replaced Content module. ![]() ![]() ![]() WebKit paved the way for gradients in CSS by adding support for -webkit-gradient back in early 2008, and they’ve become widely used since their introduction. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |