All Discussions Tagged 'gradient with CSS' - JenSocial: Social Web Directory and Ning Tips2024-03-29T14:57:02Zhttp://jensocial.com/group/socialnetworktips/forum/topic/listForTag?tag=gradient+with+CSS&feed=yes&xn_auth=noCSS Gradient Background Makertag:jensocial.com,2011-10-08:2154984:Topic:3844802011-10-08T21:06:06.401ZJenSocialhttp://jensocial.com/profile/jmarco
<p>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.</p>
<p>For example, if you want to <span class="font-size-4"><strong>add a gradient background to the body</strong></span> tag of your HTML:</p>
<p>Go <a href="http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html" target="_blank">here</a> to create the CSS for your gradient…</p>
<p>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.</p>
<p>For example, if you want to <span class="font-size-4"><strong>add a gradient background to the body</strong></span> tag of your HTML:</p>
<p>Go <a href="http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html" target="_blank">here</a> to create the CSS for your gradient background:</p>
<ul>
<li><strong><span class="font-size-4"><a href="http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html" target="_blank">CSS Gradient Background Maker</a></span></strong></li>
<li>Add your colors and gradient direction preferences.</li>
<li>Copy/Grab the CSS Markup Code created by the Gradient Background Maker.</li>
<li>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.</li>
<li>Add the CSS to your website. For Ning Networks, add to your Advanced CSS.</li>
</ul>
<p> </p>
<pre>body {<br/>/* IE10 */ <br/>
background-image: -ms-linear-gradient(bottom right, #FFFFFF 0%, #55D3E6 100%);<br/>
<br/>
/* Mozilla Firefox */ <br/>
background-image: -moz-linear-gradient(bottom right, #FFFFFF 0%, #55D3E6 100%);<br/>
<br/>
/* Opera */ <br/>
background-image: -o-linear-gradient(bottom right, #FFFFFF 0%, #55D3E6 100%);<br/>
<br/>
/* Webkit (Safari/Chrome 10) */ <br/>
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #55D3E6));<br/>
<br/>
/* Webkit (Chrome 11+) */ <br/>
background-image: -webkit-linear-gradient(bottom right, #FFFFFF 0%, #55D3E6 100%);<br/>
<br/>
/* Proposed W3C Markup */ <br/>
background-image: linear-gradient(bottom right, #FFFFFF 0%, #55D3E6 100%);<br/>
}</pre>
<p> </p>
<p><strong>As per usual, it won't work as well in IE below IE10.</strong></p>