SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 30 of 30
  1. #26
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoops. Transposed the 2 and the 5. Thanks for pointing that out. Here's an update: http://jsfiddle.net/HFD3j/1/

  2. #27
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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>

  3. #28
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,787
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ronpat View Post
    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).

  4. #29
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,011
    Mentioned
    56 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    [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.

  5. #30
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •