CSS

box-sizing
It's useful to be aware of box-sizing which governs how borders are included in div size calculations.
Pseudo elements
​Pseudo elements are worth remembering, they let you style an element based on some property of that element (e.g. ::first-line), or add elements to the DOM in a suitable position (e.g. ::before, ::after).
Proper syntax is ::selector, however :selector seems to be more universally supported
Tachyons
​Tachyons is an excellent 'functional CSS' library in which each class name has one responsibility. For example the Tachyons class .ba stands for border-style:solid;border-width:1px, there would not be a Tachyons class called e.g. .button-active as that would encompass many different - design specific - CSS functions.
Tachyons Media Queries
Tachyons classes have suffixes:
[no-suffix] = applies for all screensizes, and hence is the 'mobile' version
-ns = not-small (min-width: 30em)
-m = medium (min-width: 30em) and (max-width: 60em)
-l = large (min-width: 60em)
Diagonal block colour background
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Diagonal Background</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      #elem-container {
        height: 100%;
      }
      #elem {
        position: relative;
      }
      #elem:before {
        content: ""; /* an empty div */
        height: 120%; /* with a height settable against parent container */
        width: 135%; /* wider than the page so you can't see the edges */
        position: absolute; /* outside of the document flow */
        z-index: -1; /* and behind the #elem */
        display: block;
        background-color: lightblue; /* and behind the #elem */
        transform: rotate(12deg);
        left: -15%; /* with offsets as required */
        top: -15%;
      }
    </style>
  </head>
  <body>
    <div id="elem-container">
      <div id="elem">
        <p>
          Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
          salutandi vel. Sit an meis adhuc.
        </p>
        <p>
          Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
          salutandi vel. Sit an meis adhuc.
        </p>
        <p>
          Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
          salutandi vel. Sit an meis adhuc.
        </p>
        <p>
          Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
          salutandi vel. Sit an meis adhuc.
        </p>
      </div>
    </div>
  </body>
</html>
Diagonal background with before and after
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      #elem-container {
        height: 100%;
      }
      #elem {
        position: relative;
      }
      #elem:before {
        content: ""; /* an empty div */
        height: 100%; /* with a height settable against parent container */
        width: 135%; /* wider than the page so you can't see the edges */
        position: absolute; /* outside of the document flow */
        z-index: -1; /* and behind the #elem */
        display: block;
        background-color: lightblue; /* and behind the #elem */
        transform: rotate(12deg);
        left: -15%; /* with offsets as required */
        top: -35%;
      }
      #elem:after {
        content: "";
        height: 120%;
        width: 135%;
        position: absolute;
        z-index: -2;
        display: block;
        background-color: darkblue;
        transform: rotate(-12deg);
        left: -15%;
        top: -5%;
      }
    </style>
  </head>
  <body>
    <div id="elem-container">
      <div id="elem">
        <p>
          Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
          salutandi vel. Sit an meis adhuc.
        </p>
        <p>
          Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
          salutandi vel. Sit an meis adhuc.
        </p>
        <p>
          Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
          salutandi vel. Sit an meis adhuc.
        </p>
        <p>
          Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
          salutandi vel. Sit an meis adhuc.
        </p>
        <p>
          Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
          salutandi vel. Sit an meis adhuc.
        </p>
        <p>
          Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
          salutandi vel. Sit an meis adhuc.
        </p>
        <p>
          Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
          salutandi vel. Sit an meis adhuc.
        </p>
        <p>
          Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
          salutandi vel. Sit an meis adhuc.
        </p>
      </div>
    </div>
  </body>
</html>
Vue
Mac
Last updated 3 years ago