Rephrase linear gradient explanation (#39990)

* Rephrase linear gradient explanation

Small tweak to explanation to remove ambiguity over horizontal vs vertical

* Update curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md

Code review suggestion - mention horizontal and quote the values

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

* Use code tag for snippets

Was using backtick but updated based on formatting guidelines - https://contribute.freecodecamp.org/#/how-to-work-on-coding-challenges?id=formatting-challenge-text

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
This commit is contained in:
steviehailey 2020-10-19 19:01:03 +01:00 committed by GitHub
parent 3042b055f5
commit b503333c64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -10,7 +10,7 @@ forumTopicId: 301047
<section id='description'>
Applying a color on HTML elements is not limited to one flat hue. CSS provides the ability to use color transitions, otherwise known as gradients, on elements. This is accessed through the <code>background</code> property's <code>linear-gradient()</code> function. Here is the general syntax:
<code>background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);</code>
The first argument specifies the direction from which color transition starts - it can be stated as a degree, where 90deg makes a vertical gradient and 45deg is angled like a backslash. The following arguments specify the order of colors used in the gradient.
The first argument specifies the direction from which color transition starts - it can be stated as a degree, where <code>90deg</code> makes a horizontal gradient (from left to right) and <code>45deg</code> is angled like a backslash. The following arguments specify the order of colors used in the gradient.
Example:
<code>background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));</code>
</section>