Gradients are known to have such issues so we always update values that way to fix them. Note that in the previous demos, I am using 90.5deg instead of 0deg to avoid jagged edges. Zig Zag background pattern by Temani Afif CodePen. The code can be optimized by introducing CSS variables: -s: 100px /* control the size */ The 50px 0 is nothing but the background-position of the second gradient and 50px is half the background-size. To get what we want, we need to shift the second gradient (or the first one) as shown in (2) to have the following code: background:Ĭonic-gradient(from 135deg,#ECEDDC 90deg,#29AB87 0) 50px 0 The (1) in the above illustrates the following code: background:Ĭonic-gradient(from -45deg,#ECEDDC 90deg,#0000 0),Ĭonic-gradient(from 135deg,#ECEDDC 90deg,#29AB87 0) Not the best pattern but it illustrates the technique we are going to use in this article to build better ones! If we define a background-size, we create a pattern: The yellow is filling the remaining space which is also 135deg ( 360deg - 225deg). The blue starts from where the red ends and continues until 225deg so it’s filling 135deg. We still have the same center but no transition between the colors. This will avoid us writing the same value twice. We can still do better like below background: conic-gradient(at 75% 25%, red 90deg, blue 0 225deg, yellow 0)īy specifying 0 (a value smaller than the previous one) the browser will automatically make it equal to the previous one. Note the use of the same angle between two colors ( 90deg and 225deg). To do this, we need to make the color start where the previous one ends: background: conic-gradient(at 75% 25%, red 90deg, blue 90deg 225deg, yellow 225deg) In most cases, we don’t need a smooth transition but rather “hard stop” colors. We place the center point at X=75% and Y=25% then we create a color transition between red, blue, and yellow. Let’s take a basic example to see how it works: background: conic-gradient(at 75% 25%, red, blue, yellow)
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |