HTML & CSS

Daniel Weschke

November 14, 2019

1 Rotate image

/*
 * rotate image by 90deg
 * shift = (width-height)/2
 * margin: -<shift> 0 -<shift> <shift>;
 */
.rotateimg90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
/*
 * rotate image by 180deg
 * no shift necessary
 */
.rotateimg180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
/*
 * rotate image by 270deg
 * shift = (width-height)/2
 * margin: -<shift> 0 -<shift> <shift>;
 */
.rotateimg270 {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

<img src="http://www.example.com/logo.jpg" class="rotateimg90">

A correction with margin-top, margin-left and margin-bottom might be necessarry, e. g. for 90deg and 270 deg: (width-height)/2.

2 Draw over an image with SVG

<figure style="width:100%;">
  <svg xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 4928 3264">
    <image width="4928" height="3264" xlink:href="./johann-siemens-EPy0gBJzzZU-unsplash.jpg" />
    <rect x="142" y="36" rx="40" ry="40" width="249" height="888"
      style="fill:transparent;stroke:orange;stroke-width:10;opacity:1" />
    <rect x="426" y="426" rx="40" ry="40" width="675" height="782"
      style="fill:transparent;stroke:red;stroke-width:10;opacity:1" />
    <rect x="1137" y="675" rx="40" ry="40" width="355" height="533"
      style="fill:transparent;stroke:green;stroke-width:10;opacity:1" />
  </svg>
</figure>

Photo by Johann Siemens on Unsplash

3 Text font-size inside div according its size

<div style="display: flex;">
  <div class="fitin" style="background-color: #773322; width: 120px; height: 120px; padding: 5px; margin: 5px; font-size: 3em;">
    <div>This is a long text</div>
  </div>
  <div class="fitin" style="background-color: #773322; width: 120px; height: 120px; padding: 5px; margin: 5px; font-size: 3em;">
   <div>This is a long text to test</div>
  </div>
  <div class="fitin" style="background-color: #773322; width: 120px; height: 120px; padding: 5px; margin: 5px; font-size: 3em;">
   <div>This is a long text to test font sizing</div>
  </div>
  <div class="fitin" style="background-color: #773322; width: 120px; height: 120px; padding: 5px; margin: 5px; font-size: 3em;">
   <div>This is</div>
  </div>
</div>
<script type="text/javascript">
  function fitin() {
    var fitindiv = document.querySelectorAll(".fitin");
    var i;
    for (i = 0; i < fitindiv.length; i++) {
      // inner div needed to see if inner div is larger in height to reduce the font-size
      fitindivdiv = fitindiv[i].firstElementChild;
      while( fitindivdiv.clientHeight > fitindiv[i].clientHeight ) {
        fitindivdiv.style.fontSize = (parseInt(window.getComputedStyle(fitindivdiv).fontSize) - 1) + "px";
      }
    }
  };
  fitin();
</script>

This is a long text

This is a long text to test

This is a long text to test font sizing

This is