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

**kevinthompson** · Feb 18, 2013 12:12

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

**ronpat** · Feb 19, 2013 14:41

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

. To carry realism a step further, does the orientation of the dots matter?

Horizontal image:

Die.png

Vertical code:

Code:

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

**Paul O'B** · Feb 19, 2013 18:46

Originally Posted by ronpat

To carry realism a step further, does the orientation of the dots matter?

I suppose it does

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

**Michael Morris** · Feb 19, 2013 21:02

Originally Posted by ronpat

[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

. To carry realism a step further, does the orientation of the dots matter?

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.

**ronpat** · Feb 19, 2013 21:25

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

User Tag List

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

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions