SitePoint Sponsor

User Tag List

Results 1 to 25 of 30

Threaded View

  1. #1
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,011
    Mentioned
    57 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


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
  •