Social Network Tips

159 members

Description

A Group where Social Network Creators share tips across all Social Networking platforms, i.e. Ning, Spruz, Grou.ps, Wackwall, JomSocial, BuddyPress, Grouply, SocialGO, etc...

Comments Entries Members

CSS Gradient Background Maker

by JenSocial

Oct 8, 2011

This is the best online Gradient Background Maker I've seen to-date. It will create cross-browser compatible CSS for a gradient background that you can add to most any CSS element.

For example, if you want to add a gradient background to the body tag of your HTML:

Go here to create the CSS for your gradient background:

  • CSS Gradient Background Maker
  • Add your colors and gradient direction preferences.
  • Copy/Grab the CSS Markup Code created by the Gradient Background Maker.
  • Add body to beginning of your code like in the following example. Be sure to end your code with a closing right curly bracket - - just like I have in the code below.
  • Add the CSS to your website. For Ning Networks, add to your Advanced CSS.

 

body {
/* IE10 */ 

background-image: -ms-linear-gradient(bottom right, #FFFFFF 0%, #55D3E6 100%);



/* Mozilla Firefox */ 

background-image: -moz-linear-gradient(bottom right, #FFFFFF 0%, #55D3E6 100%);



/* Opera */ 

background-image: -o-linear-gradient(bottom right, #FFFFFF 0%, #55D3E6 100%);



/* Webkit (Safari/Chrome 10) */ 

background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #55D3E6));



/* Webkit (Chrome 11+) */ 

background-image: -webkit-linear-gradient(bottom right, #FFFFFF 0%, #55D3E6 100%);



/* Proposed W3C Markup */ 

background-image: linear-gradient(bottom right, #FFFFFF 0%, #55D3E6 100%);

}

 

As per usual, it won't work as well in IE below IE10.