gold /silver with CSS

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

What's the closest one can get to making an element (i.e. empty div)
appear golden in CSS? Same for silver.
How? Any ideas?


Re: gold /silver with CSS

Quoted text here. Click to load it

Wikipedia suggests #c0c0c0 for silver and #ffd700 for gold:
< (color)>
< (color)>

Silver is also a named color for html/css, with the hex value
indicated above.

Note that objects that we think of as silver or gold have a metallic
sheen that can't be duplicated on a monitor.


Nick Theodorakis
contact form:

Re: gold /silver with CSS

Quoted text here. Click to load it

Not that it's any help to the OP, but I was reading somewhere recently about
a new type of display under development that can reproduce 99% (made-up
figure, I can't recall, but it was something high like 98% or 99.5% or
something) of real-word surfaces such as metallics etc.

Re: gold /silver with CSS

Quoted text here. Click to load it

You might make a good go of it with the right picture (as bg) on most
screens, you have to have that sheen and the pic must create the
illusion by a non uniform shine and other variations within the overall
yellowish orange colour.


Re: gold /silver with CSS

Quoted text here. Click to load it

Atari 800 ?   8-)

Re: gold /silver with CSS

On Wed, 8 Jul 2009 10:14:57 -0700 (PDT), chlori wrote:

Quoted text here. Click to load it

<div class="firstplace">
<div class="secondplace">

with CSS:
.firstplace { background: url("gold.png") gold repeat }
.secondplace { background: url("silver.png") silver repeat }

You can make your images match exactly want you want for the colors (at
least ond screens like yours, similarly-calibrated, with the same OS,
etc.), since the HTML colors may not exactly match your ideas of those

How you set the size of those elements depends on your actual requirements.

not tested

Re: gold /silver with CSS

Quoted text here. Click to load it

Both gold and silver, even if pure, can vary quite a bit in color if
they have been exposed to the air long enough, so there is no single
color for showing all gold or silver objects. Using some extensions of
php is a powerful method to generate "metal surfaces". It is used to
vary the color over the area selected for the color. Although one may
consider the color I am going to show closer to brass than gold, it
will at least illustrate the principle.

One can use the php code to generate the metal colored object every
time, or output the generate image as a png,  jpg, etc.


I hope the code to follow shows up well on this post. Some browsers,
especially some IE ones, have trouble with showing ph code as text.

PHP code to generate bigbasicbutton follows:

$image_height = 30;
$image_width = 225;
$image = imagecreate($image_width, $image_height);
$back_color = imagecolorallocate ($image, 200, 200, 200);
$w = 225; // width of rectangle
$h = 30; // height of rectangle
$x1 =0; // upper left corner rectangle
$x2 = w; //width of rectangle
$y1 = 0; ; // start y of rectangle
$y2 = h; // end y of rectangle
$ym = round($h/2); // mid y of rectangle
$con = 3.141592654/$h ;
for ($i=3D0;$i<$h;$i++) {
$ys = $y - $ym;
$rd = round(255*( cos($ys*$con))) ; $bl=3D 0 ; $gn = round(200*( cos($y=
$con))) ;
$linecolor = imagecolorallocate ($image, $rd, $gn, $bl);
imageline ($image, $x1, $i, $w, $i,$linecolor);
$end_color = imagecolorallocate ($image, 0, 0, 0) ;imageline ($image,
0, 0, 0, $h,$end_color);
imageline ($image, $w, 0, $w, $h,$end_color);
imagecolortransparent($image, $back_color);
header ('Content-Type: image/png');
imagepng ($image);
imagedestroy ($image);


PHP code to write on and add lines to bigbasicbutton follows:

$image = imagecreatefrompng ("bigbasicbutton.png");
$back_color = imagecolorallocate($image, 200, 200, 200);
$draw_color = imagecolorallocate($image, 0, 0, 0);
imagerectangle($image, 0, 0, imagesx($image), imagesy($image),
$font_number = 5;
imagestring($image, $font_number, 4, 15 - $font_number-2, 'STOP REAL
SWF  MP3  WMP', $draw_color);
$end_color = imagecolorallocate ($image, 0, 0, 0) ;
imagesetthickness ($image, 4);
imageline ($image, 0, 0, 0, 35,$end_color);
imageline ($image, 45, 0, 45, 35,$end_color);
imageline ($image, 90, 0, 90, 35,$end_color);
imageline ($image, 135, 0, 135, 35,$end_color);
imageline ($image, 180, 0, 180, 35,$end_color);
imageline ($image, 224, 0, 224, 35,$end_color);
header('Content-Type: image/png');

Re: gold /silver with CSS

On Wed, 8 Jul 2009 10:14:57 -0700 (PDT), chlori

Quoted text here. Click to load it

Educate yourself and learn about "background-color".
I generally use the format of background:#000

But you can also use background:RGB(0,0,0)

Site Timeline