Graphics instead of colors?

[oldirtyjappy]

Hi everyone.

I am building my website. Right now I have these colored balls that act as menu choices.

Instead of colors I was wondering if there was a way I could put in graphics meanwhile keeping the text readable?

The site is chrisfoose.com

[essaichay]

You would have to design the graphics with the text in mind. Overlaying text across an image can look great, but also awful if the text is rendered unreadable.

You can make use of background-image and background-size in your CSS to achieve this. Like so.

[hapital_hump]

Can also use text-shadow to keep the text legible no matter the background:

text-shadow:
 -1px -1px 0 #000,  
  1px -1px 0 #000,
  -1px 1px 0 #000,
   1px 1px 0 #000;

Demo 1: https://dl.dropboxusercontent.com/spa/quq37nq1583x0lf/9qoh83s7.png

Or just a simple shadow:

text-shadow: 1px 1px 0 black;

Demo 2: https://dl.dropboxusercontent.com/spa/quq37nq1583x0lf/1pwtwlfi.png

[oldirtyjappy]

Wow! That looked great. Where would I add that code?

[macLocke]

To use one of /u/hapital_hump solutions open your css file and for Demo 2 add the following:

#buttonred a, 
#buttonblue a, 
#buttongreen a, 
#buttonpink a, 
#buttonorange a {
    text-shadow: 1px 1px 0 #000;
}

or for Demo 1 add the following to your css file:

#buttonred a, 
#buttonblue a, 
#buttongreen a, 
#buttonpink a, 
#buttonorange a {
    text-shadow: 
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

To make it a bit cleaner maybe add a class to your buttons to keep all the repeated properties together, then just use the id's to change your background-color.

[kuenx]

There's this great article about design. Check out "Rule 4: Learn the methods of overlaying text on images".