...

View Full Version : Making a colour



Partizan
02-19-2009, 08:27 PM
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

<div class="filler-menu">
<img src="http://www.minifigtimes.com/images-site/the-minifig-times.png" alt="The Minifig Times">
</div>

CSS

.filler-menu {
width:100%; /*fills page width to allow re-sizing*/
background-color: blue; /* #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*/
}

BoldUlysses
02-19-2009, 08:33 PM
Your best bet is probably a horizontally-repeating gradient image set as the header's background:


.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;
}

Partizan
02-19-2009, 08:42 PM
Thanks msuffern!!

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

BoldUlysses
02-19-2009, 08:43 PM
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.

Excavator
02-19-2009, 08:46 PM
You can make a gradient bg in photoshop -how to make gradient background (http://www.google.com/search?hl=en&q=how+to+make+gradient+background)
or find one already made by searching the net - backgrounds (http://images.google.com/images?hl=en&q=gradient+background&oe=UTF-8&um=1&ie=UTF-8&sa=N&tab=wi&ei=87WdSaicEZ3gsAPhxfHVCQ&oi=property_suggestions&resnum=0&ct=property-revision&cd=1)
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:

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 {

Partizan
02-19-2009, 10:05 PM
Thanks guys. Am experimenting with Photoshop... :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum