PDA

View Full Version : imageless gradient!



nexosis
Mar 15th, 2007, 01:29 PM
<html>
<head>
</head>
<body>
<script>
document.write("simple<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb("+i+","+i+","+i+")'>&nbsp;</span>")
}
document.write("<br>")
document.write("red,green,blue<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(0,0,"+i+")'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(0,"+i+",0)'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb("+i+",0,0)'>&nbsp;</span>")
}
document.write("<br>")
document.write("other<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(9,"+i+",9)'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb("+i+",9,"+i+")'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(78,122,"+i+")'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(8,"+i+",255)'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(11,1,"+i+")'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(0,255,"+i+")'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(99,"+i+",99)'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(88,"+i+",111)'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(8,2,"+i+")'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(255,"+i+",255)'>&nbsp;</span>")
}
</script>
</body>
</html>


If you like the script, thank you!!!

MikeFoster
Mar 17th, 2007, 04:09 AM
Cool. Great idea! :-)

liorean
Mar 17th, 2007, 04:25 AM
Sorry, but I have to say that's among the worst code examples I've seen for something like this. Everything is hard coded, you gladly repeat patterns that should be functions, and you use document.write to write something to the document, and it really reads like a first-try-at-javascript code sample. If it still does in a few days, I'll delete this. This forum is for useful, well coded scripts.

(Okay, checked it ans there's loads of gradients in there, so you're excused for repetition. However, the script is still trivial.)

MikeFoster
Mar 17th, 2007, 04:46 PM
But you have to admit it is an interesting idea ;)

MikeFoster
Mar 17th, 2007, 04:50 PM
Ok, nexosis, now turn it into a re-useable function - we'll help :)

nexosis
Mar 19th, 2007, 06:26 PM
i'm worrying about something, so I made that script updated.


<html>
<head>
<title>Imageless gradient</title>
</head>
<body>
<script type="text/javascript">
document.write("simple gradient<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb("+i+","+i+","+i+")'>&nbsp;</span>")
}
document.write("<br>")
document.write("red,green and blue<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(0,0,"+i+")'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(0,"+i+",0)'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb("+i+",0,0)'>&nbsp;</span>")
}
document.write("<br>")
document.write("other gradient stuff<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(9,"+i+",9)'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb("+i+",9,"+i+")'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(78,122,"+i+")'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(8,"+i+",255)'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(11,1,"+i+")'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(0,255,"+i+")'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(99,"+i+",99)'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(88,"+i+",111)'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(8,2,"+i+")'>&nbsp;</span>")
}
document.write("<br>")
for(i = 1; i <= 255; i++)
{
document.write("<span style='background-color:rgb(255,"+i+",255)'>&nbsp;</span>")
}
</script>
</body>
</html>

shlagish
Mar 19th, 2007, 11:54 PM
Here is my try at it. It's far from perfect but it's a bit more 'evolved'.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Shawn Inder" />
<title>Gradients</title>
<style type="text/css">
<!--



-->
</style>
<script type="text/javascript">
<!--

function createGradient(){

var ri=new Number(document.getElementById("ri").value);
var gi=new Number(document.getElementById("gi").value);
var bi=new Number(document.getElementById("bi").value);
var rf=new Number(document.getElementById("rf").value);
var gf=new Number(document.getElementById("gf").value);
var bf=new Number(document.getElementById("bf").value);
var dest=document.getElementById("destination");
var steps=new Number(document.getElementById("steps").value);
var rsteps=(rf-ri)/steps;
var gsteps=(gf-gi)/steps;
var bsteps=(bf-bi)/steps;
var html="";
var r, g, b;
for(var j=0;j<=steps;j++){
r=ri+rsteps*j;
g=gi+gsteps*j;
b=bi+bsteps*j;
html+="<span style='background-color: rgb("+Math.round(r)+","+Math.round(g)+","+Math.round(b)+");'>&nbsp;</span>";
}
dest.innerHTML=html;
}

-->
</script>
</head>
<body>

<h1>Gradients</h1>
<form if="form">
<label for="ri">From: </label><label for="ri">r:</label><input id="ri" type="text" /><label for="gi">g:</label><input id="gi" type="text" /><label for="bi">b:</label><input id="bi" type="text" /><br />
<label for="rf">To: </label><label for="rf">r:</label><input id="rf" type="text" /><label for="gf">g:</label><input id="gf" type="text" /><label for="bf">b:</label><input id="bf" type="text" /><br />
<label for="steps">steps: </label><input id="steps" type="text" value="100" />

<input type="button" value="Go" onclick="createGradient()" />
</form>
<div id="destination"></div>


</body>
</html>

You could start from there and go on to add multiple color formats (hex, names), error control (stop the input of: numbers not between 0 and 255, non-numbers, prevent negative steps), whatever else you can think of.

I'd like to see an efficient way to apply this to a page... How can I integrate my beautiful gradient to my page? Have it as a background to my navigation bar, whatever. You could make a vertical gradient. Wow I'm having too much ideas here.
Hope my script can help you a bit.

MikeFoster
Mar 20th, 2007, 08:25 PM
I also could not resist playing with it ;)

