CSS Challenge #3 - Things are about to get dicey. CSS positioning

HTML & CSS
21

It’s Friday, so today I’ll go ahead and reveal the CSS behind the test render in the first post, and explain how it works. From here on out there’s no need to spoil your code examples folks.


body>div {
  position: relative;
  margin: 10em auto;
  width: 15em;
  height: 15em;
  background: red;  
  box-shadow: 1em 1em 1em black;
}

The first block draws the die itself and gives it a drop shadow. I personally favor ‘em’ as a unit of measurement - it’s roughly equivalent to 16px on most devices, but it is a relative measurement meaning that it will change as the base font size element changes. Refer to the sitepoint reference on css measurements for more information. The die block is given a positioning of relative in order that its child divs, the dots, can be absolutely positioned relative to it, and not relative to the body.


div>div {
  position: absolute;
  height: 3em;
  width: 3em;
  border-radius: 3em;
  background: white;
}

This creates the dots of the die face.


div>div:nth-child(1) { top: 2em;  left: 2em; }
div>div:nth-child(2) { bottom: 2em;  left: 2em; }
div>div:nth-child(3) { top: 2em;  right: 2em; }
div>div:nth-child(4) { bottom: 2em;  right: 2em; }

The corner pips are set equidistant from their respective sides. The nth-child psuedo selector is seen here in its simplest form. Keep in mind that css child indexes start from 1, unlike most computer indexes which start from 0 (There are reasons programmers do this other than to just be difficult).


div>div:nth-child(5) { top: 6em; left: 2em; }
div>div:nth-child(6) { top: 6em; right: 2em; }

Meanwhile the two side pips have to be positioned measured from the top because CSS lacks a true vertical centering approach (I’m aware of).

22

Good work Michael :slight_smile:

Here’s my example (webkit and Firefox only):

http://www.pmob.co.uk/temp/rotate-cube6.htm

It just uses this simple html:


<div>
		<div>
				<div></div>
				<div></div>
				<div></div>
				<div><b></b></div>
				<div></div>
				<div></div>
		</div>
</div>

I can’t take much credit for the transforms as I mainly borrowed bits and pieces from here and there and fiddled with it until it did what I wanted :slight_smile:

23

For my solution, I tried to complete the expert variant without modifying the original HTML: http://jsfiddle.net/HFD3j/

24

Good example ( but note the two opposite numbers on a die should add up to 7 :))

25

<gamer geek>
Two opposite numbers on a die should add up to N+1, where N is the number of sides on the die. 7 for a six sided die, 13 for a 12 sided die, 21 for a 20 sided die and so on. d4’s are an exception to this rule since there isn’t an opposing side for the d4.
</gamer geek>

26

Whoops. Transposed the 2 and the 5. Thanks for pointing that out. Here’s an update: http://jsfiddle.net/HFD3j/1/

27

[FONT=Verdana]Swapping the faces around allows the number of dots on each transition to increase by 1, as shown by aprylisnow. Cool, but not a “real” die. In the interest of realism, the location of the face matters (opposite faces add up to n+1 sides), as pointed out by Paul and Michael. Makes sense :slight_smile: . To carry realism a step further, does the orientation of the dots matter?

Horizontal image:

Vertical code:
[/FONT]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?969179-CSS-Challenge-3-Things-are-about-to-get-dicey-CSS-positioning
Thread: CSS Challenge #3 - Things are about to get dicey. CSS positioning.
Feb 4, 2013 11:11
Michael Morris
-->
<head>
    <title>Dicey - Positioning</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">
/*
   Positions the Dots Symmetrically... even if the box shape becomes rectangular.
   Box dimensions, circle dimensions, & circle margins are the only adjustments likely to be utilized.
   No math required beyond division by 2 :)
*/
body {
    background-color:#864;
    text-align:center;
    padding:0px;
    margin:12px;
}
body > div {
    width:240px;             /* width  of box */
    height:240px;            /* height of box */
    background-color:#ffe;
    box-shadow:0px 0px 16px 0px #776 inset;
    border-radius:16px;      /* corners of box; optional */
    position:relative;
    margin:1px auto;         /* centers box on page */
}
div > div {
    width:52px;              /* diameter of dot */
    height:52px;             /* diameter of dot */
    background-color:#333;                     /* drilled but not filled (not real casino dice :grin:) */
    box-shadow:0px 0px 18px 8px #000 inset;    /* drilled but not filled (not real casino dice :grin:) */
    border-radius:50%;
    position:absolute;
    margin:20px;             /* distance from edge of box */
}
.left,
.right {
    position:relative;
    margin-top:-241px;
}
.left {
    left:-241px;
}
.right {
    right:-241px;
}
/* margin-top | margin-left = -1/2 diameter of dot */
.c,.f,.i {right:0px;}
.g,.h,.i {bottom:0px;}
.d,.e,.f {top:50%;margin-top:-26px;}
.b,.e,.h {left:50%;margin-left:-26px;}
/*
    a  b  c
    d  e  f
    g  h  i
*/
    </style>
</head>
<body>

<div class="">       <!-- five -->
    <div class="a"></div>
    <div class="c"></div>
    <div class="e"></div>
    <div class="g"></div>
    <div class="i"></div>
</div>
<div class="">       <!-- one -->
    <div class="e"></div>
</div>
<div class="left">   <!-- four -->
    <div class="a"></div>
    <div class="c"></div>
    <div class="g"></div>
    <div class="i"></div>
</div>
<div class="right">  <!-- three ccw (left-leaning) -->
    <div class="a"></div>
    <div class="e"></div>
    <div class="i"></div>
</div>
<div class="">       <!-- two ccw (left-leaning) -->
    <div class="a"></div>
    <div class="i"></div>
</div>
<div class="">       <!-- six horizontal -->
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="g"></div>
    <div class="h"></div>
    <div class="i"></div>
</div>

</body>
</html>
28

I suppose it does :slight_smile:

I’ve updated my demo (Firefox only) and the dots should now be in the right place even as the die twists and turns (hopefully :)). I also reverted to using the gradient filter for the dots much as I did in the chequers thread (and as some of the other entries here).

29

No. Different die manufacturers and cultures use different placements. Role Playing games such as D&D often use d6’s with numeric faces instead of dots.

30

Thanks, Michael. I knew about the differences between cultures and that some dice use numeric faces instead of dots; but didn’t know if the orientation of the dots on Western style dice was “professionally” significant or not. Had never thought about it before. Thanks for the info. I’ve enjoyed the dice challenge :slight_smile: