Gradient fill in CSS3. Fill an element from the hover point CSS fill

Description

Defines the background color of the element. Although this property does not inherit the properties of its parent, because the initial value is set to transparent, the background color of the 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

background-color

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 in this example There are three different ways to set the background color for web page elements. 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.

    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 ; )

    • IN different browsers The gradient functions are implemented differently, so you need to add multiple versions of the code.

  1. 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.

  2. 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 ));

    3. 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 >

Gradient fill support 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.

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 a picture as a 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. Any other color can be selected as the background color 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 color property to change the text color.

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 graphic file. The path to the file is specified using the url( ), Where This is the path to the graphic file. If you simply specify the file name, for example, url(background.png), then in this case the image should be stored in the same folder as the css file.

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, then 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 the upper left 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.