circle at left top means “place the gradient centre in the top left corner”. So for example (the button in the example is 107 pixels wide): This takes the form of at, followed by keyword or unit values, specified in basically the same way as CSS background-position. The position the gradient radiates from is determined by specifying the position of its centre. Now let’s explore the three syntax areas - size and shape, position, and colour stops. Will create a gentle blue gradient radiating from the center of the element it is applied to, kind of like this: Figure 2: A simple radial gradient example When signifying angles for directions, you need to do some recalculation, as 0deg used to mean horizontal towards the right (equivalent to left), and now it means vertical and upwards (equivalent to to top).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. The above line creates a gradient that looks like the following image: Figure 1: A simple linear gradient example Inside the brackets you first include a setting for the gradient to go in ( to bottom right means “start at the top left of the element, and travel diagonally towards the bottom right”), then you include a series of colour stops for the gradient to flow smoothly in between (you can specify these in percentages or fixed measurement units). Linear gradient syntax recapĪs a recap, the syntax of linear gradients is fairly simple: We’ll go through all the basic syntax, and also look at repeating radial gradients near the end of the article. This article on the other hand focuses on radial gradients. We covered the former in a previous article - CSS3 linear gradients. There are two types of gradients defined in the spec, linear gradients and radial gradients. For example, you can set colour stops at different percentages across the element you are applying it to, so in fluid layouts the gradient will adjust to fit as the element changes in size. with a quick chance to the code, and the gradients are so much flexible. The CSS Image Values and Replaced Content Module Level 3 comes to the rescue by allowing us to create gradients on elements programmatically. You’d have to go to your image editor and make changes to the image file every time you wanted to change the colours, size or direction of the gradient. Traditionally we used CSS background images to add gradients to our UIs, and they worked ok, but they were rather inflexible. Gradients are much-used on web sites: if you want to liven up pretty much any UI feature (buttons, panels, headers, etc.) you can use a gradient, although you should use them sparingly to avoid the web site christmas tree effect™. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |