HTML/CSS Chain Challenge

John_Betong · March 6, 2017, 12:59pm

@PaulOB
That is really good and far better than your previous version.

I have tried numerous techniques and the nearest I could get is “JB-SVG-002” which uses flex and calls a PHP function to draw a SVG image.

Ronpat’s Snakes - includes @PaulOB’s versions complete with source code…

file snippet: JB SVG-002


  <div class="clb w88 mg2 fgc">
    <h3 class="ooo"> SVG image: "_svg-snakes-function.php -> svgSingle($i2);" (1.5KB) </h3>
    <?php 
      echo '<div class="flex-grid">';
        for($i2=1; $i2<=12; $i2++):
          $svgSingle = svgSingle($i2);
          echo '<div class="col">' 
                  .$svgSingle
                .'</div>';
        endfor;
      echo '</div>';
    ?>
  </div>

I have very little knowledge of flex and struggling to be able to find the break points to be able to join the snake.

Once the break points are found, It should be a simple task to pass the break point to the PHP function and to draw the joining left, right or bottom circles.

Also stuck on how to decide when the SVG circles should be drawn from right to left instead of left to right.

ronpat · March 11, 2017, 7:06pm

Finally, my contribution to the chain challenge. Uses floats to change the direction of the numbers. No flex.
Tested in Chrome and Firefox.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>The Chain 4</title>
<!--
https://www.sitepoint.com/community/t/html-css-chain-challenge/255704/2
-->
    <style type="text/css">
body {
    background-color:#6a6;
    padding:0;
    margin:2em 0 0;
}
ul {
    list-style:none;
    display:table;
    width:auto;  /* 12+ */
    word-spacing:-.5em;
    padding-left:0;
    margin:0 auto;
}
li {
    display:inline-block;
    vertical-align:top;
    width:12em;
    height:12em;
    border-radius:50%;
    position:relative;
    word-spacing:0;
}
li::after {
    content:"";
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:1;
    width:4em;
    height:4em;
    background-color:#aaa;
    border:1em solid transparent;
    border-radius:50%;
    margin:auto;
}
b {
    display:block;
    font-size:4em;
    text-align:center;
    margin:.85em 0;
}

/* colors */
.one {background-color:#bdf}
.one::after {background-color:#7cd;border-color:#bdf;}
.two {background-color:#7cd;}
.two::after {background-color:#ffa;border-color:#7cd;}
.three {background-color:#ffa;}
.three:after {background-color:#f86;border-color:#ffa;}
.four {background-color:#f86;}
.four::after {background-color:#e69;border-color:#f86;}
.five {background-color:#e69;}
.five::after {background-color:#dae;border-color:#e69;}
.six {background-color:#dae;}
.six::after {background-color:#fda;border-color:#dae;}
.seven {background-color:#fda;}
.seven::after {background-color:#cfd;border-color:#fda;}
.eight {background-color:#cfd;}
.eight::after {background-color:#cba;border-color:#cfd;}
.nine {background-color:#cba;}
.nine::after {background-color:#fac;border-color:#cba;}
.ten {background-color:#fac;}
.ten::after {background-color:#ae8;border-color:#fac;}
.eleven {background-color:#ae8;}
.eleven::after {background-color:#aaa;border-color:#ae8;}
.twelve {background-color:#aaa;}
.twelve::after {display:none;}

li:nth-child(n)::after {transform:translate(100%,0);}         /* right */
.twelve ~ li {float:right}

/* media queries */
@media screen and (max-width:148em) {
    ul {width:132em}  /* 11 */
    li:nth-child(11)::after {transform:translate(0,100%);}    /* down */
    .eleven ~ li {float:right}
}
@media screen and (max-width:136em) {
    ul {width:120em}  /* 10 */
    li:nth-child(11)::after {transform:translate(-100%,0);}   /* left */
    li:nth-child(10)::after {transform:translate(0,100%);}    /* down */
    .ten ~ li {float:right}
}
@media screen and (max-width:124em) {
    ul {width:108em}  /* 9 */
    li:nth-child(10)::after {transform:translate(-100%,0);}   /* left */
    li:nth-child(9)::after {transform:translate(0,100%);}     /* down */
    .nine ~ li {float:right}
}
@media screen and (max-width:112em) {
    ul {width:96em}  /* 8 */
    li:nth-child(9)::after {transform:translate(-100%,0);}    /* left */
    li:nth-child(8)::after {transform:translate(0,100%);}     /* down */
    .eight ~ li {float:right}
}
@media screen and (max-width:100em) {
    ul {width:84em}  /* 7 */
    li:nth-child(8)::after {transform:translate(-100%,0);}    /* left */
    li:nth-child(7)::after {transform:translate(0,100%);}     /* down */
    .seven ~ li {float:right}
}
@media screen and (max-width:88em) {
    ul {width:72em}  /* 6 */
    li:nth-child(7)::after {transform:translate(-100%,0);}    /* left */
    li:nth-child(6)::after {transform:translate(0,100%);}     /* down */
    .six ~ li {float:right}
}
@media screen and (max-width:76em) {
    ul {width:60em}  /* 5 */
    li:nth-child(6)::after {transform:translate(-100%,0);}    /* left */
    li:nth-child(5n)::after {transform:translate(0,100%);}    /* down */
    li:nth-child(n+11)::after {transform:translate(100%,0);}  /* right */
    .five ~ li {float:right}
    .ten ~ li {float:none}
}
@media screen and (max-width:64em) {
    ul {width:48em}  /* 4 */
    li:nth-child(5)::after {transform:translate(-100%,0);}    /* left */
    li:nth-child(4n)::after {transform:translate(0,100%);}    /* down */
    li:nth-child(n+9)::after {transform:translate(100%,0);}   /* right */
    .four ~ li {float:right}
    .eight ~ li {float:none}
}
@media screen and (max-width:52em) {
    ul {width:36em}  /* 3 */
    li:nth-child(3n)::after {transform:translate(0,100%);}    /* down */
    li:nth-child(6n+1)::after {transform:translate(100%,0);}  /* right */
    li:nth-child(6n+2)::after {transform:translate(100%,0);}  /* right */
    li:nth-child(6n+4)::after {transform:translate(-100%,0);} /* left */
    li:nth-child(6n+5)::after {transform:translate(-100%,0);} /* left */
    .three ~ li {float:right}
    .six ~ li {float:none}
    .nine ~ li {float:right}
}
@media screen and (max-width:40em) {
    ul {width:24em}  /* 2 */
    li:nth-child(2n)::after {transform:translate(0,100%);}    /* down */
    li:nth-child(4n+1)::after {transform:translate(100%,0);}  /* right */
    li:nth-child(4n+3)::after {transform:translate(-100%,0);} /* left */
    .two ~ li {float:right}
    .four ~ li {float:none}
    .six ~ li {float:right}
    .eight ~ li {float:none}
    .ten ~ li {float:right}
}
@media screen and (max-width:28em) {
    ul {width:12em}  /* 1 */
    li:nth-child(n)::after {transform:translate(0,100%);}     /* down */
}
    </style>
</head>
<body>

<ul>
    <li class="one"><b>1</b></li>
    <li class="two"><b>2</b></li>
    <li class="three"><b>3</b></li>
    <li class="four"><b>4</b></li>
    <li class="five"><b>5</b></li>
    <li class="six"><b>6</b></li>
    <li class="seven"><b>7</b></li>
    <li class="eight"><b>8</b></li>
    <li class="nine"><b>9</b></li>
    <li class="ten"><b>10</b></li>
    <li class="eleven"><b>11</b></li>
    <li class="twelve"><b>12</b></li>
</ul>

</body>
</html>

PaulOB · March 11, 2017, 8:48pm

Yes that’s similar to my float version apart from the transform to change the link.

I also had a version using transforms but it meant I couldn’t use my auto numbering without adding extra html code as in your version.

In another attempt I started a version using display:contents so that you could create fluid table rows but it was using too much code so abandoned it as the floated one was neater.

ronpat · March 11, 2017, 8:53pm

My original scheme was the one that I posted. I did implement a version using the counter, though.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>The Chain 4 (counter)</title>
<!--
https://www.sitepoint.com/community/t/html-css-chain-challenge/255704/2
-->
    <style type="text/css">
body {
    background-color:#6a6;
    padding:0;
    margin:2em 0 0;
}
ul {
    list-style:none;
    display:table;
    width:auto;  /* 12+ */
    counter-reset:chain;
    word-spacing:-.5em;
    padding-left:0;
    margin:0 auto;
}
li {
    display:inline-block;
    vertical-align:top;
    width:12em;
    height:12em;
    border-radius:50%;
    position:relative;
    word-spacing:0;
}
li::before,
li::after {
    content:"";
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:1;
}
li::before {
    counter-increment:chain;
    content:counter(chain);
    font-weight:bold;
    font-size:4em;
    line-height:2.75;
    text-align:center;
}
li::after {
    width:4em;
    height:4em;
    background-color:#aaa;
    border:1em solid transparent;
    border-radius:50%;
    margin:auto;
}

/* colors */
.one {background-color:#bdf}
.one::after {background-color:#7cd;border-color:#bdf;}
.two {background-color:#7cd;}
.two::after {background-color:#ffa;border-color:#7cd;}
.three {background-color:#ffa;}
.three:after {background-color:#f86;border-color:#ffa;}
.four {background-color:#f86;}
.four::after {background-color:#e69;border-color:#f86;}
.five {background-color:#e69;}
.five::after {background-color:#dae;border-color:#e69;}
.six {background-color:#dae;}
.six::after {background-color:#fda;border-color:#dae;}
.seven {background-color:#fda;}
.seven::after {background-color:#cfd;border-color:#fda;}
.eight {background-color:#cfd;}
.eight::after {background-color:#cba;border-color:#cfd;}
.nine {background-color:#cba;}
.nine::after {background-color:#fac;border-color:#cba;}
.ten {background-color:#fac;}
.ten::after {background-color:#ae8;border-color:#fac;}
.eleven {background-color:#ae8;}
.eleven::after {background-color:#aaa;border-color:#ae8;}
.twelve {background-color:#aaa;}
.twelve::after {display:none;}

li:nth-child(n)::after {transform:translate(100%,0);}         /* right */
.twelve ~ li {float:right}

/* media queries */
@media screen and (max-width:148em) {
    ul {width:132em}  /* 11 */
    li:nth-child(11)::after {transform:translate(0,100%);}    /* down */
    .eleven ~ li {float:right}
}
@media screen and (max-width:136em) {
    ul {width:120em}  /* 10 */
    li:nth-child(11)::after {transform:translate(-100%,0);}   /* left */
    li:nth-child(10)::after {transform:translate(0,100%);}    /* down */
    .ten ~ li {float:right}
}
@media screen and (max-width:124em) {
    ul {width:108em}  /* 9 */
    li:nth-child(10)::after {transform:translate(-100%,0);}   /* left */
    li:nth-child(9)::after {transform:translate(0,100%);}     /* down */
    .nine ~ li {float:right}
}
@media screen and (max-width:112em) {
    ul {width:96em}  /* 8 */
    li:nth-child(9)::after {transform:translate(-100%,0);}    /* left */
    li:nth-child(8)::after {transform:translate(0,100%);}     /* down */
    .eight ~ li {float:right}
}
@media screen and (max-width:100em) {
    ul {width:84em}  /* 7 */
    li:nth-child(8)::after {transform:translate(-100%,0);}    /* left */
    li:nth-child(7)::after {transform:translate(0,100%);}     /* down */
    .seven ~ li {float:right}
}
@media screen and (max-width:88em) {
    ul {width:72em}  /* 6 */
    li:nth-child(7)::after {transform:translate(-100%,0);}    /* left */
    li:nth-child(6)::after {transform:translate(0,100%);}     /* down */
    .six ~ li {float:right}
}
@media screen and (max-width:76em) {
    ul {width:60em}  /* 5 */
    li:nth-child(6)::after {transform:translate(-100%,0);}    /* left */
    li:nth-child(5n)::after {transform:translate(0,100%);}    /* down */
    li:nth-child(n+11)::after {transform:translate(100%,0);}  /* right */
    .five ~ li {float:right}
    .ten ~ li {float:none}
}
@media screen and (max-width:64em) {
    ul {width:48em}  /* 4 */
    li:nth-child(5)::after {transform:translate(-100%,0);}    /* left */
    li:nth-child(4n)::after {transform:translate(0,100%);}    /* down */
    li:nth-child(n+9)::after {transform:translate(100%,0);}   /* right */
    .four ~ li {float:right}
    .eight ~ li {float:none}
}
@media screen and (max-width:52em) {
    ul {width:36em}  /* 3 */
    li:nth-child(3n)::after {transform:translate(0,100%);}    /* down */
    li:nth-child(6n+1)::after {transform:translate(100%,0);}  /* right */
    li:nth-child(6n+2)::after {transform:translate(100%,0);}  /* right */
    li:nth-child(6n+4)::after {transform:translate(-100%,0);} /* left */
    li:nth-child(6n+5)::after {transform:translate(-100%,0);} /* left */
    .three ~ li {float:right}
    .six ~ li {float:none}
    .nine ~ li {float:right}
}
@media screen and (max-width:40em) {
    ul {width:24em}  /* 2 */
    li:nth-child(2n)::after {transform:translate(0,100%);}    /* down */
    li:nth-child(4n+1)::after {transform:translate(100%,0);}  /* right */
    li:nth-child(4n+3)::after {transform:translate(-100%,0);} /* left */
    .two ~ li {float:right}
    .four ~ li {float:none}
    .six ~ li {float:right}
    .eight ~ li {float:none}
    .ten ~ li {float:right}
}
@media screen and (max-width:28em) {
    ul {width:12em}  /* 1 */
    li:nth-child(n)::after {transform:translate(0,100%);}     /* down */
}
    </style>
</head>
<body>

<ul>
    <li class="one"></li>
    <li class="two"></li>
    <li class="three"></li>
    <li class="four"></li>
    <li class="five"></li>
    <li class="six"></li>
    <li class="seven"></li>
    <li class="eight"></li>
    <li class="nine"></li>
    <li class="ten"></li>
    <li class="eleven"></li>
    <li class="twelve"></li>
</ul>

</body>
</html>

ronpat · March 14, 2017, 8:04pm

This has been an interesting “just for fun” challenge that once again demonstrates that there are often several ways to accomplish a given task using HTML and CSS.

A tip of the hat to PaulOB for posting a flexbox solution almost as soon as the challenge was posted and then the first float solution a short time later.

If anyone would like to demonstrate another method of linking and flowing the chain, you are welcome to do so.

Cheers

PS: I hear that long time SitePoint member @Erik_J has a potentially useful text alignment challenge coming up very soon that I don’t think you’ll want to miss.

PaulOB · March 14, 2017, 9:13pm

It’s already posted so get coding

Erik_J · March 14, 2017, 9:49pm

Yes do, can barely wait, I’m probably the most exited in the forum to learn what you’ll come up with. I’ll try hard not to slip and spoil anything. (Yet)

Added the “quip” example to the thread.

system · June 14, 2017, 5:03am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.