SerenityNet
Posts: 1372
Joined: 6/12/2001
From: Allen, TX, USA
Status: offline
 |
RE: Any good? - 8/24/2003 16:05:08
On the "https://home.comcast.net/~tinker69691/" site, even at 1024x768 resolution,
I had to scroll left and right. On the other site, I had to go to 1024x768 to avoid the
need to scroll left and right. I think you need to fix that.
And on the "http://www.spiritbright.com/" site, either lighten the grey or do away with
the dark burgandy & navy banner. It just doesn't match. I know nothing about colors
and graphics, but this forum has references to many tools that will help you get good
color matches. Below, I've pasted the code to one of the tools.
I'd suggest defining one theme or objective, per site, and sticking just with that.
I hope this helps,
Andrew
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Color Blender</title>
<style type="text/css">
<!--
body {background: white; color: black;}
form {margin: 0;}
h1 {font-family: Arial, sans-serif; line-height: 0.85em; border-bottom: 2px solid;
margin-bottom: 0.33em; padding-bottom: 0;}
#main {border-bottom: 1px solid; padding-bottom: 0.5em;}
#uicell {width: 25em;}
#uicell th {width: 6em; text-align: right; padding-right: 0.5em;
border: 1px solid black; border-width: 0 1px 1px 0;}
#uicell td {padding: 0 0 0 0.5em;}
#uicell td.pal {padding: 0 3em;}
#uicell #gobuttons td {height: 1.5em;}
input, #input a {font: 0.85em "Andale Mono", Courier, monospace;}
#input, #output {margin: 0 0 1em;}
#input td {white-space: nowrap;}
#input a {border: 2px outset silver; background: silver; padding: 1px 0.25em; cursor: pointer;}
#input .coltype {background: #EEE; border-style: inset;}
#output input {border: 2px solid white; border-width: 0 2px;}
#output td.text {border-bottom: 1px dotted silver;}
#watercell {width: 75px; background: silver; padding: 0;}
#grid {background: black; border: 1px solid black; border-width: 0 1px 1px 0; margin: 5px 4px;}
#grid td {height: 11px; width: 11px; padding: 0; line-height: 11px;}
#grid td a {display: block; height: 10px; width: 10px; line-height: 10px;
border: 1px solid black; border-width: 1px 0 0 1px;}
#textcell p {margin: 0; padding: 0 1em 1em 1.5em;}
#footer {color: #999; font: italic 75% sans-serif;}
#footer p {margin: 0 0 1em 0;}
#footer img {float: right; margin: 0 0 0.5em 2em;}
-->
</style>
<script type="text/javascript">
// Thanks to Steve Champeon (hesketh.com) for explaining the math in such a way that I could
// understand it and create this tool
// Thanks to Roberto Diez for the idea to create the "waterfall" display
// Thanks to the Rhino book, I was able to (clumsily) set up the Color object
var cursor = 0;
var colType = 'hex';
var base = 16;
var ends = new Array(new Color,new Color);
var step = new Array(3);
var palette = new Array(new Color,new Color,new Color,new Color,new Color,new Color,new Color,new Color,new Color,new Color,new Color,new Color);
function GetElementsWithClassName(elementName,className) {
var allElements = document.getElementsByTagName(elementName);
var elemColl = new Array();
for (i = 0; i< allElements.length; i++) {
if (allElements.className == className) {
elemColl[elemColl.length] = allElements;
}
}
return elemColl;
}
function Color(r,g,b) {
this.r = r;
this.g = g;
this.b = b;
this.coll = new Array(r,g,b);
this.valid = cVerify(this.coll);
this.text = cText(this.coll);
this.bg = cText(this.coll);
}
function cVerify(c) {
var valid = 'n';
if ((!isNaN(c[0])) && (!isNaN(c[1])) && (!isNaN(c[2]))) {valid = 'y'}
return valid;
}
function cText(c) {
var result = '';
var d = 1;
if (colType == 'rgbp') {d = 2.55}
for (k = 0; k < 3; k++) {
val = Math.round(c[k]/d);
piece = val.toString(base);
if (colType == 'hex' && piece.length < 2) {piece = '0' + piece;}
if (colType == 'rgbp') {piece = piece + '%'};
if (colType != 'hex' && k < 2) {piece = piece + ',';}
result = result + piece;
}
if (colType == 'hex') {result = '#' + result.toUpperCase();}
else {result = 'rgb(' + result + ')';}
return result;
}
function colorParse(c,t) {
var m = 1;
col = c.replace(/[\#rgb\(]*/,'');
if (t == 'hex') {
if (col.length == 3) {
a = col.substr(0,1);
b = col.substr(1,1);
c = col.substr(2,1);
col = a + a + b + b + c + c;
}
var num = new Array(col.substr(0,2),col.substr(2,2),col.substr(4,2));
var base = 16;
} else {
var num = col.split(',');
var base = 10;
}
if (t == 'rgbp') {m = 2.55}
var ret = new Array(parseInt(num[0],base)*m,parseInt(num[1],base)*m,parseInt(num[2],base)*m);
return(ret);
}
function colorPour(pt,n) {
var textObj = document.getElementById(pt + n.toString());
var colObj = document.getElementById(pt.substring(0,1) + n.toString());
if (pt == 'col') {temp = ends[n]} else {temp = palette[n]}
if (temp.valid == 'y') {
textObj.value = temp.text;
colObj.style.backgroundColor = temp.bg;
}
}
function colorStore(n) {
var inVal = 'col'+n.toString();
var inCol = document.getElementById(inVal).value;
var c = colorParse(inCol,colType);
ends[n] = new Color(c[0],c[1],c[2]);
if (ends[n].valid == 'y') {colorPour('col',n)}
}
function stepCalc() {
var steps = parseInt(document.getElementById('steps').value) + 1;
step[0] = (ends[1].r - ends[0].r) / steps;
step[1] = (ends[1].g - ends[0].g) / steps;
step[2] = (ends[1].b - ends[0].b) / steps;
}
function mixPalette() {
var steps = parseInt(document.getElementById('steps').value);
var count = steps + 1;
palette[0] = new Color(ends[0].r,ends[0].g,ends[0].b);
palette[count] = new Color(ends[1].r,ends[1].g,ends[1].b);
for (i = 1; i < count; i++) {
var r = (ends[0].r + (step[0] * i));
var g = (ends[0].g + (step[1] * i));
var b = (ends[0].b + (step[2] * i));
palette = new Color(r,g,b);
}
for (j = count + 1; j < 12; j++) {
palette[j].text = '';
palette[j].bg = 'white';
}
}
function drawPalette() {
stepCalc();
mixPalette();
for (i = 0; i < 12; i++) {
colorPour('pal',i);
}
}
function setCursor(n) {
cursor = n;
var obj1 = document.getElementById('col0');
var obj2 = document.getElementById('col1');
obj1.style.backgroundColor = '';
obj2.style.backgroundColor = '';
if (cursor >= 0 && cursor <= 1) {
document.getElementById('col'+cursor).style.backgroundColor = '#FF9';
}
}
function colorIns(c) {
var obj = document.getElementById('col'+cursor);
var result = colorParse(c,'hex');
ends[cursor] = new Color(result[0],result[1],result[2]);
obj.value = ends[cursor].text;
if (ends[cursor].valid == 'y') {colorPour('col',cursor)}
}
function setType(inp) {
colType = inp;
if (inp == 'hex') {base = 16;} else {base = 10;}
for (i = 0; i < 2; i++) {
var obj = document.getElementById('col' + i);
if (ends.valid == 'y') {
ends = new Color(ends.r,ends.g,ends.b);
obj.value = ends.text;
}
}
drawPalette();
document.getElementById('hex').className = '';
document.getElementById('rgbd').className = '';
document.getElementById('rgbp').className = '';
document.getElementById(inp).className = 'coltype';
}
function init(inp) {
if (!inp) {
obj = GetElementsWithClassName('a','coltype');
inp = obj[0].id;
}
document.getElementById(inp).className = 'coltype';
for (i = 0; i < 2; i++) {
ends = new Color;
document.getElementById('col'+i).value = '';
document.getElementById('c'+i).style.background = 'white';
}
for (j = 0; j < 12; j++) {
palette[j] = new Color;
document.getElementById('pal'+j).value = '';
document.getElementById('p'+j).style.background = 'white';
}
document.getElementById('steps').value = '0';
document.getElementById('col0').focus();
}
</script>
</head>
<body onload="init('hex');">
<form onsubmit="return false;">
<h1>Color Blender</h1>
<table id="main">
<tr valign="top">
<td id="uicell">
<table id="input">
<tr>
<th>Format</th>
<td colspan="2">
<a onclick="setType('hex');" id="hex">Hex</a>
<a onclick="setType('rgbd');" id="rgbd">RGB</a>
<a onclick="setType('rgbp');" id="rgbp">RGB%</a>
</td>
</tr>
<tr>
<th id="l1">Color 1</th>
<td class="col"><input type="text" id="col0" size="19" onblur="colorStore('0');" onfocus="setCursor(0);" /></td>
<td class="pal" id="c0"> </td>
</tr>
<tr>
<th id="l2">Color 2</th>
<td class="col"><input type="text" id="col1" size="19" onblur="colorStore('1');" onfocus="setCursor(1);" /></td>
<td class="pal" id="c1"> </td>
</tr>
<tr>
<th>Midpoints</th>
<td>
<select id="steps">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr id="gobuttons">
<td></td>
<td>
<a onclick="drawPalette();">blend</a></td>
<td><a onclick="init();">clear</a></td>
</tr>
</table>
<table id="output">
<tr>
<th>Palette</th>
<td class="text"><input type="text" id="pal0" size="19" /></td>
<td class="pal" id="p0"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal1" size="19" /></td>
<td class="pal" id="p1"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal2" size="19" /></td>
<td class="pal" id="p2"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal3" size="19" /></td>
<td class="pal" id="p3"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal4" size="19" /></td>
<td class="pal" id="p4"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal5" size="19" /></td>
<td class="pal" id="p5"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal6" size="19" /></td>
<td class="pal" id="p6"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal7" size="19" /></td>
<td class="pal" id="p7"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal8" size="19" /></td>
<td class="pal" id="p8"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal9" size="19" /></td>
<td class="pal" id="p9"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal10" size="19" /></td>
<td class="pal" id="p10"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal11" size="19" /></td>
<td class="pal" id="p11"> </td>
</tr>
</table>
</td>
<td id="watercell">
<script type="text/javascript">
var colors = new Array('00','33','66','99','CC','FF');
document.write('<table cellspacing="0" id="grid">');
for (i = 5; i >= 0; i--) {
for (j = 5; j >= 0; j--) {
document.write('<tr>');
for (k= 5; k >= 0; k--) {
var col = colors+colors[j]+colors[k];
document.write('<td style="background: #'+col+';"><a href="javascript:colorIns(\'#'+col+'\');"><\/a><\/td>');
}
document.write('<\/tr>');
}
}
document.write('<\/table>');
</script>
</td>
<td id="textcell">
<ul>
<li>
Pick a color value format, input two <strong>valid</strong> CSS color values in the format you chose, and pick the number of midpoints you'd like to see. The palette will show the colors you input as well as the requested number of midpoint colors, and the values of those colors.</li>
<li>All numbers are rounded to the nearest integer.</li>
<li>Clicking on a square in the "waterfall" display will fill in the appropriate value for whichever input is highlighted.</li>
<li>Switching between value formats will translate whatever values are in place.</li>
<li>"Clear" removes all values and colors, but does not change the current value format.</li>
<li>If you'd like to have the Color Blender for offline use, just view source and save to your hard drive.</li>
</ul>
</td>
</tr>
</table>
</form>
<div id="footer">
<img alt="Creative Commons License" border="0" src="http://creativecommons.org/images/public/somerights.gif">
<p>
<br>
The Color Blender is licensed under a Creative Commons <a href="http://creativecommons.org/licenses/by-sa/1.0/">Attribution-ShareAlike 1.0</a> License.
</p>
<p>
This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive, or e-mail those naughty pictures you hid in the Utilities folder to your mother. Don't blame me if anything bad happens to you, because it's actually the aliens' fault. The code expressed herein is solely that of the author, and he's none too swift with the JavaScript, if you know what we mean, so it's likely to cause giggle fits in anyone who knows what they're doing. Not a flying toy. Thank you for playing. Insert coin to continue.
</p>
</div>
</body>
</html>
< Message edited by SerenityNet -- 8/24/2003 3:09:12 PM >
_____________________________
</Chaos, panic, & disorder - my work here is done.>
|
Printable Version 
I do not now how to change the resolution. I am a real newbie at this. 
New Messages
No New Messages
Hot Topic w/ New Messages
Hot Topic w/o New Messages
Locked w/ New Messages
Locked w/o New Messages
Post New Thread