freeCodeCamp/create-a-gradual-css-linear-gradient.md at c0b9ad6bf2fd17661064586dd1b1decaeb43b399

Files

steviehailey b503333c64 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>

2020-10-19 11:01:03 -07:00

2.0 KiB

Raw Blame History

id, title, challengeType, videoUrl, forumTopicId

id	title	challengeType	videoUrl	forumTopicId
587d78a5367417b2b2512ad6	Create a Gradual CSS Linear Gradient	0	https://scrimba.com/c/cg4dpt9	301047

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 background property's linear-gradient() function. Here is the general syntax: background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...); The first argument specifies the direction from which color transition starts - it can be stated as a degree, where 90deg makes a horizontal gradient (from left to right) and 45deg is angled like a backslash. The following arguments specify the order of colors used in the gradient. Example: background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

Instructions

Use a linear-gradient() for the div element's background, and set it from a direction of 35 degrees to change the color from #CCFFFF to #FFCCCC.

Tests

tests:
  - text: The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.
    testString: assert($('div').css('background-image').match(/linear-gradient\(35deg, rgb\(204, 255, 255\), rgb\(255, 204, 204\)\)/gi));

Challenge Seed

<style>
  div {
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin: 50px auto;

  }

</style>

<div></div>

Solution

<style>
  div {
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin: 50px auto;
    background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
  }
</style>
<div></div>

2.0 KiB Raw Blame History