Hello everybody. I assume that most of you have used or experienced with gradients in CSS3.
I Want to show you small trick, how to make one gradient that is relvant for making multiple gradients, without the need to rewrite.
In one of my project, I realized that most of the gradient are almost the same. all of them where with one color that get darken or lighter color of themselves, and I thought it's silly to make each color new gradient. Instead we can make one gradient that we will use for all "gradients".
How it's done, Lets begin!
I made common buttons in the HTML and gave them common class-name and specific class-name and some styles to decorate the button.
<a class="button button1">button 1</a>
<a class="button button2">button 2</a>
<a class="button button3">button 3</a>
<a class="button button4">button 4</a>
<a class="button button5">button 5</a>
border-radius:5px; border:solid 1px rgba(0,0,0,0.5);
I gave every button unique color(regular background-color).
Now, to make all of them to gradients is very easy. Instead of using full colors for the gradient, like red and darken red, I used gradient with background-color of black with opacity of 0% till background-color black with opacity of 65%.
I added this gradient with transparency to the common button class.
** CSS **
background-image: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
Yeay! we made multiple visual gradients with using only one gradient in the CSS!
Now if you wand to had hover styles, just put the gradients color reverse, like this:
** CSS **
background-image: linear-gradient(rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
That's it, Enjoy!
If you like this post, I will be happy to get your UPVOTE. You are welcome to follow me or my team @Walla! R&D and endorse my skills.