It's useful to be aware of box-sizing which governs how borders are included in div
size calculations.
​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 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 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)
<!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 officiissalutandi vel. Sit an meis adhuc.</p><p>Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiissalutandi vel. Sit an meis adhuc.</p><p>Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiissalutandi vel. Sit an meis adhuc.</p><p>Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiissalutandi vel. Sit an meis adhuc.</p></div></div></body></html>
<!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 officiissalutandi vel. Sit an meis adhuc.</p><p>Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiissalutandi vel. Sit an meis adhuc.</p><p>Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiissalutandi vel. Sit an meis adhuc.</p><p>Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiissalutandi vel. Sit an meis adhuc.</p><p>Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiissalutandi vel. Sit an meis adhuc.</p><p>Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiissalutandi vel. Sit an meis adhuc.</p><p>Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiissalutandi vel. Sit an meis adhuc.</p><p>Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiissalutandi vel. Sit an meis adhuc.</p></div></div></body></html>