freeCodeCamp's Use a CSS Linear Gradient to Create a Striped Element

Channel:
United States We Will Code
Subscribers:
8,020
Published on ● Video Link: https://www.youtube.com/watch?v=vW4x0w7448Y


Duration: 2:57
86 views
3

In this lesson from the Applied Visual Design walkthrough we look at creating a cool gradient effect. We create a striped element using the repeating-linear-gradient function. This function we find out is kind of like the linear-gradient function. The big difference is that it will repeat the specified pattern. There are many values it accepts but in this challenge we use the same degree value from the last lesson. We learn we can make a cool striped effect by using for the function something like this repeating-linear-gradient(
45deg,
yellow 0px,
yellow 40px,
black 40px,
black 80px
); The px's dont matter for this to work since the blending of yellow between yellow and black between black will not be noticeable.



Other Videos By We Will Code


2018-10-09freeCodeCamp's Create Movement Using CSS Animation, Applied Visual Design
2018-10-04freeCodeCamp's Modify Fill Mode of an Animation, Applied Visual Design
2018-10-04freeCodeCamp's Use CSS Animation to Change the Hover State of A Button, Applied Visual Design
2018-10-01freeCodeCamp's Create a More Complex Shape Using CSS and HTML
2018-09-30freeCodeCamp's Create a Graphic Using CSS, Applied Visual Design
2018-09-28freeCodeCamp's Use the CSS Transform Property skewY to Skew
2018-09-28freeCodeCamp's Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
2018-09-27freeCodeCamp's Use the CSS Transform scale Property to Scale an Element on Hover
2018-09-27freeCodeCamp's Use the CSS Transform scale Property to Change the Size of an Element
2018-09-26freeCodeCamp's Create Texture by Adding a Subtle Pattern as a Background Image, url function
2018-09-25freeCodeCamp's Use a CSS Linear Gradient to Create a Striped Element
2018-09-24freeCodeCamp's Create a Gradual CSS Linear Gradient, Applied Visual Design
2018-09-22freeCodeCamp's Adjust the Tone of a Color, Applied Visual Design
2018-09-22freeCodeCamp's Adjust the Hue of a Color, Applied Visual Design
2018-09-21freeCodeCamp's Adjust the Color of Various Elements to Complementary Colors, Applied Visual Design
2018-09-20freeCodeCamp's Learn about Tertiary Colors, Applied Visual Design
2018-09-19freeCodeCamp's Learn about Complementary Colors, Applied Visual Design
2018-09-18freeCodeCamp's Center an Element Horizontally Using the margin Property, Applied Visual Design
2018-09-16freeCodeCamp's Change the Position of Overlapping Elements with the z-index Property
2018-09-15freeCodeCamp's Lock an Element to the Browser Window with Fixed Positioning, Applied Visual Design
2018-09-15freeCodeCamp's Push Elements Left or Right with the float Property, Applied Visual Design


Tags:
repeating-linear-gradient
css gradients
gardient tutorial
gradient css
repeating gradient css