CSS Challenge 2 - Checkerboard

HTML & CSS
1

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)…

From this HTML


<!DOCTYPE html>
<html>
   <body>
	<div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
	</div>
</body>
</html>

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.

2

Nice quiz! Do you want people to post solutions?

3

Sure, using spoiler tags

[noparse]Like this[/noparse]

Yielding this…

Like this

Come to think of it, I guess I can post my solution as well that way rather than wait on Friday.

body { padding: 5em; }

body>div {
width: 40em;
height: 40em;
margin: 0 auto;
border: .5em solid #fc0;
}

body>div>div {height: 5em;}

div>div>div { height: 5em; width: 5em; display: inline-block;}
div>div:nth-child(odd)>div:nth-child(odd), div>div:nth-child(even)>div:nth-child(even) {background: #f00 }
div>div:nth-child(odd)>div:nth-child(even), div>div:nth-child(even)>div:nth-child(odd) {background: #000 }

4

Cool, here’s mine:

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

5

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.

6

Here’s my attempt:

div{width:55px;height:55px;float:left}
body>div {border:5px solid #fc0;width:440px; height:440px;background:#f00}
body>div div:nth-child(odd) div:nth-child(even),body > div div:nth-child(even) div:nth-child(odd) {background:#000}

Or without using any divs at all :slight_smile:

body:after {
content:" ";
display:block;
background-color:#f00;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%);
background-size:100px 100px;
background-position: 0 0, 50px 50px;
width:400px;
height:400px;
border:5px solid #fc0;
}

Firefox only

7

Ha ha, very nice, Paul. I can’t quite get my head around all the bits and pieces of gradients yet. Tempted to wait until there’s a definitive syntax.

8

No, I find it too awkward also. I just copy and paste the bits I need or use the gradient generators.

9

Ha… well, Can you put checkers on the board without any HTML?

10

Yes sure can :slight_smile:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>Untitled Document</title>
<style type=“text/css”>
body:after {
content:" ";
display:block;
background-color:#f00;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%);
background-size:100px 100px;
background-position: 0 0, 50px 50px;
width:400px;
height:400px;
border:5px solid #fc0;
}
body:before{
content:"C h e q u e r s ";
display:block;
position:absolute;
left:30px;
top:10px;
font-size:40px;
font-family:monospace;
color:#fff;
}

</style>
</head>
<body>
</body>
</html>

11

LOL.

Wise guy eh?

:smiley:

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?

12

Now you’re being silly :slight_smile:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>Untitled Document</title>
<style type=“text/css”>
html { background:#000 }
body {
background-color:#f00;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%);
background-size:100px 100px;
background-position: 0 0, 50px 50px;
width:400px;
height:400px;
border:5px solid #fc0;
}
body:before {
background-color: transparent;
background-image: radial-gradient(blue 35%, transparent 16%), radial-gradient(blue 35%, transparent 16%);
background-position: -16px -15px, 30px 35px;
background-size: 102px 102px;
content: " ";
height: 163px;
left: 0;
position: absolute;
top: 250px;
width: 412px;
z-index: 2;
clip: rect(10px, 412px, 163px, 10px);
}
body:after {
background-color: transparent;
background-image: radial-gradient(white 35%, transparent 16%), radial-gradient(white 35%, transparent 16%);
background-position: -16px -15px, 30px 35px;
background-size: 102px 102px;
clip: rect(10px, 462px, 163px, 60px);
content: " ";
height: 163px;
left: -48px;
position: absolute;
top: 0;
width: 462px;
z-index: 2;
}
</style>
</head>
<body>
</body>
</html>

Not sure I can get closer than that without some html :slight_smile:

13
Off Topic:

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 …

14

Very impressive Paul.

15

I’ll buy you a vowel… er… a <div> (:

16

Paul, I thought of the same solution using linear gradients, you beat me to it :slight_smile:

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.

17

Thanks for the link Mark it should prove useful.

18

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 …

lol - you love it really :slight_smile:

19

Ok, it’s Friday, so here’s a look at my original solution outside of spoiler tags.


body { padding: 5em; }

body>div {
  width: 40em;
  height: 40em;
  margin: 0 auto;
  border: .5em solid #fc0;
}
	
body>div>div {height: 5em;}
		
div>div>div { height: 5em; width: 5em; display: inline-block;}
div>div:nth-child(odd)>div:nth-child(odd), div>div:nth-child(even)>div:nth-child(even) {background: #f00 }
div>div:nth-child(odd)>div:nth-child(even), div>div:nth-child(even)>div:nth-child(odd) {background: #000 }

Monday’s challenge will be the first in a series dealing with element positioning.

20

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.