Rob's Wiki
Search…
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:selectorseems 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
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8" />
5
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
<title>Diagonal Background</title>
7
<meta name="viewport" content="width=device-width, initial-scale=1" />
8
<style>
9
#elem-container {
10
height: 100%;
11
}
12
#elem {
13
position: relative;
14
}
15
#elem:before {
16
content: ""; /* an empty div */
17
height: 120%; /* with a height settable against parent container */
18
width: 135%; /* wider than the page so you can't see the edges */
19
position: absolute; /* outside of the document flow */
20
z-index: -1; /* and behind the #elem */
21
display: block;
22
background-color: lightblue; /* and behind the #elem */
23
transform: rotate(12deg);
24
left: -15%; /* with offsets as required */
25
top: -15%;
26
}
27
</style>
28
</head>
29
<body>
30
<div id="elem-container">
31
<div id="elem">
32
<p>
33
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
34
salutandi vel. Sit an meis adhuc.
35
</p>
36
<p>
37
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
38
salutandi vel. Sit an meis adhuc.
39
</p>
40
<p>
41
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
42
salutandi vel. Sit an meis adhuc.
43
</p>
44
<p>
45
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
46
salutandi vel. Sit an meis adhuc.
47
</p>
48
</div>
49
</div>
50
</body>
51
</html>
Copied!
Diagonal background with before and after
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8" />
5
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
<title>Page title</title>
7
<meta name="viewport" content="width=device-width, initial-scale=1" />
8
<style>
9
#elem-container {
10
height: 100%;
11
}
12
#elem {
13
position: relative;
14
}
15
#elem:before {
16
content: ""; /* an empty div */
17
height: 100%; /* with a height settable against parent container */
18
width: 135%; /* wider than the page so you can't see the edges */
19
position: absolute; /* outside of the document flow */
20
z-index: -1; /* and behind the #elem */
21
display: block;
22
background-color: lightblue; /* and behind the #elem */
23
transform: rotate(12deg);
24
left: -15%; /* with offsets as required */
25
top: -35%;
26
}
27
#elem:after {
28
content: "";
29
height: 120%;
30
width: 135%;
31
position: absolute;
32
z-index: -2;
33
display: block;
34
background-color: darkblue;
35
transform: rotate(-12deg);
36
left: -15%;
37
top: -5%;
38
}
39
</style>
40
</head>
41
<body>
42
<div id="elem-container">
43
<div id="elem">
44
<p>
45
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
46
salutandi vel. Sit an meis adhuc.
47
</p>
48
<p>
49
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
50
salutandi vel. Sit an meis adhuc.
51
</p>
52
<p>
53
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
54
salutandi vel. Sit an meis adhuc.
55
</p>
56
<p>
57
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
58
salutandi vel. Sit an meis adhuc.
59
</p>
60
<p>
61
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
62
salutandi vel. Sit an meis adhuc.
63
</p>
64
<p>
65
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
66
salutandi vel. Sit an meis adhuc.
67
</p>
68
<p>
69
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
70
salutandi vel. Sit an meis adhuc.
71
</p>
72
<p>
73
Lorem ipsum dolor sit amet, at per iudicabit periculis, an officiis
74
salutandi vel. Sit an meis adhuc.
75
</p>
76
</div>
77
</div>
78
</body>
79
</html>
Copied!
Last modified 3yr ago