SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating gradients

    Hello,

    I would like to create a background image that starts as a gradient at the top and fades to a solid color. This way text can appear in the foreground.

    It would be nice if I could specify a starting/ending color, including how much space the ending color should occupy in the image.

    If anyone can point me in the right direction, I would appreciate it.

    Thanks

  2. #2
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,435
    Mentioned
    82 Post(s)
    Tagged
    3 Thread(s)
    How do you want to create the gradiant?

    Anyway all you need to do is find a software program that will create a gradiant ( most will ); if it is a website background the gradiant only needs to be a few pixels wide as you can repeat it across the page and the height wants to be about the height of the page.
    You can change how long the gradiant is by adding a full colour section at the top or the bottom of the gradiant with the relavent colour to complete the size.

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Use this tool: http://www.colorzilla.com/gradient-editor/

    You'll create a <div></div> and include your text <p></p> inside it. For instance, put this (from the link above) on a page and save it as example.html on your desktop, then double-click on it to view it in a browser:

    Code:
    <html>
    <head></head>
    <body>
    <div style="padding:100px 0; width:100%;background: #f2f6f8; /* Old browsers */
    background: -moz-linear-gradient(top,  #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f6f8), color-stop(50%,#d8e1e7), color-stop(51%,#b5c6d0), color-stop(100%,#e0eff9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 ); /* IE6-9 */
    ">
    
    <p style="text-align:center; font-size:2em;">This is text inside the div containing a gradient background. 
    <br>I added generous margins top and bottom so the gradient goes above and below this sentence.
    <br>You won't need to create a graphic if you use CSS gradients!
    <br>I hope this example helps you.
    </p>
    </div>
    </body>
    </html>
    Steve Husting


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
  •