SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,015
    Mentioned
    62 Post(s)
    Tagged
    0 Thread(s)

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

    Today's challenge is to create a die face using the following HTML.

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

    testRender.png

    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.

    I'll post the answer to the beginner level challenge on Friday. Other answers should be masked with spoilers using the following syntax
    [code][spoiler]
    Your solution goes here
    [/spoiler][/code]
    Last edited by cpradio; Feb 7, 2013 at 13:26. Reason: Added spoiler syntax added code tags

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Looks interesting Michael, I'll try and have a go at the advanced one later in the week when I have some spare time

  3. #3
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    Very interesting Michael, even though I've never done a quiz before I look forward to taking this for a spin
    ictus==""

  4. #4
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hey, that sounds interesting, plus I think I've done something like this at one point already but I didn't use 3D transforms because they didn't exist :P

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Beginner:

    body > div {
    background: red;
    position: relative;
    width: 100px;
    height: 100px;
    box-shadow: 5px 5px 5px;
    }
    div div {
    position: absolute;
    background: #fff;
    width: 14px;
    height: 14px;
    border-radius: 10px;
    margin-top: -7px;
    }
    div div:nth-child(1) {
    top: 20px;
    left: 20px;
    }
    div div:nth-child(2) {
    top: 50px;
    left: 20px;
    }
    div div:nth-child(3) {
    top: 80px;
    left: 20px;
    }
    div div:nth-child(4) {
    top: 20px;
    right: 20px;
    }
    div div:nth-child(5) {
    top: 50px;
    right: 20px;
    }
    div div:nth-child(6) {
    top: 80px;
    right: 20px;
    }

  6. #6
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi!

    I just signed up to join the forum (well, apparently I had a never-before used account).
    I love this kind of challenge

    I've made an attempt at the expert level, but I'm unsure of how to post my entry without
    any spoilers.

    How do I post my challenge answer?

  7. #7
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Greetings samvike what you do is post your answer in this thread but wrap the answer in "spoiler tags" so it remains semi-hidden - greyed-out.

    For example resulting in an answer that looks like: HTML5 Sucks!

    [spoiler]Your Answer...[/spoiler]

    Hope that helps a little as to how you hide the answer.

  8. #8
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, xhtmlcoder.

    So here's my attempt (Expert Level):


    << Spoiler alert! >>


    Link to fiddle: http://jsfiddle.net/xjjs8/
    ( I hope linking is ok..? )


    <!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">
    @-webkit-keyframes spinCube {
    100% {
    -webkit-transform: rotateX(-25deg) rotateY(385deg) rotateZ(360deg);
    }
    }
    .dice-outer {
    width: 100px;
    height: 100px;
    margin-top: 50px;
    margin-left: 50%;
    -webkit-perspective: 500px;
    }
    .dice-outer:hover .dice {
    -webkit-animation: spinCube 2.5s;
    }
    .dice {
    width: 100px;
    height: 100px;
    position: relative;
    -webkit-transform: rotateX(-25deg) rotateY(-25deg);
    -webkit-transform: rotateX(-25deg) rotateY(25deg) rotateZ(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50% 50%;
    }
    .side {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    }
    .a {
    background: red;
    -webkit-transform: rotateY(0deg);
    }
    .b {
    background: green;
    left: 50px;
    -webkit-transform: rotateY(90deg) translateX(50px);
    }
    .c {
    background: blue;
    left: 50px;
    -webkit-transform: rotateX(90deg) translate3d(-50px, -50px, 50px);
    }
    .d {
    background: yellow;
    left: 50px;
    -webkit-transform: rotateY(-90deg) translate3d(-50px, 0, 100px);
    }
    .e {
    background: purple;
    left: 50px;
    -webkit-transform: rotateX(-90deg) translate3d(-50px, 50px, 50px);
    }
    .f {
    background: gray;
    left: 50px;
    -webkit-transform: rotateX(180deg) translate3d(-50px, 0px, 100px);
    }
    .side > div {
    position: absolute;
    background: white;
    border-radius: 50%;
    width: 20%;
    height: 20%;
    top: 10%;
    }
    .side > div:nth-child(odd) {
    left: 15%;
    }
    .side > div:nth-child(even) {
    left: 65%;
    }
    .side > div:nth-child(n+3) {
    top: 40%;
    }
    .side > div:nth-child(n+5) {
    top: 70%;
    }
    </style>
    </head>

    <body>
    <div class="dice-outer">
    <div class="dice">
    <div class="side a">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div>
    <div class="side b"></div>
    <div class="side c"></div>
    <div class="side d"></div>
    <div class="side e"></div>
    <div class="side f"></div>
    </div>
    </body>

    </html>



    So, I hope to see you guys' solutions

  9. #9
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,015
    Mentioned
    62 Post(s)
    Tagged
    0 Thread(s)
    Very cool, but couldn't help but go in and place the correct pips on each side.




    <!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">
    @-webkit-keyframes spinCube {
    100% {
    -webkit-transform: rotateX(-25deg) rotateY(385deg) rotateZ(360deg);
    }
    }
    .dice-outer {
    width: 100px;
    height: 100px;
    margin-top: 50px;
    margin-left: 50%;
    -webkit-perspective: 500px;
    }
    .dice-outer:hover .dice {
    -webkit-animation: spinCube 2.5s;
    }
    .dice {
    width: 100px;
    height: 100px;
    position: relative;
    -webkit-transform: rotateX(-25deg) rotateY(-25deg);
    -webkit-transform: rotateX(-25deg) rotateY(25deg) rotateZ(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50% 50%;
    }
    .side {
    background: red;
    width: 100px;
    height: 100px;
    background: red;
    border: 1px solid #900;
    position: absolute;
    }
    .a {
    -webkit-transform: rotateY(0deg);
    }
    .b {
    left: 50px;
    -webkit-transform: rotateY(90deg) translateX(50px);
    }
    .c {
    left: 50px;
    -webkit-transform: rotateX(90deg) translate3d(-50px, -50px, 50px);
    }
    .d {
    left: 50px;
    -webkit-transform: rotateY(-90deg) translate3d(-50px, 0, 100px);
    }
    .e {
    left: 50px;
    -webkit-transform: rotateX(-90deg) translate3d(-50px, 50px, 50px);
    }
    .f {
    left: 50px;
    -webkit-transform: rotateX(180deg) translate3d(-50px, 0px, 100px);
    }
    .side > div {
    position: absolute;
    background: white;
    border-radius: 50%;
    width: 20%;
    height: 20%;
    top: 10%;
    left: 15%;
    }


    .side.a > div:nth-child(even) { left: 65%; }
    .side.a > div:nth-child(n+3) { top: 40%; }
    .side.a > div:nth-child(n+5) { top: 70%; }

    .side.b > div:nth-child(1) { left: 15%; }
    .side.b > div:nth-child(2) {
    top: 40%;
    left: 40%;
    }
    .side.b > div:nth-child(3) {
    left: 65%;
    top: 70%;
    }


    .side.c > div:nth-child(2) { left: 65%; }
    .side.c > div:nth-child(3) { top: 70%; }
    .side.c > div:nth-child(4) {
    left: 65%;
    top: 70%;
    }
    .side.c > div:nth-child(5) {
    top: 40%;
    left: 40%;
    }

    .side.d > div:nth-child(even) { left: 65%; }
    .side.d > div:nth-child(3), .side.d > div:nth-child(4) { top: 70%; }

    .side.e > div:nth-child(1) { left: 15%; }
    .side.e > div:nth-child(2) {
    left: 65%;
    top: 70%;
    }

    .side.f > div:nth-child(1) {
    top: 40%;
    left: 40%;
    }


    </style>
    </head>

    <body>
    <div class="dice-outer">
    <div class="dice">
    <div class="side a">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div>
    <div class="side b">
    <div></div>
    <div></div>
    <div></div>
    </div>
    <div class="side c">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div>
    <div class="side d">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div>
    <div class="side e">
    <div></div>
    <div></div>
    </div>
    <div class="side f">
    <div></div>
    </div>
    </div>
    </body>

    </html>

  10. #10
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Beautiful thanks Michael

  11. #11
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    Shropshire
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basic Die:


    <!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">
    .die-wrapper{
    width: 240px;
    height: 240px;
    margin: 160px auto;
    position: relative;
    background: red;
    -webkit-box-shadow: 14px 14px 20px #000000;
    box-shadow: 14px 14px 20px #000000;
    }
    .left-top-spot, .left-middle-spot, .left-bottom-spot, .right-top-spot, .right-middle-spot, .right-bottom-spot {
    background: white;
    height: 48px;
    width: 48px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    position: absolute;
    }
    .left-top-spot, .left-middle-spot, .left-bottom-spot {
    left: 30px;
    }
    .right-top-spot, .right-middle-spot, .right-bottom-spot {
    left: 160px;
    }
    .left-top-spot, .right-top-spot {
    top: 33px;
    }
    .left-middle-spot, .right-middle-spot {
    top: 96px;
    }
    .left-bottom-spot, .right-bottom-spot {
    top: 159px;
    }
    </style>
    </head>
    <body>
    <div class="die-wrapper">
    <div class="left-top-spot"></div>
    <div class="left-middle-spot"></div>
    <div class="left-bottom-spot"></div>
    <div class="right-top-spot"></div>
    <div class="right-middle-spot"></div>
    <div class="right-bottom-spot"></div>
    </div>
    </body>
    </html>

  12. #12
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very basic, with no additional markup:


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

    /*//parent div*/
    div {
    border:3px solid #ccc;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    margin-top: 200px;
    position: relative;
    border-radius: 5px;
    background-color: red;
    box-shadow: 5px 5px 5px #000;
    }

    /*//children dots*/
    div div {
    width: 30px;
    height: 30px;
    margin-top: 80px;
    margin-left: 50px;
    float: left;
    border-radius: 30px;
    background-color: white;
    box-shadow: none;
    }

    </style>
    </head>
    <body>
    <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div>
    </body>
    </html>

  13. #13
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I went straight into 3D transforms and my head popped, so went back to basics and here it is
    <!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 2D - YuriKolovsky</title>
    <style type="text/css">
    body {
    margin:50px 100px;
    }
    body > div {
    width:192px;
    height:192px;
    background:red;
    box-shadow:15px 15px 15px #000;
    padding:24px;
    }
    div div {
    float:left;
    margin:8px 24px;
    height:48px;
    width:48px;
    border-radius:24px;
    background:#fff;
    }
    </style>
    </head>
    <body>
    <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div>
    </body>
    </html>

  14. #14
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Go for the 'Expert Level Challenge' now Tim.

  15. #15
    Galactic Overlord gold trophysilver trophybronze trophy
    HAWK's Avatar
    Join Date
    Aug 2003
    Location
    New Zealand
    Posts
    12,499
    Mentioned
    943 Post(s)
    Tagged
    14 Thread(s)
    I thought I'd jump into this thread with something that might be of interest.

    In the same way that we offer sample chapters of our books, we also offer sample lessons on our courses.
    Here is a sample lesson from Practical CSS with Russ Weakley.
    It's a course based around interesting CSS tips and tricks, and you can chat with Russ using our Learnable Social application.

  16. #16
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not really pretty, but it gets the point across. This was lots of fun!!!! This was my first attempt at css animations.


    <!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">
    body{
    counter-reset:section;
    }
    #myDice {background-color:red;}
    #myDice div { position: absolute; width: 220px; height: 220px; border: 1px solid #000; text-align:center; font-size: 40px; }
    #myDice div:before{counter-increment:section;
    }
    #myDice .div1 { -webkit-transform: translateZ(110px); -moz-transform:rotateY(0deg) rotateZ(0deg) translateZ(110px);
    background:

    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);


    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);

    background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%);



    background: radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 41%,transparent 50%),
    radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 40%,transparent 41%,transparent 50%);
    background-position: 100px 100px;

    background-size: 20px 20px;

    background-repeat: no-repeat;
    background-color:red;

    }
    #myDice .div2 { -webkit-transform: rotateY(90deg) translateZ(110px); -moz-transform: rotateY(90deg) translateZ(110px);
    background:

    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);


    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);

    background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%);



    background: radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 41%,transparent 50%);

    background-position: 10px 30px,
    170px 170px;


    background-size: 20px 20px,
    20px 20px;

    background-repeat: no-repeat;
    background-color:red;
    }


    #myDice .div3 { -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(110px); -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(110px);
    background:
    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);


    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);

    background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%);



    background: radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 41%,transparent 50%);

    background-position: 10px 30px,
    100px 100px,
    170px 170px;


    background-size: 20px 20px,
    20px 20px,
    20px 20px;

    background-repeat: no-repeat;


    background-color:red;


    }
    #myDice .div4 { -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(110px); -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(110px);
    background:
    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);


    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);

    background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%);



    background: radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 41%,transparent 50%);

    background-position: 10px 30px,
    10px 170px,

    170px 30px,
    170px 170px;


    background-size: 20px 20px,
    20px 20px,
    20px 20px,
    20px 20px;

    background-repeat: no-repeat;




    background-color:red; }
    #myDice .div5 { -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(110px); -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(110px);
    background:
    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);


    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);

    background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%);



    background: radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
    radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 41%,transparent 50%);

    background-position: 10px 30px,
    10px 170px,
    100px 100px,
    170px 30px,
    170px 170px;


    background-size: 20px 20px,
    20px 20px,
    20px 20px,
    20px 20px,
    20px 20px;

    background-repeat: no-repeat;






    background-color:red; }
    #myDice .div6 { -webkit-transform: rotateX(-90deg) translateZ(110px); -moz-transform: rotateX(-90deg) translateZ(110px);
    background:

    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);

    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
    -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);

    background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
    -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
    -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
    -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
    -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
    -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%);


    background: radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
    radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 41%,transparent 100%),
    radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
    radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 40%,transparent 41%,transparent 100%);
    background-position: 10px 30px,
    10px 100px,
    10px 170px,
    150px 30px,
    150px 100px,
    150px 170px;
    background-size: 20px 20px,
    20px 20px,
    20px 20px,
    20px 20px,
    20px 20px,
    20px 20px;
    background-repeat: no-repeat;
    background-color:red;

    }
    #myDice .div1 { -webkit-transform: translateZ(110px); -moz-transform:translateZ(110px); }
    @-webkit-keyframes rollMe { from,to
    {
    }
    15% { -webkit-transform: rotateY(-90deg); }
    30% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
    45% { -webkit-transform: rotateY(180deg) rotateZ(90deg); }
    65% { -webkit-transform: rotateY(90deg) rotateX(90deg); }
    80% { -webkit-transform: rotateX(90deg); }
    }
    @-moz-keyframes rollMe { from,to
    {
    }

    15% { -moz-transform: rotateY(-90deg);}
    30% { -moz-transform: rotateY(-90deg) rotateZ(90deg); }
    45% { -moz-transform: rotateY(-180deg) rotateZ(90deg); }
    65% { -moz-transform: rotateY(90deg) rotateX(90deg); }
    80% { -moz-transform: rotateX(90deg); }
    }

    #myDice:hover {
    -webkit-animation-name: rollMe;
    -moz-animation-name: rollMe;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 6s;
    -moz-animation-duration: 6s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-origin: 110px 110px 0;
    -moz-transform-origin: 110px 110px 0; }
    </style>

    </head> <body>

    <div id="myDice" >
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>
    </div>

    </body>
    </html>


  17. #17
    SitePoint Enthusiast
    Join Date
    Feb 2004
    Location
    The Netherlands
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's my intermediate version as a jsbin:
    http://jsbin.com/uhevan/2/


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    <style>
    .die {
    width: 180px;
    height: 180px;
    background: #f00;
    padding: 20px;
    position: relative;
    }

    .spot {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    }

    .side-2 {
    background:#c00;
    height: 70px;
    -webkit-transform: skew(-45deg) translate(55px);
    }

    .side-4 {
    background: #a00;
    width:71px;
    display:inline-block;
    -webkit-transform: skewy(-45deg) translatex(-5px) translatey(-60px);
    box-shadow: 8px 10px 10px #555;
    }

    .side-6 {
    display:inline-block;
    box-shadow: 10px 5px 10px #555;
    }

    .side-2 .spot {
    height: 30px;
    }

    .side-2 .spot-2 {
    bottom: 20px;
    right: 20px;
    }

    .side-4 .spot {
    width: 30px;
    height: 50px;

    }

    .side-6 .spot-2,
    .side-6 .spot-4,
    .side-6 .spot-6,
    .side-4 .spot-2,
    .side-4 .spot-4 {
    right: 20px;
    }

    .side-6 .spot-3,
    .side-6 .spot-4 {
    top: 50%;
    margin-top: -25px;
    }

    .side-6 .spot-5,
    .side-6 .spot-6,
    .side-4 .spot-3,
    .side-4 .spot-4{
    bottom: 20px;
    }


    </style>
    </head>
    <body>
    <div class="die side-2">
    <div class="spot spot-1"></div>
    <div class="spot spot-2"></div>
    </div>
    <div class="die side-6">
    <div class="spot spot-1"></div>
    <div class="spot spot-2"></div>
    <div class="spot spot-3"></div>
    <div class="spot spot-4"></div>
    <div class="spot spot-5"></div>
    <div class="spot spot-6"></div>
    </div>
    <div class="die side-4">
    <div class="spot spot-1"></div>
    <div class="spot spot-2"></div>
    <div class="spot spot-3"></div>
    <div class="spot spot-4"></div>

    </div>
    </body>
    </html>


    Not sure if I've gotten the pips in the correct position.

  18. #18
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hah, will do, my head is already dizzy with all the messed up logic around perspectives.

  19. #19
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I cleaned up the code a little bit, and added some more details.
    I am finding a bug in my code for FF. The die always starts on .div4. I'm not sure why.
    I'd appreciate some feedback.


    <!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">
    body {
    counter-reset:section;
    }
    #myDice {
    padding:10px;
    }
    #myDice div {
    position: absolute;
    width: 220px;
    height: 220px;
    border: 1px solid #000;
    text-align:center;
    font-size: 40px;
    -moz-box-shadow: 5px 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px 5px#888;
    box-shadow: 5px 5px 5px 5px #888;
    }
    #myDice div:before {
    counter-increment:section;
    }
    #myDice .div1 {
    -webkit-transform: translateZ(110px);
    -moz-transform:rotateY(0deg) rotateZ(0deg) translateZ(110px);
    background:

    /*-moz-radial-gradient(center center, circle, rgba(255, 255, 255, 1) 60%,transparent 41%,transparent 50%);*/
    -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    background: -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    background: radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    background-position: 100px 100px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-color:red;
    }
    #myDice .div2 {
    -webkit-transform: rotateY(90deg) translateZ(110px);
    -moz-transform: rotateY(90deg) translateZ(110px);
    background:
    -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    background: -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    background: radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    background-position: 20px 30px, 170px 170px;
    background-size: 20px 20px, 20px 20px;
    background-repeat: no-repeat;
    background-color:red;
    }
    #myDice .div3 {
    -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(110px);
    -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(110px);
    background:
    -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    background: -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    background: radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    background-position: 20px 30px, 100px 100px, 170px 170px;
    background-size: 20px 20px, 20px 20px, 20px 20px;
    background-repeat: no-repeat;
    background-color:red;
    }
    #myDice .div4 {
    -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(110px);
    -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(110px);
    background:
    -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    background: -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    background: radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    background-position: 20px 30px, 20px 170px, 170px 30px, 170px 170px;
    background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px;
    background-repeat: no-repeat;
    background-color:red;
    }
    #myDice .div5 {
    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(110px);
    -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(110px);
    background:
    -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    background: -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    background: radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    background-position: 20px 30px, 20px 170px, 100px 100px, 170px 30px, 170px 170px;
    background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px;
    background-repeat: no-repeat;
    background-color:red;
    }
    #myDice .div6 {
    -webkit-transform: rotateX(-90deg) translateZ(110px);
    -moz-transform: rotateX(-90deg) translateZ(110px);
    background:
    -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
    background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%, transparent 41%, transparent 100%), -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%, transparent 41%, transparent 100%), -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%, transparent 41%, transparent 100%), -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%, transparent 41%, transparent 100%), -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%, transparent 41%, transparent 100%), -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%, transparent 41%, transparent 100%);
    background: radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%, transparent 41%, transparent 100%), radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%, transparent 41%, transparent 100%), radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%, transparent 41%, transparent 100%), radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%, transparent 41%, transparent 100%);
    background-position: 20px 30px, 20px 100px, 20px 170px, 170px 30px, 170px 100px, 170px 170px;
    background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px;
    background-repeat: no-repeat;
    background-color:red;
    }
    #myDice .div1 {
    -webkit-transform: translateZ(110px);
    -moz-transform:translateZ(110px);
    }
    @-webkit-keyframes rollMe {
    from, to {
    -webkit-transform: rotateY(0deg) rotateZ(90deg) translateZ(110px);
    }
    15% {
    -webkit-transform: rotateY(-90deg);
    }
    30% {
    -webkit-transform: rotateY(-90deg) rotateZ(90deg);
    }
    45% {
    -webkit-transform: rotateY(180deg) rotateZ(90deg);
    }
    65% {
    -webkit-transform: rotateY(90deg) rotateX(90deg);
    }
    80% {
    -webkit-transform: rotateX(90deg);
    }
    }
    @-moz-keyframes rollMe {
    from, to {
    -moz-transform: rotateY(0deg) rotateZ(90deg) translateZ(110px);
    }

    15% {
    -moz-transform: rotateY(-90deg);
    }
    30% {
    -moz-transform: rotateY(-90deg) rotateZ(90deg);
    }
    45% {
    -moz-transform: rotateY(-180deg) rotateZ(90deg);
    }
    65% {
    -moz-transform: rotateY(90deg) rotateX(90deg);
    }
    80% {
    -moz-transform: rotateX(90deg);
    }
    }
    #myDice:hover {
    -webkit-animation-name: rollMe;
    -moz-animation-name: rollMe;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 6s;
    -moz-animation-duration: 6s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-origin: 110px 110px 0;
    -moz-transform-origin: 110px 110px 0;
    }
    </style>
    </head>
    <body>
    <div id="myDice" >
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>
    </div>
    </body>
    </html>


  20. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    This is my entry into the Beginner's challenge. The code is not exciting... it can be done with fewer selectors. BUT, it does one thing quite well (which was my objective)... one can resize or reshape the box (the die) and the dots will remain in their relative positions. In fact, box dimensions, circle dimensions, and circle margins are the only adjustments likely to be utilized. No math is required beyond division by 2.
    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">
    body > div {
        background-color:#f00;
        box-shadow:25px 25px 15px 0 #000;
        width:420px;             /* width  of box */
        height:420px;            /* height of box */
        position:relative;
        border-radius:25px;      /* corners of box; optional */
        margin:40px auto;        /* centers box on page; optional */
    }
    div div {
        position:absolute;
        width:90px;              /* diameter of circle */
        height:90px;             /* diameter of circle */
        border-radius:50%;
        background-color:#fff;
        margin:50px;             /* distance from edge of box */
    }
    div:nth-child(1),div:nth-child(2),div:nth-child(3) {left:0;}
    div:nth-child(4),div:nth-child(5),div:nth-child(6) {right:0;}
    div:nth-child(3),div:nth-child(6) {bottom:0}
    div:nth-child(2),div:nth-child(4) {top:50%; margin-top:-45px;}    /* margin-top = -1/2 diameter of circle */
        </style>
    </head>
    <body>
    
    <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    
    </body>
    </html>
    
    
    

  21. #21
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,015
    Mentioned
    62 Post(s)
    Tagged
    0 Thread(s)
    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.

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

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

    This creates the dots of the die face.

    Code css:
    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).

    Code css:
    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. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Good work Michael

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

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

    It just uses this simple html:

    Code:
    <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
    Last edited by Paul O'B; Feb 13, 2013 at 12:47.

  23. #23
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For my solution, I tried to complete the expert variant without modifying the original HTML: http://jsfiddle.net/HFD3j/

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by kevinthompson View Post
    For my solution, I tried to complete the expert variant without modifying the original HTML: http://jsfiddle.net/HFD3j/
    Good example ( but note the two opposite numbers on a die should add up to 7 )

  25. #25
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,015
    Mentioned
    62 Post(s)
    Tagged
    0 Thread(s)
    <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>


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
  •