Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: Making a colour

  1. #1
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts

    Making a colour

    Hi, Any way of making a colour band for my site banner background.

    What I am looking to do is have a fading blue effect, i.e. from Blue to Sky Blue (getting lighter)

    I currently use a transparent image on a blue bg.

    HTML
    PHP Code:
    <div class="filler-menu">
      <
    img src="http://www.minifigtimes.com/images-site/the-minifig-times.png" alt="The Minifig Times">
    </
    div
    CSS
    PHP Code:
    .filler-menu {
      
    width:100%; /*fills page width to allow re-sizing*/
      
    background-colorblue/* #0066ff */
      
    padding:15px 0/*to center vertically and avoid "collapsing margins"*/
      
    margin:3em 0 0 0;
    }
    .
    filler-menu img {
      
    display:block/*allows margins to be applied*/
      
    margin:0 auto/*centers horizontally*/


  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Your best bet is probably a horizontally-repeating gradient image set as the header's background:

    Code:
    .filler-menu { 
      width:100%; /*fills page width to allow re-sizing*/ 
      background: #0066ff url("blue_grad1.png") repeat-x; 
      padding:15px 0; /*to center vertically and avoid "collapsing margins"*/ 
      margin:3em 0 0 0; 
    }
    Attached Images Attached Images  
    Last edited by BoldUlysses; 02-19-2009 at 07:39 PM.
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    Partizan (02-19-2009)

  • #3
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts
    Thanks msuffern!!

    Is there anywhere where I can get other already made fading images or do I need to use photoshop?

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    I used Photoshop and saved it as a PNG (could've used JPG but I wanted a lossless format). Google "gradients" and see what pops up.
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    Partizan (02-19-2009)

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You can make a gradient bg in photoshop -how to make gradient background
    or find one already made by searching the net - backgrounds
    There is also a Graphics and Multimedia forum on this board where you can probably get some help from someone that's far more talented than me in PhotoShop.

    One small thing I noticed - Your menu bar is full width so not much need to float it. Floats are used so we can put elements side by side. Try this instead:
    Code:
    body{ behavior:url("csshover2.htc"); }
    .pd_menu_01 {overflow: auto; padding:0; margin:0;color: #000000;background: #D1D1D1;width:100%; border:solid 1px #FFFFFF;clear:both;} 
    /*Color navigation bar normal mode*/
    .pd_menu_01  a, .pd_menu_01 a:visited {
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Partizan (02-19-2009)

  • #6
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts
    Thanks guys. Am experimenting with Photoshop...


  •  

    Posting Permissions

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