Advanced CSS3 Techniques

Learning Points
Shadows
Gradients
Transforms
Transitions
Animations
Media Queries
nth-child Selectors
iOS 6 Style Popover (because iOS 7 is too easy)

Learning Points:


Shadows
Gradients
Transforms
Step 1 - The Frame
Step 1.1 - Frame Background
.popover {
  position: absolute;
  width: 334px;
  background: #030b19;
  border-radius: 11px;
}
Step 1.2 - Top Gradient
.popover {
  position: absolute;
  width: 334px;
  background: #030b19;
  border-radius: 11px;

  border: 1px solid #000;
  box-sizing: border-box;
  background-image: linear-gradient(
    top,
    #6b707c 0,
    #1d283b 24px,
    #030b19 24px
  );
}
Step 1.3 - Shadows




.popover {
  position: absolute;
  width: 334px;
  border-radius: 11px;
  border: 1px solid #000;
  box-sizing: border-box;
  background-image: linear-gradient(
    top,
    #6b707c 0,
    #1d283b 24px,
    #030b19 24px
  );

  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 10px 25px rgba(0, 0, 0, 0.5)
  ;
}
Step 2 - Content
Step 2.1 - Header and Body
.popover {
  ...
  padding: 6px;
}
.popover-header {
  position: relative;
  height: 34px;
  margin-bottom: 8px;
  overflow: hidden;
  line-height: 34px;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.popover-body {
  /* So content can be positioned absolutely
  within this container */
  position: relative;
  padding: 0 14px;
  background: #f8f8f8;
  border-radius: 7px;
}
Step 2.2 - Inner Shadow
.popover-content {
  ...
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.4);
}

Or use the ::after pseudo element of the .popover for a shadow that will not be covered by any content or shifted by scrollbars.

.popover:after {
  position: absolute;
  /* prevent this element from capturing pointer
  (mouse and touch) events */
  pointer-events: none;
  content: '';
  top: 48px;
  bottom: 6px;
  right: 6px;
  left: 6px;
  border-radius: 7px;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.4);
}
Step 3 - Caret
Step 3.1 - Position and Orientation
.popover {
  ...
  /* So the top of the caret's point 
  lines up with the top of the popover */
  margin-top: 16px;
}
.popover-caret {
  /* absolute will put it on top of the header */
  position: absolute;
  /* You can set left to the location you 
  want the tip of the caret to point, 50% 
  being the middle */
  left: 50%;
  top: -13px;
  height: 24px;
  width: 24px;
  background: red;
  transform: translateX(-14px) rotate(45deg);
}
Step 3.2 - Top Border
.popover-caret {
  ...
  border: 1px solid #000;
  border-bottom-color: transparent;
  border-right-color: transparent;
}
Step 3.3 - Gradient
.popover-caret {
  ...
  background: red;
  background-image: linear-gradient(
    top left,
    #a5a6ad 0,
    #535a69 24px,
    rgba(77, 84, 99, 0) 26px
  );
}
Step 3.4 - Gradient Clipping


That pesky little border we saw is the gradient repeating and showing up under the transparent borders

To get rid of it you can add:

.popover-caret {
  ...
  background-repeat: no-repeat;
}

or

.popover-caret {
  ...
  background-clip: content-box;
}
Step 3.5 - Shadow
.popover-caret {
  ...
  box-shadow: inset 1px 1px 0 0
              rgba(255, 255, 255, 0.2);
}
http://codepen.io/nemophrost/pen/wfxDl
<div class="popover">
  <div class="popover-caret"></div>
  <div class="popover-header">...</div>
  <div class="popover-body">
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor sit ... amet.</p>
  </div>
