Support for gradient fill using CSS was introduced about two years ago in browsers based on the Webkit engine (Google Chrome and Safari), but others did not support this property at that time, so gradients were made using images. Now this oversight has been corrected, Firefox 3.6+ fully supports gradient filling of objects, you can try to abandon images where possible.
In the last article there was not a word about gradient filling - today we will correct this shortcoming and talk about it. Moreover, the topic is very good.
In general, all modern browsers, including IE9, support shading. Vendor prefixes are used since the specification has not yet been officially adopted. Complete Guide You can read about gradients in CSS3, there css3 gradients thoroughly dismantled.
In this article we’ll talk a little about browsers and the features of gradients in them:
Gradients in webkit browsers
The syntax of the property is quite simple - the first value is the fill type, the second and third are the start and end positions, respectively, the fourth and fifth are the start and end colors.
Firefox 3.6+
Using gradients in Firefox
Here a slightly different syntax is used, the fill type is indicated in the property name, there is only the position of the beginning of the gradient and, similarly, the color of the beginning and end of the fill.
Internet Explorer
This browser has long and deservedly enjoyed the “love” of layout designers for its extremely original behavior. So in this case, a filter is used, the text of which will only be read by the IE browser. Angular and radial fills are not supported here, only horizontal or vertical, using two values - startColorstr And endColorstr. This must be taken into account when working, otherwise the result in IE will look very sad, and the percentage of this browser is still quite large.
What is needed to ensure cross-browser compatibility of this property for an object? Add four lines of code to its properties:
Background: #999; /* for browsers without css3 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit */ background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
The top line was added specifically for browser owners, do not support this property, in order to avoid misunderstandings with the display, in such cases the block will be filled with one color. A small note - if some text is placed in the block, you need to think about its color, combined with both a gradient fill and a single color fill, to ensure normal readability. Don't forget about this.
As a result, in all common browsers the image should be correct and look something like this:
And one more thing - remember that not all browsers can work correctly with this property, their percentage is too small compared to the general background, this should be taken into account when developing and not get too carried away. In any case, careful debugging will always help.
- IN different browsers The gradient functions are implemented differently, so you need to add multiple versions of the code.
-
Create a directional gradient. If you don't want the gradient to run vertically, specify the direction in which the colors will fade. To do this, enter the following code between the tags :
html (min-height: 100%;) body (background: -webkit- linear-gradient (left, #93B874, #C9DCB9); background: -o- linear-gradient (right, #93B874, #C9DCB9); background: -moz- linear-gradient (right , #93B874 , #C9DCB9 ); background : linear-gradient (to right , #93B874 , #C9DCB9 ); background-color : #93B874 ; )
- If you like, rearrange the words "left" and "right" to experiment with different gradient directions.
-
Use other properties to customize the gradient. You can do more with it than you think.
- For example, after each color you can enter a percentage number. This will indicate how much space each color segment will occupy. Here is an example code with these parameters:
background : linear-gradient (#93B874 10%, #C9DCB9 70%, #000000 90%);
- Add transparency to the color. In this case, it will gradually fade. To achieve a fade effect, use the same color. To set the color, you need the rgba() function. The last value will determine the transparency: 0 is an opaque color and 1 is a transparent color.
background : linear-gradient (to right , rgba ( 147 , 184 , 116 , 0 ), rgba ( 147 , 184 , 116 , 1 ));
- For example, after each color you can enter a percentage number. This will indicate how much space each color segment will occupy. Here is an example code with these parameters:
Find the "html" header. It should be at the top of the document.
Remember the basic syntax for this process. To create a gradient, you need to know two quantities: the starting point/angle and the range of colors that will fade into each other. You can choose several colors so that they blend into each other; You can also set the direction or angle of the transition.
background: linear-gradient(direction/angle, color1, color2, color3 and so on);
Create a vertical gradient. If you don't specify a direction, the gradient will go from top to bottom. To create such a gradient, enter the following code between the tags :
html (min-height: 100%;) body (background: -webkit- linear-gradient (#93B874, #C9DCB9); background: -o- linear-gradient (#93B874, #C9DCB9); background: -moz- linear -gradient (#93B874 , #C9DCB9 ); background : linear-gradient (#93B874 , #C9DCB9 ); background-color : #93B874 ; )
Review the code. The code to create a color gradient as a web page background would look something like this:
< html > < head > < style >html (min-height: 100%;) body (background: -webkit- linear-gradient (left, #93B874, #C9DCB9); background: -o- linear-gradient (right, #93B874, #C9DCB9); background: -moz- linear-gradient (right , #93B874 , #C9DCB9 ); background : linear-gradient (to right , #93B874 , #C9DCB9 ); background-color : #93B874 ; ) < body >
Introduction
If you don’t yet know how to install a background on a website, it will be useful for you to read this article. From it you will learn how to set an image as background image, set parameters for its display, or simply fill the background with a certain color.
CSS to help us
As you may have guessed, we will set the background by adding CSS styles to the html object. The universal background property is responsible for displaying the background of an element. If you need to add a background to one specific element, then add CSS properties to its id or class. If for the entire site, then to the body tag or the identifier (class) of the container (wrapper), if it overlaps the body. In this article, in the examples we will work with the body element.
Fill color
Let's start with the simplest thing - filling with a certain color. To do this, we only need to know the color code and CSS property background-color.
Body ( background-color: #000; /* Fill the background with black */ )
This code will set a solid black background for your site. As background color any other can be selected by changing its code.
If you are using a background fill for specific element, for example, for a heading (h1-h6), paragraph (p), etc., then make sure that the text color will not blend into the background and will not lose readability. Use the color property to change the color of the text.
P ( background-color: #000; /* Fill the background with black */ color: #fff; /* White text for a black background */ )
Background image
The background image for an element is set using the background-image property, which uses the path to the graphic file as its value. The path to the file is specified using the url(
It is recommended to create a separate folder for all images and specify the absolute path to the file, i.e. from the root folder. This will improve the structure of your site and eliminate problems if you decide to change the location of the CSS file itself.
Body ( background-image: url(/images/background.png); /* Absolute path to the background image background.png */ )
If a background image is used, it is recommended to simultaneously specify a color fill (with the background-color property). In this case, if the image does not load (the image is not available for some reason; the user has disabled the display of pictures), or loads with a delay (the picture loads completely later than the page), then the background fill will be shown instead of the image or until it loads completely .
Body ( background-image: url(/images/background.png); /* Absolute path to the background image background.png */ background-color: #ab11cf; /* Fill the background with a specific color */ )
These two properties from the example above can be combined into one using the generic background property.
Body ( background: #ab11cf url(/images/background.png); /* Fill color and path to the background image */ )
background property
The generic background property allows you to set all the background image display options in one line. Let's look at the available options.
Background: | inherit
The order of the values can be arbitrary, and if a property is not specified, the default value is used.
background-attachment
This property determines whether the background image scrolls along with the element's content. If you need to fix the image, use the value fixed. In this case, the image will remain motionless when scrolling the page content. If you want the image to move with the site content, use the scroll value. By default it is set to scroll.
Body ( background-image: url(/images/background.png); /* Absolute path to the background image background.png */ background-attachment: fixed; /* Image fixed */ background-color: #ab11cf; /* Fill background with a specific color */ )
Equivalent:
Body ( background: #ab11cf url(/images/background.png) fixed; /* Fill color and path to the fixed background image */ )
background-position
If a background image is specified, this property determines its initial position. Has two values separated by a space: horizontal position and vertical position. Values can be set using keywords: left right top bottom center. The order in which they appear is not important. If the values are specified in percentages, pixels, etc., then the horizontal value is indicated first, and then the vertical value. By default the position is set to left top corner(left top).
background-repeat
Determines how the background image is repeated. It can be repeated only horizontally (repeat-x), or only vertically (repeat-y), or simultaneously horizontally and vertically (repeat), or without repetitions at all (no-repeat). The default value is repeat.
inherit
Used to explicitly indicate the inheritance of properties from a parent element.
Description
Defines the background color of the element. Although this property does not inherit the properties of its parent, due to the fact that the initial value is set to transparent, the background color child elements matches the background color of the parent element.
Syntax
background-color:<цвет>| transparent | inherit
Values
transparent Sets the background to transparent. inherit Inherits the value of the parent.HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
In this example, the web page elements use three different ways setting the background color. The result of the example is shown in Fig. 1.
Rice. 1. Applying background-color
Object model
document.getElementById("elementID ").style.backgroundColor
Browsers
Internet Explorer versions up to and including 7.0 do not support the inherit value.
For example, you can draw an SVG pattern and use it not only in the fill, but also in the stroke. You can specify different opacity for the fill and stroke, and you can also control the dotted stroke, which can be used to create interesting animated effects.
You can set the fill and stroke to none , colors , keywords(currentColor and transparent), as well as gradients and patterns.
fill
Filling an element.
Possible values: none , keywords, colors, patterns and gradients. The default value is black.
fill-rule
The property determines how complex shapes that have intersections within themselves will be filled. For simple figures it has no effect.
Possible values: nonzero, evenodd
Fill-rule="nonzero"
Fill-rule="evenodd"
fill-rule="nonzero" behaves interestingly for figures from two paths. For example, if the outer circle is drawn clockwise and the inner one in the opposite direction, the center circle will remain unfilled (on the left). If both circles are drawn in the same direction, the figure will be filled completely (on the right):
fill-opacity
Controlling fill transparency. You can set values from 0.0 to 1.0 or as a percentage. True, Firefox does not like percentage values for gradients (pruflink, look in FF).
stroke
Stroke color. There is no default value.
stroke-width
The thickness of the stroke can be specified in length units or as a percentage. Default value: 1.
stroke-linecap
The property determines how the ends of the lines will look. Possible values: butt, round, square. Default value: butt.
stroke-linejoin
Determines how line connections at corners will look. Possible values: miter, round, bevel. Default value: miter.
stroke-dasharray
Controls the appearance of the dashed stroke. Can be specified in length units or as a percentage. If one value is given, the second value is considered equal to the first. For example, stroke-dasharray="1" will draw a line of segments one unit long separated by spaces of the same width.
Examples of different dotted lines:
Using strokes and simple shapes you can achieve amazing things:
Also stroke-dasharray combines interestingly with animation:
stroke-dashoffset
The property allows you to set the offset of the dotted stroke relative to its original position. The value is specified in length units or as a percentage; values can be negative. Default value: 0.
In this example, the orange and yellow lines are offset from the red using different meanings stroke-dashoffset:
By combining stroke-dashoffset and stroke-dasharray you can get interesting effects.
