CODEWITHSUNDEEP
cssgradientphotoshop
Ruslan Doronichev
Ruslan Doronichev

Reputation: 139

How to get a proper css code for a gradient?

Usually, when a develop a website from a photoshop .psd file I face hard gradient navigation menus. What is my method? I cut a small piece of the menu and then aplly

background-repeat: repeat-x

This works just fine. However, I believe it is not the best solution. Is there a correct way or technique to get the proper css code for any gradient?

Upvotes: 0

Views: 447

Answers (1)

Deadpool
Deadpool

Reputation: 8240

I use color-picker (adobe photoshop) to get the extreme colors at the menu tab (anchor or li) and then apply simple CSS gradient of CSS3 to get the background color using those 2 extremes (if required you may color-pick intermediate colors). Code goes: 

nav li{
 /* Safari 5.1 to 6.0 */
 background: -webkit-repeating-linear-gradient(top, #c19fd3 , #c39ff3);
/* Opera 11.1 to 12.0 */
background: -o-repeating-linear-gradient(top, #c19fd3 , #c39ff3);
/* Firefox 3.6 to 15 */
background: -moz-repeating-linear-gradient(top, #c19fd3 , #c39ff3);
/* Standard syntax */
background: repeating-linear-gradient(top, #c19fd3 , #c39ff3);
}

OR

You might get exact colors of a variation is there using percentages in gradients:

background: -webkit-repeating-linear-gradient(top, #c19fd3 10% , #c123f9 30%, #c39ff3);

It has worked for me.

Upvotes: 1

Related Questions