Hello everyone, recently I've discovered that with gradient in CSS we can create amazing things, here is a link what I've seen. For me it was incredible and I was thinking that its worth to go through it and learn this not readable (at the beginning) part of code.
In general I have some habit about learning, when I'm discovering something I'm trying to create some exercise to summarise knowledge which I've just learned. Because of this I've created a exercise to draw only with gradients football pitch and this is what I achieved at the end:
Of course, I know there is no lots of details etc, but I realised that actually gradients in CSS are really schematic.
So let's go and let's learn how easy gradients are. At the end of the article I shared link to repo with football pitch so you can go and take it and you will have local app to play with css gradients. But ok, no more talking, let's code!
First problem with gradients could be - how to create stripes with gradients?
This is one of amazing and most know problem to solve with gradients, but thanks to it we can discover some new property which I didn't know. But let's start with some simple solution.
What is going on there? Actually on this example you can understand basic concept of gradients. As you can see this is only a background, so still you can use every background properties.
background: linear-gradient(90deg, blue 0, blue 1rem, red 1rem, red);
Let's divide this code in to smaller part. First property 90deg says about our angle of stripes. Then we are starting with drawing stripes.
blue 0, blue 1rem - its mean that our gradient starts from 0 from blue color and finising blue on 1rem. red 1rem, red - Then red gradient start from 1rem and finish at the end.
As you probably know, background has repeat property and as a default it's working as background-repeat: repeat. Thats why our gradient is repeating and filling all background.
Second thing which we have to do is setting our background size, as default it is 100% 100%, so let's fit it to size of our gradient:
background-size: 2rem 100%;
I assume that on this basic example you've understood basic concept of gradients. So let's go to the next problem.
Second problem - how to create diagonal stripes?
You could think that its actually easy, we have to just change angle of our linear-gradient property and thats all. Well, no especially, if you really understood above part then you can imagine that if you change your angle to i.e 45deg then you will have that effect:
and as you can see, at the bottom you have 2 gradient lines, 1rem of blue and 1rem of red, because our background-size is 2rem 100% thats why we have big horizontal line and only part of blue diagonal line... So the first thing what we could do is changing background-size into background-size: 2rem 2rem;:
But it's not looks like diagonal stripes. So what the problem is?
On above screenshot you can see that we have square with 2 parts 1rem of blue and 1rem of red - so this is what our code is saying. Now we have to change our square gradient into repeatable square which create stripes for us. Maybe you're remember that stripes background with image also required from us to create small square and repeat it - thanks to that solution we was able to receive stripes. The same things is with gradients, our square should look like:
As you can see we have to create more gradients than 2 elements. First we have to create 25% of blue, then 25% to 50% of red then 50% to 75% of blue and at the end 75% to 100% of red. So let's code it!
Amazing it's working, so what is the next problem? Actually let's stay in current one, what if we would like to change angle? As you can see our square is calculated to 45deg and from 0% to 100% we've provided gradient for it. When we change angle to 60deg then we have some ugly effect like not fitted image:
So what we can do, in general one of solution is to recalculate our gradient and change percentage values. But in fact it isn't flexible solution. CSS is coming with help to us, because there is one more gradient property... linear-gradient and radial-gradient has also properties repeating-linear-gradient, repeating-radial-gradient.
So instead of using background-size: 2rem 2rem to keep our gradient in small square, we can define steps to repeat our gradient. In our case we could say that we would like to repeat our gradient by 1rem alternately blue/red.
I think that explained to you how actually gradients works, and they are really schematic and simple in usage.
If you would like to take this challenge and build football pitch fell free! If you're need some help add comment below article and I will try to answer you or just take a look on mine code in my repository.
Cover Photo by Kobu Agency on Unsplash.
Top comments (0)