Here's the online demo (http://cross-browser.com/toys/imageless_gradients.html), and the source follows:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Imageless Gradients</title>
<style type='text/css'>
body {
color:#000; background:#fff;
margin:0; padding:20px 40px;
font-family:verdana,arial,helvetica,sans-serif;
}
.hGrad {
position: relative;
padding: 0;
}
.hGrad span {
margin: 0;
padding: 0;
}
.vGrad {
position: relative;
overflow: hidden;
width: 400px;
padding: 0;
}
.vGrad span {
position: relative;
display: block;
overflow: hidden;
width: 400px;
height: 2px;
margin: 0;
padding: 0;
}
</style>
<script type='text/javascript'>
window.onload = function()
{
document.getElementById('hg1').innerHTML
= createGradient(255,255,255, 0,0,0, 50)
+ createGradient(0,0,0, 255,255,255, 50);

document.getElementById('vg1').innerHTML
= createGradient(0,0,255, 0,255,255, 50)
+ createGradient(0,255,255, 0,255,0, 50)
+ createGradient(0,255,0, 255,255,0, 50)
+ createGradient(255,255,0, 255,0,0, 50);
}
function createGradient(ri, gi, bi, rf, gf, bf, steps)
{
var rsteps=(rf-ri)/steps;
var gsteps=(gf-gi)/steps;
var bsteps=(bf-bi)/steps;
var html="", r, g, b;
for(var j=0;j<=steps;j++){
r=ri+rsteps*j;
g=gi+gsteps*j;
b=bi+bsteps*j;
html += "<span style='background-color: rgb("+Math.round(r)+","+Math.round(g)+","+Math.round(b)+");'>&nbsp;</span>";
}
return html;
}
</script>
</head>
<body>

<h1>Imageless Gradients</h1>
<p>This cool effect was presented by nexosis at this <a href='http://www.codingforums.com/showthread.php?t=109897'>CodingForums thread</a>. It was then modified by shlagish and then by me.</p>
<h2>Horizontal</h2>
<div id='hg1' class='hGrad'></div>
<h2>Vertical</h2>
<div id='vg1' class='vGrad'></div>

</body>
</html>

liorean
Mar 20th, 2007, 08:30 PM
You know what? I still don't think this fits into this forum. At the same time, I don't feel like I want to quelch the continued development. So I'll just move it to the JavaScript Programming forum.

shlagish
Mar 21st, 2007, 12:21 AM
My new gradient maker!



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Shawn Inder" />
<title>Gradients</title>
<style type="text/css">
<!--

span { display: block; float: left; font-size: 1px; }

-->
</style>
<script type="text/javascript">
<!--
function getColors(){
var iColors={
r: new Number(document.getElementById("ri").value),
g: new Number(document.getElementById("gi").value),
b: new Number(document.getElementById("bi").value)}
var fColors={
r: new Number(document.getElementById("rf").value),
g: new Number(document.getElementById("gf").value),
b: new Number(document.getElementById("bf").value)}
var colors={
i: iColors,
f: fColors}
return colors;
}
function createGradient(){
var colors=getColors();
var isHor=(document.getElementById("form").dir[0].checked)?1:0;
var html=makeHtml(colors,isHor);
var dest=document.getElementById("destination");
dest.innerHTML=html;
}

function makeHtml(colors,isHor){
if(isHor){
var steps=new Number(document.getElementById("width").value);
var width=1;
var height=new Number(document.getElementById("height").value);
var float="float: left;";
} else {
var steps=new Number(document.getElementById("height").value);
var width=new Number(document.getElementById("width").value);
var height=1;
var float="clear: both;";
}
var diff={
r: (colors.f.r-colors.i.r)/steps,
g: (colors.f.g-colors.i.g)/steps,
b: (colors.f.b-colors.i.b)/steps}
var html="<style type='text/css'><!-- #destination span { width: "+width+"px; height: "+height+"px; "+float+"} --></style>";
var r, g, b;
for(var j=0;j<steps;j++){
r=colors.i.r+diff.r*j;
g=colors.i.g+diff.g*j;
b=colors.i.b+diff.b*j;
html+="<span style='background-color: rgb("+Math.round(r)+","+Math.round(g)+","+Math.round(b)+");'>&nbsp;</span>";
}
return html;
}

-->
</script>
</head>
<body>

<h1>Gradients</h1>
<form id="form">
<input type="radio" id="hor" name="dir" checked="checked" /><label for="hor">Horizontal: </label>
<input type="radio" id="vert" name="dir" /><label for="vert">Vertical: </label><br />
<label for="ri">From: </label>
<label for="ri">r:</label><input id="ri" type="text" value="0" />
<label for="gi">g:</label><input id="gi" type="text" value="0" />
<label for="bi">b:</label><input id="bi" type="text" value="0" /><br />
<label for="rf">To: </label>
<label for="rf">r:</label><input id="rf" type="text" value="255" />
<label for="gf">g:</label><input id="gf" type="text" value="255" />
<label for="bf">b:</label><input id="bf" type="text" value="255" /><br />
<label for="width">width: </label><input id="width" type="text" value="100" />
<label for="height">height: </label><input id="height" type="text" value="100" />
<input type="button" value="Go" onclick="createGradient()" />
</form>
<div id="destination"></div>


</body>
</html>

I should add error management and stuff but that part is boring.

For some reason, the loading bar at the bottom is always "loading" even when the page is finished loading, do you know why?

edit: doesn't work as intended in IE