Button/checker/draught (call it what you will) help, please.

[johnhedge]

Hi List,

I’m very new to CSS so go slowly, please.

I’ve googled till I’m not getting any new responses. I’ve used any amount of different words to try and describe what I want, all without much success. I was hoping to be able to attach a small png but I can’t.

Basically I want to create a 2D checker with CSS for a game I’m building. 20px by 20px in various colours. It seems this is accomplished in Photoshop by light and shade but I’m no artist.

Any help or direction to online explanation would be gratefully received.

TIA

John

[CrocoDillon]

There are websites where you can paste images, like http://snag.gy/

Easier to see what you’re after if you do that :)

[RedJokingInn]

Go to the article here on this very site:
[Striped and Checkerboard Backgrounds Without Images](https://css-tricks.com/striped-and-checkerboard-backgrounds-without-images/ “Striped and Checkerboard Backgrounds Without Images”)

[Paulie_D]

That link no longer works.

Try this: http://lea.verou.me/css3patterns/

[RedJokingInn]

@Paulie_D
Strangely enough, the link in the css tricks post wasn’t dead this morning.
Thanks for finding the new one.

[johnhedge]

Wow! Thanks for 3 good responses and 2 great suggestions. I wish I’d posted sooner. It would’ve saved me a lot of angst.

[johnhedge]

CrocoDillon: This was what I was referring to. http://snag.gy/XCg8M.jpg

[Paulie_D]

http://codepen.io/Paulie-D/pen/Krvdf

[johnhedge]

Thank you Paulie_D. A great help and I’ll learn from it.

[Author]

Posts