HTML and CSS Reference
In-Depth Information
Click here to view code image
1. div {
2. background: #466368;
3. background: linear-gradient(to right bottom, #648880, #293f50);
4. }
Figure 7.5 A linear gradient background transitioning from the left top to the right bot-
tom of an element
When we use a diagonal gradient on an element that isn't exactly square, the background
gradient will not proceed directly from one corner to the other. Instead, the gradient will
identify the absolute center of the element, place anchors in the perpendicular corners from
where it should progress, and then move to the general direction of the corner stated with-
in the value. These corners the gradient moves towards are called “magic corners,” as
they are not absolute. Eric Meyer has done a wonderful job of outlining this syntax in
his article “Linear Gradient Keywords” at http://meyerweb.com/eric/thoughts/2012/04/26/
lineargradient-keywords/ .
Besides keywords, degree values are also acceptable. If we want our gradient to move to
the left top of an element, we can use the degree value of 315deg , or if we want our gradi-
ent to move to the right bottom of an element, we can use the degree value of 135deg .
This same concept can be applied for any degree value, 0 through 360 .
Search WWH ::




Custom Search