LESS TALK, MORE CODE: CSS

Sunday

animated square stroke - css

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">

  <path fill="white" stroke="black" stroke-width="4"  class="path" d="M 10 10 H 90 V 90 H 10 L 10 10"/>

  <!-- Points -->
  <circle cx="10" cy="10" r="2" fill="red"/>
  <circle cx="90" cy="90" r="2" fill="red"/>
  <circle cx="90" cy="10" r="2" fill="red"/>
  <circle cx="10" cy="90" r="2" fill="red"/>
</svg>

.path {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: dash 8s linear  infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 320;
  }

  to {
    stroke-dashoffset: 0;
  }
}

Screenshot:

Wednesday

CSS table row coloring >> tr:nth-child get 2nd, 3rd, 6th and 7th children at once?

<html>

<head>

<style>

caption {

text-align: center;

}

tr:nth-child(4n+1):not(:first-child), tr:nth-child(4n) {

background: #EAEAEA;

}

tr:nth-child(4n-1), tr:nth-child(4n-2) {

background: #E7F2FC;

}

</style>

</head>

<caption><b><br>HEADER</b></caption>

<tr>

<td height="21"><b>column 1</b></td>

<td height="21"><b>column 2</b></td>

<td height="21"><b>column 3</b></td>

<td height="21"><b>column 4</b></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>