A while ago I wrote a thread where I was teaching someone CSS. Well, they changed their mind I think, so the lessons I thought up have nowhere to go. So I’ll post them up as challenges. Today’s is relatively straightforward - get this checkerboard (webkit engine rendering)…
Now the tricky part. The point of the exercise is to get comfortable with the direct child operator in CSS “>”, and the nth-child psuedo element. My answer will be posted Friday. I created the render above with only 6 statements.
body > div {border: 5px solid orange; width: 800px; margin: 0 auto;}
div > div {overflow: hidden;}
div div div {float: left; width: 100px; height: 100px; background: red;}
div > div:nth-child(2n-1) div:nth-child(2n), div > div:nth-child(2n) div:nth-child(2n+1) {background: black;}
Seems to work fine in Chrome, FF, Opera, Safari. I’m not bothering with IE, though it should be OK in 9+. (You solution is neater, though, but basically the same.)
I’ll “see” Ralph’s 4 lines:
(beat these dimensions, Baby!)
body > div {display:table;border:9px solid gold;background:#000;margin:0 auto;}
body > div > div {clear:left;}
div div div {width:80px;height:80px;float:left;}
div div:nth-child(2n+1) div:nth-child(2n+1),div div:nth-child(2n) div:nth-child(2n) {background:#f00;}
Firefox and Chrome. IE8 is a bust. Didn’t try IE9.
What about 12 red filled in circles and 12 black filled in circles each with white borders, positioned in their standard starting position for the game of chequers?
We regret to inform that we found ralph.m dead at his computer today. His brain appeared to be fried. Before him on the screen was some strange code and an image of a chequer board. Investigations continue …
Paul, I thought of the same solution using linear gradients, you beat me to it
Lea Verou’s slides helped me understand the gradient syntax so I didn’t need to copy and paste the solutions every time. http://lea.verou.me/css3-gradients/
They only really benefit you when you understand them, I find them really useful for creating things like rulers, lines on a notepad - Things like that.
We regret to inform that we found ralph.m dead at his computer today. His brain appeared to be fried. Before him on the screen was some strange code and an image of a chequer board. Investigations continue …
Alright and now how would you make this checkerboard to be responsive ?
On mobile devices the width can be bigger than the height or the contrary depending portrait or landscape mode, this has to be taken in consideration.