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>

PreviousVue NextMac

Last updated 7 years ago