طیفی از رنگ

[student91]

سلام
من می خوام یک جدول طراحی کنم که رنگ ستون ها از ستون اول تا آخر،برحسب یک طیف رنگی تغییر کنه!
مثلا ستون اول آبی باشه،بعدی کمرنگ تر و می خوام ستون آخر این طیف قرمز بشه!
لطفا کمکم کنید.ممنون.
ستون های جدولم به صورت پویا ساخته میشه،ولی نمی دونم چطوری براشون رنگ به این سبک بدم!

[mehdi.mousavi]

سلام.
از CSS3 Gradient Color (http://gradients.glrzad.com/) ها استفاده کنید.

موفق باشید.

[student91]

لطفا بیشتر راهنمایی کنید!
رفتم به این لینک ولی چیز خاصی متوجه نشدم!

[cyrusthegreat]

شما دقیقا می خوایید هر ستون رنگ مجزا داشته باشن، یا نه می خوایید یه رنگ از سمت ستون اول شروع بشه، و کم کم به سمت رنگ قرمز متمایل بشه؟

[student91]

می خوام هر ستون رنگ مجزایی داشته باشه،اما رنگ های ستون ها از راست به چپ از آبی تا قرمز تغییر کنه.
مثلا
ستون اول:آبی پررنگ
ستون دوم :آبی کم رنگ تر
...
ستون آخر:قرمز
می خوام به ازای اضافه شدن هر ستون،رنگ ستون جدید از آبی دور تر و به قرمز متمایل تر بشه!

[cyrusthegreat]

دوست عزیز

شما دوتا راه حل برای اینکار دارید. بفرمایید که تعداد ستون ها ثابت هست یا نه؟

[student91]

نه ثابت نیستن

[cyrusthegreat]

خب چون ثابت نیستن، فقط با جاواسکریپت می شه انجام داد. شما با Jquery کار کردید؟

[mehdi.mousavi]

می خوام هر ستون رنگ مجزایی داشته باشه،اما رنگ های ستون ها از راست به چپ از آبی تا قرمز تغییر کنه. مثلا ستون اول:آبی پررنگ ستون دوم :آبی کم رنگ تر ... ستون آخر:قرمز می خوام به ازای اضافه شدن هر ستون،رنگ ستون جدید از آبی دور تر و به قرمز متمایل تر بشه!


سلام.
برای اینکار، فرض می کنیم که شما حداکثر تعداد ستون های جدول رو می دونید، بطور مثال میدونید که تعداد ستون ها در خاص ترین حالت، حداکثر 7 ستون هستش (من اینجا برای 7 ستون مثال میزنم، اگر بیشتر باشه، خودتون میتونید کد زیر رو تغییر بدید). با فرض اینکه HTML امون این باشه:

<table id="tblColorful">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
</tr>
<tr>
<td>Cell 8</td>
<td>Cell 9</td>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
<td>Cell 13</td>
<td>Cell 14</td>
</tr>
</table>


در اینصورت، با استفاده از CSS زیر به هدفمون میرسیم:

#tblColorful { width: 100%; border-collapse:collapse;}
#tblColorful td { border:1px solid #000; }
#tblColorful td:nth-child(1) { background-color: #1d1ab2; }
#tblColorful td:nth-child(2) { background-color: #3914af; }
#tblColorful td:nth-child(3) { background-color: #510fad; }
#tblColorful td:nth-child(4) { background-color: #6f0aaa; }
#tblColorful td:nth-child(5) { background-color: #a600a6; }
#tblColorful td:nth-child(6) { background-color: #cd0074; }
#tblColorful td:nth-child(7) { background-color: #e20048; }


حالا اگر Maximum تعداد ستون ها، بیش از 7 بود، کافیه تا به CSS های فوق، مقادیر مورد نظر رو اضافه کنید. بدین ترتیب، هر وقت ستون جدیدی به جدول اضافه بشه (تا حداکثر تعیین شده)، بطور خودکار رنگ اون ستون به رنگ دلخواه شما نمایش داده خواهد شد. برای مشاهده کد فوق در عمل، به این آدرس (http://jsfiddle.net/jJN9m/) رجوع کنید.

موفق باشید.

پاورقی: برای در آوردن کد رنگ های دلخواهتون، می تونید از Color Wheel های موجود استفاده کنید. من اینو می پسندم (http://colorschemedesigner.com/). :)

[student91]

سلام و ممنون از راهنمایی های خوبتون.

برای جدولی که حداکثر 15
ستون داشته باشه،این کد هم خوب جواب میداد:


$k=10;
echo '<table border="0px">';
for($i =1; $i <= $k; $i++) {
if($i < 8)
{
echo '<tr bgcolor="#'.dechex(2*$i).dechex(2*$i).dechex($k-2).dechex($k-2).dechex(15/$i-2).dechex(15/$i-2).'" height="10px"><td>;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;</td></tr>';
}
else
{
echo '<tr bgcolor="#'.dechex($i).dechex($i).dechex($k-$i).dechex($k-$i).'00" height="10px"><td>;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;</td></tr>';
}

}
echo '</table>';

که k تعداد ستون هاست.