gold /silver with CSS

C

chlori

Hello

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?

Thanks!
 
N

Nick Theodorakis

Hello

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?

Thanks!

Wikipedia suggests #c0c0c0 for silver and #ffd700 for gold:
<http://en.wikipedia.org/wiki/Silver_(color)>
<http://en.wikipedia.org/wiki/Gold_(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
 
J

John Hosking

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?

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

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
colors.

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

Nik Coughlin

Wikipedia suggests #c0c0c0 for silver and #ffd700 for gold:
<http://en.wikipedia.org/wiki/Silver_(color)>
<http://en.wikipedia.org/wiki/Gold_(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.

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.
 
D

dorayme

Wikipedia suggests #c0c0c0 for silver and #ffd700 for gold:
<http://en.wikipedia.org/wiki/Silver_(color)>
<http://en.wikipedia.org/wiki/Gold_(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.

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. [/QUOTE]

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.
 
C

cwdjrxyz

Hello

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?

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.

http://www.cwdjr.net/audio3/bigbasicbutton.php

http://www.cwdjr.net/audio3/bigbasicbutton.png

http://www.cwdjr.net/audio3/playersbutton2.php

http://www.cwdjr.net/audio3/playersbutton2.png

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:

<?php
$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=0;$i<$h;$i++) {
$y=$i;
$ys = $y - $ym;
$rd = round(255*( cos($ys*$con))) ; $bl= 0 ; $gn = round(200*( cos($ys*
$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:

<?php
$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),
$draw_color);
$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');
imagepng($image);
imagedestroy($image);
?>
 
A

Andy Dingley

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.

Atari 800 ? :cool:
 
R

richard

Hello

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?

Thanks!

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)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,756
Messages
2,569,540
Members
45,025
Latest member
KetoRushACVFitness

Latest Threads

Top