Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS linear gradient not showing up in rails

CSS linear gradient not showing up in rails

Problem

Our designer created a mockup of our frontend using HTML and CSS. However, when I copy the code to my Rails app, some of it is not working properly.

Below is the CSS that is failing:

#login h1 {

  font-size:17px;
  color:#fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
  padding:5px 12px;
  margin-bottom:0;
  background-image: linear-gradient(top, #77659E 35%, #5A4B7A 77%);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;

}

It's suppose to show a purple colour as the background but it's not. My guess is linear-gradient is not getting picked up. Everything else in the CSS seems to work fine.

I'm using Rails 3.1. Any help would be appreciated!

Problem courtesy of: Keith Rumjahn

Solution

Your designer is most likely using prefix free, to fix it just add the prefixes:

 background-image: -webkit-linear-gradient(top, #77659E 35%, #5A4B7A 77%);
 background-image: -moz-linear-gradient(top, #77659E 35%, #5A4B7A 77%);
 background-image: linear-gradient(top, #77659E 35%, #5A4B7A 77%);

You will need to use a gradient generator if you want to target IE

Solution courtesy of: Duopixel

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS linear gradient not showing up in rails

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×