CSS Challenge 2 - Checkerboard.

**Michael Morris** · Jan 28, 2013 21:24

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

testRender2.png

From this HTML

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

**ralph.m** · Jan 28, 2013 21:49

Nice quiz! Do you want people to post solutions?

**Michael Morris** · Jan 28, 2013 21:59

Sure, using spoiler tags

[spoiler]Like this[/spoiler]

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 }

**ralph.m** · Jan 28, 2013 22:04

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

**ronpat** · Jan 29, 2013 00:37

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.

**Paul O'B** · Jan 29, 2013 14:42

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

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

**ralph.m** · Jan 29, 2013 15:26

Originally Posted by Paul O'B

Or without using any divs at all

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.

**Paul O'B** · Jan 29, 2013 16:36

Originally Posted by ralph.m

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.

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

**Michael Morris** · Jan 30, 2013 11:51

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

**Paul O'B** · Jan 30, 2013 13:43

Originally Posted by Michael Morris

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

Yes sure can

<!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>

**Michael Morris** · Jan 30, 2013 14:02

LOL.

Wise guy eh?

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?

**Paul O'B** · Jan 30, 2013 14:59

Originally Posted by Michael Morris

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?

Now you're being silly

<!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

**ralph.m** · Jan 30, 2013 15:26

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

**Michael Morris** · Jan 30, 2013 15:37

Very impressive Paul.

**ronpat** · Jan 30, 2013 17:51

Originally Posted by Paul O'B

Not sure I can get closer than that without some html

I'll buy you a vowel... er... a <div>

**markbrown4** · Jan 31, 2013 00:04

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.

**Paul O'B** · Jan 31, 2013 03:23

Originally Posted by markbrown4

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/

Thanks for the link Mark it should prove useful.

**Paul O'B** · Jan 31, 2013 03:26

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

**Michael Morris** · Feb 1, 2013 15:59

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

Code css:

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.

User Tag List

Thread: CSS Challenge 2 - Checkerboard.

Thread Tools

Display

CSS Challenge 2 - Checkerboard.

Bookmarks

Bookmarks

Posting Permissions