SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  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 2 - Checkerboard.

    A while ago I wrote a thread where I was teaching someone CSS. Well, they changed their mind I think, so the lessons I thought up have nowhere to go. So I'll post them up as challenges. Today's is relatively straightforward - get this checkerboard (webkit engine rendering)...

    testRender2.png

    From this HTML

    Code html:
    <!DOCTYPE html>
    <html>
       <body>
    	<div>
    		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    	</div>
    </body>
    </html>

    Now the tricky part. The point of the exercise is to get comfortable with the direct child operator in CSS ">", and the nth-child psuedo element. My answer will be posted Friday. I created the render above with only 6 statements.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Nice quiz! Do you want people to post solutions?

  3. #3
    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)
    Sure, using spoiler tags

    [spoiler]Like this[/spoiler]

    Yielding this..

    Like this

    Come to think of it, I guess I can post my solution as well that way rather than wait on Friday.


    body { padding: 5em; }

    body>div {
    width: 40em;
    height: 40em;
    margin: 0 auto;
    border: .5em solid #fc0;
    }

    body>div>div {height: 5em;}

    div>div>div { height: 5em; width: 5em; display: inline-block;}
    div>div:nth-child(odd)>div:nth-child(odd), div>div:nth-child(even)>div:nth-child(even) {background: #f00 }
    div>div:nth-child(odd)>div:nth-child(even), div>div:nth-child(even)>div:nth-child(odd) {background: #000 }

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Cool, here's mine:


    body > div {border: 5px solid orange; width: 800px; margin: 0 auto;}
    div > div {overflow: hidden;}
    div div div {float: left; width: 100px; height: 100px; background: red;}
    div > div:nth-child(2n-1) div:nth-child(2n), div > div:nth-child(2n) div:nth-child(2n+1) {background: black;}


    Seems to work fine in Chrome, FF, Opera, Safari. I'm not bothering with IE, though it should be OK in 9+. (You solution is neater, though, but basically the same.)

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    I'll "see" Ralph's 4 lines:
    (beat these dimensions, Baby!)

    body > div {display:table;border:9px solid gold;background:#000;margin:0 auto;}
    body > div > div {clear:left;}
    div div div {width:80px;height:80px;float:left;}
    div div:nth-child(2n+1) div:nth-child(2n+1),div div:nth-child(2n) div:nth-child(2n) {background:#f00;}


    Firefox and Chrome. IE8 is a bust. Didn't try IE9.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Here's my attempt:


    div{width:55px;height:55px;float:left}
    body>div {border:5px solid #fc0;width:440px; height:440px;background:#f00}
    body>div div:nth-child(odd) div:nth-child(even),body > div div:nth-child(even) div:nth-child(odd) {background:#000}


    Or without using any divs at all


    body:after {
    content:" ";
    display:block;
    background-color:#f00;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%);
    background-size:100px 100px;
    background-position: 0 0, 50px 50px;
    width:400px;
    height:400px;
    border:5px solid #fc0;
    }


    Firefox only

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Or without using any divs at all
    Ha ha, very nice, Paul. I can't quite get my head around all the bits and pieces of gradients yet. Tempted to wait until there's a definitive syntax.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Ha ha, very nice, Paul. I can't quite get my head around all the bits and pieces of gradients yet. Tempted to wait until there's a definitive syntax.
    No, I find it too awkward also. I just copy and paste the bits I need or use the gradient generators.

  9. #9
    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)
    Ha.. well, Can you put checkers on the board without any HTML?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Michael Morris View Post
    Ha.. well, Can you put checkers on the board without any HTML?
    Yes sure can


    <!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>Untitled Document</title>
    <style type="text/css">
    body:after {
    content:" ";
    display:block;
    background-color:#f00;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%);
    background-size:100px 100px;
    background-position: 0 0, 50px 50px;
    width:400px;
    height:400px;
    border:5px solid #fc0;
    }
    body:before{
    content:"C h e q u e r s ";
    display:block;
    position:absolute;
    left:30px;
    top:10px;
    font-size:40px;
    font-family:monospace;
    color:#fff;
    }

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

  11. #11
    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)
    LOL.

    Wise guy eh?



    What about 12 red filled in circles and 12 black filled in circles each with white borders, positioned in their standard starting position for the game of chequers?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Michael Morris View Post

    What about 12 red filled in circles and 12 black filled in circles each with white borders, positioned in their standard starting position for the game of chequers?
    Now you're being silly


    <!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>Untitled Document</title>
    <style type="text/css">
    html { background:#000 }
    body {
    background-color:#f00;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%);
    background-size:100px 100px;
    background-position: 0 0, 50px 50px;
    width:400px;
    height:400px;
    border:5px solid #fc0;
    }
    body:before {
    background-color: transparent;
    background-image: radial-gradient(blue 35%, transparent 16%), radial-gradient(blue 35%, transparent 16%);
    background-position: -16px -15px, 30px 35px;
    background-size: 102px 102px;
    content: " ";
    height: 163px;
    left: 0;
    position: absolute;
    top: 250px;
    width: 412px;
    z-index: 2;
    clip: rect(10px, 412px, 163px, 10px);
    }
    body:after {
    background-color: transparent;
    background-image: radial-gradient(white 35%, transparent 16%), radial-gradient(white 35%, transparent 16%);
    background-position: -16px -15px, 30px 35px;
    background-size: 102px 102px;
    clip: rect(10px, 462px, 163px, 60px);
    content: " ";
    height: 163px;
    left: -48px;
    position: absolute;
    top: 0;
    width: 462px;
    z-index: 2;
    }
    </style>
    </head>
    <body>
    </body>
    </html>


    Not sure I can get closer than that without some html

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Off Topic:

    We regret to inform that we found ralph.m dead at his computer today. His brain appeared to be fried. Before him on the screen was some strange code and an image of a chequer board. Investigations continue ...

  14. #14
    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)
    Very impressive Paul.

  15. #15
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Not sure I can get closer than that without some html
    I'll buy you a vowel... er... a <div>

  16. #16
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Paul, I thought of the same solution using linear gradients, you beat me to it

    Lea Verou's slides helped me understand the gradient syntax so I didn't need to copy and paste the solutions every time.
    http://lea.verou.me/css3-gradients/

    They only really benefit you when you understand them, I find them really useful for creating things like rulers, lines on a notepad - Things like that.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by markbrown4 View Post

    Lea Verou's slides helped me understand the gradient syntax so I didn't need to copy and paste the solutions every time.
    http://lea.verou.me/css3-gradients/
    Thanks for the link Mark it should prove useful.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    We regret to inform that we found ralph.m dead at his computer today. His brain appeared to be fried. Before him on the screen was some strange code and an image of a chequer board. Investigations continue ...
    lol - you love it really

  19. #19
    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)
    Ok, it's Friday, so here's a look at my original solution outside of spoiler tags.
    Code css:
    body { padding: 5em; }
     
    body>div {
      width: 40em; 
      height: 40em; 
      margin: 0 auto;
      border: .5em solid #fc0;
    }
     
    body>div>div {height: 5em;}
     
    div>div>div { height: 5em; width: 5em; display: inline-block;}
    div>div:nth-child(odd)>div:nth-child(odd), div>div:nth-child(even)>div:nth-child(even) {background: #f00 }
    div>div:nth-child(odd)>div:nth-child(even), div>div:nth-child(even)>div:nth-child(odd) {background: #000 }

    Monday's challenge will be the first in a series dealing with element positioning.

  20. #20
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright and now how would you make this checkerboard to be responsive ?
    On mobile devices the width can be bigger than the height or the contrary depending portrait or landscape mode, this has to be taken in consideration.

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ritzton View Post
    Alright and now how would you make this checkerboard to be responsive ?
    On mobile devices the width can be bigger than the height or the contrary depending portrait or landscape mode, this has to be taken in consideration.
    In truth you would most likely use media queries and adjust the size when needed so it fits in the viewport.

    You could adapt Michaels solution above to scale with the window quite easily though.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    html,body{height:100%;margin:0;padding:0;}
    body>div {
      width: 60%; 
      height:0;
    		padding-top:60%; 
      margin: 0 auto;
      border: .5em solid #fc0;
    		-moz-box-sizing:border-box;
    		-webkit-box-sizing:border-box;
    		box-sizing:border-box;
    		position:relative;
    }
    body>div>div{position:absolute;top:0;left:0;right:0;bottom:0} 
    body>div>div>div {height:12.5% }
     
    div>div>div>div { height:100%; width:12.5%; display: inline-block;}
    div>div>div:nth-child(odd)>div:nth-child(odd), div>div>div:nth-child(even)>div:nth-child(even) {background: #f00 }
    div>div>div:nth-child(odd)>div:nth-child(even), div>div>div:nth-child(even)>div:nth-child(odd) {background: #000 }
    
    </style>
    </head>
    
    <body>
    <div><div>
    		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    	</div></div>
    </body>
    </html>


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
  •