CSS
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:selectorseems 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 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>
<!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>
Last modified 4yr ago