SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast colin27's Avatar
    Join Date
    Jun 2013
    Location
    Austin, Texas
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating a Radial Gradient Background using CSS3 and HTML5

    Curious if anyone has tried this yet. I have been playing around with it without much success. Ive tried this:

    html {
    overflow-y: scroll;
    background:-moz-radial-gradient(center, #2e658e, #fff) no-repeat #fff;
    background:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#2e658e), to(#fff)) no-repeat #fff;*/

    }

    AND this but separately. (I took it out of the html CSS listed above)


    body {
    font-family: "Trebuchet MS", Verdana, myriad pro, Arial, Helvetica, sans-serif;
    font-size: 14px;
    position: relative;
    background:-moz-radial-gradient(center, #2e658e, #fff) no-repeat #fff;
    background:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#2e658e), to(#fff)) no-repeat #fff;*/

    I would assume it would go into the body since that is where I have always put background images/colors. Any suggestions? Thanks!

    Here's the HTML:

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <link href="klear.css" rel="stylesheet" type="text/css" />

    </head>

    <body>

    <div id="wrapper">
    <div id="content">
    <div id="header"></div><!--end header-->
    <nav>
    <a href="index.html">home</a>
    <a href="nuklear.html">nuKlear</a>
    <a href="#">order</a>
    <a href="#">contact us</a>
    </nav>
    </div><!--end content-->
    </div><!--end wrapper-->

    </body>
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You could add something like this:

    Code:
    html, body {height: 100%;}
    Off Topic:

    For future reference, check out this page for tips on posting code samples:

    http://www.sitepoint.com/forums/show...Posting-Basics

    That makes it easier for us to help you.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could add something like this:

    Code:
    html, body {height: 100%;}
    Unfortunately that will cut off the gradient at vieport height and any content below the fold will have no background. You just need to use html {min-height:100%} and that will allow the gradient to grow with content.

    The new gradient syntax though will stretch all over the body


    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <link href="klear.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    html { min-height:100% }
    body {
    	font-family: "Trebuchet MS", Verdana, myriad pro, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	background: -moz-radial-gradient(#FFF, #00F);
    	background: -o-radial-gradient(#FFF, #00F);
    	background: -webkit-radial-gradient(#FFF, #00F);
    	background: radial-gradient(#FFF, #00F);
    }
    </style>
    </head>
    
    <body>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    </body>
    </html>
    However its probably better to fix the gradient to the viewport so that it doesn't stretch off center with the content.

    e.g.
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <link href="klear.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    html { min-height:100% }
    body {
    	font-family: "Trebuchet MS", Verdana, myriad pro, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	background: -moz-radial-gradient(#FFF, #00F);
    	background: -o-radial-gradient(#FFF, #00F);
    	background: -webkit-radial-gradient(#FFF, #00F);
    	background: radial-gradient(#FFF, #00F);
    	background-repeat: no-repeat;
    	background-attachment:fixed;
    }
    </style>
    </head>
    
    <body>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    </body>
    </html>

  4. #4
    SitePoint Enthusiast colin27's Avatar
    Join Date
    Jun 2013
    Location
    Austin, Texas
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul for the great solution! And Thanks Ralph for the code basics Im kinda a newbie all around so any info is greatly appreciated.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •