JenSocial: Social Network Directory / Social Web Directory

Social Network Directory & Network Creator Help - Ning, Spruz, SocialGO, etc...

  1. VIP Ning Club

    Join the Ning VIP Club!
  2. About VIP

    ~ Best NING TIPS, available online, special support for Ning Network Creators. TESTIMONIALS...
    ~ Insert Content or Google Ads within blogs/forums, or most anywhere. Ning-ready sliders/accordions, tabbed content, special shadow techniques, CSS tricks, and much more!
    ~ Only $34.95 for 6 months of support and all VIP Tips - - a great deal!

    Join Now!
  3. Directory

  4. Network HELP

  5. Free Ning Tips

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.

Tags: background, background gradient, background with CSS, background without image, css gradient, gradient, gradient background, gradient with CSS, no images

Views: 195

Replies to This Discussion

That's really nice, a lot easier than the way I made mine.
I prefer this one, feels like photoshop

Ultimate CSS Gradient Generator

RSS

JenSocial Virtual Shopping Mall & MarketPlace

Speak Your Mind!

VIP Ning Club:
Jen’s always cooking up new & exciting Ning Tips!

Discover the best Ning Support you’ll find anywhere! Just ask our VIP Members! ;-)

Testimonials

JOIN NOW!

Join the JenSocial Premium Ning Tips Club
All the work/tips created on JenSocial.com are provided free, but your donations allow me to continue offering Free Support, Tips, News, and free Directory Listings. Any amount is greatly appreciated.

Your donation allows me to continue offering Free Support, Social Networking Tips, News, and free Directory Listings for Social Networks, in the largest Social
Welcome to JenSocial Network Directory: Social Network Directory and Network Creator Hub for all Social Networking platforms:
Ning, Spruz, SocialGO, Grou.ps, JomSocial, BuddyPress, WackWall, etc...

Formerly the Ning Directory

Add Your Social Network, Find, Preview and Join, all kinds of great Social Networks (Social Communities) - - from Art to Pets!

 

 

© 2012   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service