</div>
.popover {
  position: absolute;
  width: 334px;
  margin-top: 16px;
  padding: 6px;
  border: 1px solid #000;
  border-radius: 11px;
  box-sizing: border-box;
  background-image: -webkit-linear-gradient(top, #6b707c 0, #1d283b 24px, #030b19 24px);
  background-image: -moz-linear-gradient(top, #6b707c 0, #1d283b 24px, #030b19 24px);
  background-image: -o-linear-gradient(top, #6b707c 0, #1d283b 24px, #030b19 24px);
  background-image: linear-gradient(top, #6b707c 0, #1d283b 24px, #030b19 24px);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 25px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 25px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 25px rgba(0, 0, 0, 0.5);
  font-family: Helvetica, Arial, sans-serif;
}
.popover-caret {
  position: absolute;
  content: '';
  left: 50%;
  top: -13px;
  height: 24px;
  width: 24px;
  border: 1px solid #000;
  border-bottom-color: transparent;
  border-right-color: transparent;
  background-image: -webkit-linear-gradient(top left, #a5a6ad 0, #535a69 24px, rgba(77, 84, 99, 0) 26px);
  background-image: -moz-linear-gradient(top left, #a5a6ad 0, #535a69 24px, rgba(77, 84, 99, 0) 26px);
  background-image: -o-linear-gradient(top left, #a5a6ad 0, #535a69 24px, rgba(77, 84, 99, 0) 26px);
  background-image: linear-gradient(top left, #a5a6ad 0, #535a69 24px, rgba(77, 84, 99, 0) 26px);
  background-repeat: no-repeat;
  -webkit-box-shadow: inset 1px 1px rgba(255, 255, 255, 0.2);
  -moz-box-shadow: inset 1px 1px rgba(255, 255, 255, 0.2);
  box-shadow: inset 1px 1px rgba(255, 255, 255, 0.2);
  -webkit-transform: translateX(-14px) rotate(45deg);
  -moz-transform: translateX(-14px) rotate(45deg);
  -ms-transform: translateX(-14px) rotate(45deg);
  -o-transform: translateX(-14px) rotate(45deg);
  transform: translateX(-14px) rotate(45deg);
}
.popover:after {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 48px;
  bottom: 6px;
  right: 6px;
  left: 6px;
  border-radius: 7px;
  -webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.4);
}
.popover-header {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  height: 34px;
  font-size: 20px;
  font-weight: bold;
  line-height: 34px;
  margin-bottom: 8px;
}
.popover-body {
  position: relative;
  overflow: hidden;
  background: #f8f8f8;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 7px;
}
Animated Progress Bar


Learning Points:


Gradient Patterns
Transitions
Animations
Step 1 - The Outer Bar



.progress {
  overflow: hidden;
  height: 20px;
  border-radius: 10px;
  background-image: linear-gradient(to bottom, #ccc 0%, #ddd 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
Step 2 - The Inner Bar



.progress-bar {
  width: 0%;
  height: 100%;
  float: left;
  box-sizing: border-box;
  background-color: #79b;
  border-radius: 10px 0 0 10px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
Step 3.1 - The Stripes

  background-color: #79b;
  background-size: 40px 40px;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 30%, // Color A
    rgba(0, 0, 0, 0.1) 30%, // Color B
    rgba(0, 0, 0, 0.1) 34%, // Color B
    transparent 34%, // Color C
    transparent 46%, // Color C
    rgba(0, 0, 0, 0.1) 46%, // Color B
    rgba(0, 0, 0, 0.1) 50%, // Color B
    rgba(255, 255, 255, 0.2) 50%, // Color A
    rgba(255, 255, 255, 0.2) 80%, // Color A
    rgba(0, 0, 0, 0.1) 80%, // Color B
    rgba(0, 0, 0, 0.1) 84%, // Color B
    transparent 84%, // Color C
    transparent 96%, // Color C
    rgba(0, 0, 0, 0.1) 96%, // Color B
    rgba(0, 0, 0, 0.1) // Color B
  );
}
Step 3.2 - The Stripes



.progress-bar {
  ...
  background-size: 40px 40px;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 30%,
    rgba(0, 0, 0, 0.1) 30%,
    rgba(0, 0, 0, 0.1) 34%,
    transparent 34%,
    transparent 46%,
    rgba(0, 0, 0, 0.1) 46%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 80%,
    rgba(0, 0, 0, 0.1) 80%,
    rgba(0, 0, 0, 0.1) 84%,
    transparent 84%,
    transparent 96%,
    rgba(0, 0, 0, 0.1) 96%,
    rgba(0, 0, 0, 0.1)
  );
}
Step 4 - Transitions
.progress-bar {
  ...
  transition: width 200ms ease;
}
Step 5 - Animations
@keyframes progress-bar-animate {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
.progress-bar {
  ...
  animation: progress-bar-animate 2s linear infinite;
}
http://codepen.io/nemophrost/pen/rpucd



<div class="progress">
  <div class="progress-bar" style="width: 60%;"></div>
</div>
@-webkit-keyframes progress-bar-animate {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes progress-bar-animate {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
.progress {
  overflow: hidden;
  height: 20px;
  border-radius: 10px;
  background-image: -webkit-linear-gradient(top, #cccccc 0%, #dddddd 100%);
  background-image: linear-gradient(to bottom, #cccccc 0%, #dddddd 100%);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar {
  width: 0%;
  height: 100%;
  float: left;
  box-sizing: border-box;
  background-color: #79b;
  background-size: 40px 40px;
  border-radius: 10px 0 0 10px;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 30%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.1) 33%, transparent 33%, transparent 46%, rgba(0, 0, 0, 0.1) 46%, rgba(0, 0, 0, 0.1) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 80%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0.1) 83%, transparent 83%, transparent 97%, rgba(0, 0, 0, 0.1) 97%, rgba(0, 0, 0, 0.1));
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 30%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.1) 34%, transparent 34%, transparent 46%, rgba(0, 0, 0, 0.1) 46%, rgba(0, 0, 0, 0.1) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 80%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0.1) 84%, transparent 84%, transparent 96%, rgba(0, 0, 0, 0.1) 96%, rgba(0, 0, 0, 0.1));
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: width 200ms ease;
  -moz-transition: width 200ms ease;
  -o-transition: width 200ms ease;
  transition: width 200ms ease;
  -webkit-animation: progress-bar-animate 1s linear infinite;
  animation: progress-bar-animate 1s linear infinite;
}
Periodic Table
1
H
hydrogen
1.008
2
He
helium
4.0026
3
Li
lithium
6.94
4
Be
beryllium
9.0122
5
B
boron
10.81
6
C
carbon
12.011
7
N
nidivogen
14.007
8
O
oxygen
15.999
9
F
fluorine
18.998
10
Ne
neon
20.180
11
Na
sodium
22.990
12
Mg
magnesium
24.305
13
Al
aluminum
26.982
14
Si
silicon
28.085
15
P
phosphorus
30.974
16
S
sulfur
32.06
17
Cl
chlorine
35.45
18
Ar
argon
39.948
19
K
potassium
39.098
20
Ca
calcium
40.078
21
Sc
scandium
44.956
22
Ti
titanium
47.867
23
V
vanadium
50.942
24
Cr
chromium
51.996
25
Mn
manganese
54.938
26
Fe
iron
55.845
27
Co
cobalt
58.933
28
Ni
nickel
58.693
29
Cu
copper
63.546
30
Zn
zinc
65.38
31
Ga
gallium
69.723
32
Ge
germanium
72.63
33
As
arsenic
74.922
34
Se
selenium
78.96
35
Br
bromine
79.904
36
Kr
krypton
83.798
37
Rb
rubidium
85.468
38
Sr
sdivontium
87.62
39
Y
ytdivium
88.906
40
Zr
zirconium
91.224
41
Nb
niobium
92.906
42
Mo
molybdenum
95.96
43
Tc
technetium
[97.91]
44
Ru
ruthenium
101.07
45
Rh
rhodium
102.91
46
Pd
palladium
106.42
47
Ag
silver
107.87
48
Cd
cadmium
112.41
49
In
indium
114.82
50
Sn
tin
118.71
51
Sb
antimony
121.76
52
Te
tellurium
127.60
53
I
iodine
126.90
54
Xe
xenon
131.29
55
Cs
cesium
132.91
56
Ba
barium
137.33
72
Hf
hafnium
178.49
73
Ta
tantalum
180.95
74
W
tungsten
183.84
75
Re
rhenium
186.21
76
Os
osmium
190.23
77
Ir
iridium
192.22
78
Pt
platinum
195.08
79
Au
gold
196.97
80
Hg
mercury
200.59
81
Tl
thallium
204.38
82
Pb
lead
207.2
83
Bi
bismuth
208.98
84
Po
polonium
[208.98]
85
At
astatine
[209.99]
86
Rn
radon
[222.02]
87
Fr
francium
[223.02]
88
Ra
radium
[226.03]
104
Rf
rutherfordium
[265.12]
105
Db
dubnium
[268.13]
106
Sg
seaborgium
[271.13]
107
Bh
bohrium
[270]
108
Hs
hassium
[277.15]
109
Mt
meitnerium
[276.15]
110
Ds
darmstadtium
[281.16]
111
Rg
roentgenium
[280.16]
112
Cn
copernicium
[285.17]
113
Uut
unundivium
[284.18]
114
Fl
flerovium
[289.19]
115
Uup
ununpentium
[288.19]
116
Lv
livermorium
[293]
117
Uus
ununseptium
[294]
118
Uuo
ununoctium
[294]
57
La
lanthanum
138.91
58
Ce
cerium
140.12
59
Pr
praseodymium
140.91
60
Nd
neodymium
144.24
61
Pm
promethium
[144.91]
62
Sm
samarium
150.36
63
Eu
europium
151.96
64
Gd
gadolinium
157.25
65
Tb
terbium
158.93
66
Dy
dysprosium
162.50
67
Ho
holmium
164.93
68
Er
erbium
167.26
69
Tm
thulium
168.93
70
Yb
ytterbium
173.05
71
Lu
lutetium
174.97
89
Ac
actinium
[227.03]
90
Th
thorium
232.04
91
Pa
protactinium
231.04
92
U
uranium
238.03
93
Np
neptunium
[237.05]
94
Pu
plutonium
[244.06]
95
Am
americium
[243.06]
96
Cm
curium
[247.07]
97
Bk
berkelium
[247.07]
98
Cf
californium
[251.08]
99
Es
einsteinium
[252.08]
100
Fm
fermium
[257.10]
101
Md
mendelevium
[258.10]
102
No
nobelium
[259.10]
103
Lr
lawrencium
[262.11]
Learning Points
User Interactions Playing nice with :hover
Media QueriesThe key to responsive design
nth-child SelectorsAlgebra is back
Playing Nice With :hover 1/2

The problem:


Playing Nice With :hover 2/2


<div class="cell">
  <div class="element">
    <div class="at-num">1</div>
    <div class="symbol">H</div>
    <div class="at-details">...</div>
  </div>
</div>
.periodic-row {
  clear: both;
  height: 10%;
}

.cell {
  ...
  float: left;
  width: 5.55%;
  height: 100%;
}

.element {
  ...
  pointer-events: none; /* KEY POINT */
  transition: all 200ms ease;
}

.cell:hover .element { /* KEY POINT */
  ...
  transform: scale(3,3);
  z-index: 1;
}

Note: pointer-events:none; does not work on IE < 11

Media Queries & Responsive Design 1/2
Media Queries & Responsive Design 2/2

Mobile first

.periodic {
  ...
  height: 200px;
}

.element {
  ...
  /* Small space between elements */
  right: 1px;
  bottom: 1px;
}

.at_num,
.at_details {
  ...
  font-size: 4px;
  /* Hide the details when tiny */
  opacity: 0;
}

.symbol {
  ...
  font-size: 9px;
}
@media (min-width: 600px) {
  .periodic {
    height: 460px;
  }
  
  .element {
  	/* Bigger space between elements */
    right: 2px;
    bottom: 2px;
  }
  
  /* Show the details now */
  .at_num, .at_details { opacity: 1; }

  .symbol { font-size: 16px; }
}
@media (min-width: 992px) {
  .periodic {
    height: 680px;
  }
  
  .at_num, .at_details { font-size: 5px; }

  .symbol { font-size: 24px; }
}
:nth-child - Overview1/5



Basic format

.my-class-selector:nth-child(3n-5)

  • Think of nth-child like the algebra problem: a*n + b
  • n starts at 0, then goes to 1, 2, 3, etc.

Examples

n 2n+1 4n+1 4n+4 4n 5n-2 -n+3
0 1 1 4 - - 3
1 3 5 8 4 3 2
2 5 9 12 8 8 1
3 7 13 16 12 13 -
4 9 17 20 16 18 -
5 11 21 24 20 23 -
:nth-child - First and Last2/5

.cell:nth-child(-n+2) .element,
.cell:nth-child(n+13) .element {
  background-color: rgba(0, 160, 96, 0.6);
}
:nth-child - Alkali Metals and Nonmetals3/5

.cell:nth-child(1) .element,
.periodic-row:nth-child(2) .cell:nth-child(n+14) .element,
.periodic-row:nth-child(3) .cell:nth-child(n+15) .element,
.periodic-row:nth-child(4) .cell:nth-child(n+16) .element,
.periodic-row:nth-child(5) .cell:nth-child(n+17) .element {
  background-color: rgba(0, 192, 64, 0.6);
}
:nth-child - Noble Gases4/5

.periodic-row:nth-child(-n+6) .cell:nth-child(18) .element {
  background-color: rgba(64, 192, 0, 0.6);
}
:nth-child - Lanthanides and Actinides5/5

.periodic-row:nth-child(n+9) .element {
  background-color: rgba(0, 96, 160, 0.6);
}
http://codepen.io/nemophrost/pen/EkImb
1
H
hydrogen
1.008
2
He
helium
4.0026
3
Li
lithium
6.94
4
Be
beryllium
9.0122
5
B
boron
10.81
6
C
carbon
12.011
7
N
nidivogen
14.007
8
O
oxygen
15.999
9
F
fluorine
18.998
10
Ne
neon
20.180
11
Na
sodium
22.990
12
Mg
magnesium
24.305
13
Al
aluminum
26.982
14
Si
silicon
28.085
15
P
phosphorus
30.974
16
S
sulfur
32.06
17
Cl
chlorine
35.45
18
Ar
argon
39.948
19
K
potassium
39.098
20
Ca
calcium
40.078
21
Sc
scandium
44.956
22
Ti
titanium
47.867
23
V
vanadium
50.942
24
Cr
chromium
51.996
25
Mn
manganese
54.938
26
Fe
iron
55.845
27
Co
cobalt
58.933
28
Ni
nickel
58.693
29
Cu
copper
63.546
30
Zn
zinc
65.38
31
Ga
gallium
69.723
32
Ge
germanium
72.63
33
As
arsenic
74.922
34
Se
selenium
78.96
35
Br
bromine
79.904
36
Kr
krypton
83.798
37
Rb
rubidium
85.468
38
Sr
sdivontium
87.62
39
Y
ytdivium
88.906
40
Zr
zirconium
91.224
41
Nb
niobium
92.906
42
Mo
molybdenum
95.96
43
Tc
technetium
[97.91]
44
Ru
ruthenium
101.07
45
Rh
rhodium
102.91
46
Pd
palladium
106.42
47
Ag
silver
107.87
48
Cd
cadmium
112.41
49
In
indium
114.82
50
Sn
tin
118.71
51
Sb
antimony
121.76
52
Te
tellurium
127.60
53
I
iodine
126.90
54
Xe
xenon
131.29
55
Cs
cesium
132.91
56
Ba
barium
137.33
72
Hf
hafnium
178.49
73
Ta
tantalum
180.95
74
W
tungsten
183.84
75
Re
rhenium
186.21
76
Os
osmium
190.23
77
Ir
iridium
192.22
78
Pt
platinum
195.08
79
Au
gold
196.97
80
Hg
mercury
200.59
81
Tl
thallium
204.38
82
Pb
lead
207.2
83
Bi
bismuth
208.98
84
Po
polonium
[208.98]
85
At
astatine
[209.99]
86
Rn
radon
[222.02]
87
Fr
francium
[223.02]
88
Ra
radium
[226.03]
104
Rf
rutherfordium
[265.12]
105
Db
dubnium
[268.13]
106
Sg
seaborgium
[271.13]
107
Bh
bohrium
[270]
108
Hs
hassium
[277.15]
109
Mt
meitnerium
[276.15]
110
Ds
darmstadtium
[281.16]
111
Rg
roentgenium
[280.16]
112
Cn
copernicium
[285.17]
113
Uut
unundivium
[284.18]
114
Fl
flerovium
[289.19]
115
Uup
ununpentium
[288.19]
116
Lv
livermorium
[293]
117
Uus
ununseptium
[294]
118
Uuo
ununoctium
[294]
57
La
lanthanum
138.91
58
Ce
cerium
140.12
59
Pr
praseodymium
140.91
60
Nd
neodymium
144.24
61
Pm
promethium
[144.91]
62
Sm
samarium
150.36
63
Eu
europium
151.96
64
Gd
gadolinium
157.25
65
Tb
terbium
158.93
66
Dy
dysprosium
162.50
67
Ho
holmium
164.93
68
Er
erbium
167.26
69
Tm
thulium
168.93
70
Yb
ytterbium
173.05
71
Lu
lutetium
174.97
89
Ac
actinium
[227.03]
90
Th
thorium
232.04
91
Pa
protactinium
231.04
92
U
uranium
238.03
93
Np
neptunium
[237.05]
94
Pu
plutonium
[244.06]
95
Am
americium
[243.06]
96
Cm
curium
[247.07]
97
Bk
berkelium
[247.07]
98
Cf
californium
[251.08]
99
Es
einsteinium
[252.08]
100
Fm
fermium
[257.10]
101
Md
mendelevium
[258.10]
102
No
nobelium
[259.10]
103
Lr
lawrencium
[262.11]


Questions?





Alma Madsen

  • Senior front-end engineer for i.TV
  • Loves JavaScript & CSS
  • Avid rock climber
almamadsen.com/decks/advanced-css3
alma@i.tv