Skip to main content

SitePoint Code Challenge: CSS — Things Are About to Get Dicey

By Sarah Hawk

Blogs

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

We’re running a series of code challenges on the SitePoint Forums, and this week’s challenge is to create a die face using the following HTML:

<!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>Dicey Challenge</title>
<style type="text/css">
</style>
</head>
<body>
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>	
</div>
</body>
</html>

You will need to set the containing box to position relative, then absolutely position the six child divs within it and user border radius to transform them into circles. Your result should look something like this…

Dice challenge

Advanced Level Challenge
Using 3D transforms, present three sides of the die. You may modify the HTML as needed.

Expert Level Challenge
Spin the die 360 degrees on :hover.

You can find the answer here.

Formerly a developer in the corporate world, HAWK (known as Sarah by her mother) said goodbye to the code and succumbed to the lure of social media to become the Community Manager for the SitePoint network. Now Hawk is working with Discourse to build their product and community.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.