1.
The Creative New World of CSS
@rachelandrew UX Immersion: Interactions

2.
Box Alignment level 3
Lining things up with

3.
This is the vertical-
centering module.

4.
.box {
display: flex;
align-items: center;
justify-content: center;
}
<div class="box">
<img alt="balloon" src="square-
balloon.jpg">
</div>
Flexbox
Centre the content of .box.

5.
http://codepen.io/rachelandrew/pen/XKaZWm
Flex
container
height

6.
http://codepen.io/rachelandrew/pen/RavbmN
Flex
container
height
stretch flex-endflex-startcenter

7.
.wrapper {
display: flex;
}
.wrapper li {
min-width: 1%;
flex: 1 0 25%;
}
.wrapper li:nth-child(2) {
align-self: center;
}
.wrapper li:nth-child(3) {
align-self: flex-start;
}
.wrapper li:nth-child(4) {
align-self: flex-end;
}
Flexbox
Aligning items within the flex
container

8.
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

9.
http://flexboxfroggy.com/

10.
https://flexbox.webflow.com/

11.
Box Alignment defines how
these properties work in
other layout methods.

12.
This module contains the features of CSS relating to the
alignment of boxes within their containers in the various CSS
box layout models: block layout, table layout, flex layout, and
grid layout.
CSS BOX ALIGNMENT LEVEL 3
https://drafts.csswg.org/css-align/

13.
CSS Grid Layout
A proper layout system with

14.
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.wrapper li {
min-width: 1%;
}
.wrapper li:nth-child(2) {
align-self: center;
}
.wrapper li:nth-child(3) {
align-self: start;
}
.wrapper li:nth-child(4) {
align-self: end;
}
CSS Grid Layout
Aligning grid items with the Box
Alignment properties.

15.
http://codepen.io/rachelandrew/pen/jqdNoL
Grid
container
height
stretch endstartcenter

16.
“Unlike Flexbox, however, which is single-axis–oriented, Grid
Layout is optimized for 2-dimensional layouts: those in which
alignment of content is desired in both dimensions.”
CSS GRID LAYOUT
https://drafts.csswg.org/css-grid/

17.
.cards {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
CSS Grid Layout
Defining a 3 column grid

18.
http://codepen.io/rachelandrew/pen/qqdGOa

19.
.cards {
display:flex;
flex-wrap: wrap;
}
.card {
flex: 1 1 250px;
margin: 5px;
}
Flexbox
Flexbox can wrap flex items onto
multiple rows.
A new row becomes a new flex
container for the purposes of
distributing space.

20.
https://codepen.io/rachelandrew/pen/Gqvrwz

21.
.cards {
display:grid;
grid-template-columns:
repeat(auto-fill, minmax(200px,1fr));
grid-gap: 10px;
}
CSS Grid Layout
Create as many columns as will fit
into the container with a minimum
width of 200px, and a maximum of
1fr.

22.
https://codepen.io/rachelandrew/pen/Gqvrwz

23.
minmax()

24.
http://codepen.io/rachelandrew/pen/QKwvxJ

25.
.home-hero {
display: grid;
grid-gap: 1px;
grid-auto-rows: minmax(150px,
auto);
}
minmax()
Rows should be a minimum of 150px
and a maximum of auto

26.
CSS Grid auto-placement

27.
<ul class="colors">
<li style="background-
color:#FFFFFF;color:black"
class="white">FFF FFF
</li>
<li style="background-
color:#CCCCCC;color:black">CCC CCC
</li>
<li style="background-
color:#999999;color:black"
class="span3">999 999
</li>
</ul>
Grid auto-placement
I have a list with all ye olde web safe
colours in it.

28.
.colors {
display: grid;
grid-template-columns:
repeat(auto-fill,minmax(80px, 1fr));
grid-gap: 2px;
grid-auto-rows: minmax(80px, auto);
}
Grid auto-placement
I auto-fill columns and rows with
minmax()

29.
http://codepen.io/rachelandrew/pen/LRWPNp/

30.
.white {
grid-column: 1 / -1;
grid-row: 3;
}
.black {
grid-column: 1 / -1;
grid-row: 6;
}
.span2 {
grid-column-end: span 2;
grid-row-end: span 2;
}
.span3 {
grid-column-end: span 3;
grid-row-end: span 3;
}
.tall4 {
grid-row-end: span 4;
}
Grid auto-placement
Adding classes to some elements, by
setting the value of grid-column-end
and grid-row-end to span.

31.
.colors {
display: grid;
grid-template-columns:
repeat(auto-fill,minmax(80px, 1fr));
grid-gap: 2px;
grid-auto-rows: minmax(80px, auto);
grid-auto-flow: dense;
}
Grid auto-placement
grid-auto-flow with a value of dense

32.
The source and display
order disconnect.

33.
https://caniuse.com/#feat=css-grid

34.
http://cssgridgarden.com/

35.
https://www.youtube.com/c/layoutland

36.
https://gridbyexample.com/video/

37.
display: contents
Vanishing boxes with

38.
The element itself does not generate any boxes, but its children
and pseudo-elements still generate boxes as normal. For the
purposes of box generation and layout, the element must be
treated as if it had been replaced with its children and pseudo-
elements in the document tree.
DISPLAY: CONTENTS
https://drafts.csswg.org/css-display/#box-generation

39.
allow indirect children to
become flex or grid items

40.
<div class="wrapper">
<h1></h1>
<p></p>
<blockquote class="inset"></blockquote>
<p></p>
<ul class="images">
<li></li>
<li></li>
</ul>
<p></p>
</div>
display: contents
All elements are direct children of
‘wrapper’ except for the li elements.

41.
.wrapper {
max-width: 700px;
margin: 40px auto;
display: grid;
grid-column-gap: 30px;
grid-template-columns:1fr 1fr;
}
.wrapper h1, .wrapper p {
grid-column: 1 / -1;
}
.inset {
grid-column: 1 ;
font: 1.4em/1.3 'Lora', serif;
padding: 0;
margin: 0;
}
.inset + p {
grid-column: 2;
}
display: contents
A two column grid. The h1, p and
blockquote with a class of inset are
all direct children.

42.
http://codepen.io/rachelandrew/pen/gLborW

43.
.images {
display: contents;
}
display: contents
The ul has a class of images. By
applying display: contents the ul is
removed and the li elements become
direct children.

44.
http://codepen.io/rachelandrew/pen/gLborW

45.
https://caniuse.com/#feat=css-display-contents

46.
CSS Shapes
Getting curvy with

47.
CSS Shapes describe geometric shapes for use in CSS. For Level
1, CSS Shapes can be applied to floats. A circle shape on a float
will cause inline content to wrap around the circle shape
instead of the float’s bounding box.
CSS SHAPES
https://drafts.csswg.org/css-shapes/

48.
.balloon {
float: left;
width: 429px;
}
<div class="box">
<img class="balloon" src="round-
balloon.png" alt="balloon">
<p>...</p>
</div>
CSS Shapes
Shapes are applied to floats.

49.
http://codepen.io/rachelandrew/pen/KrvyQq

50.
.balloon {
float: left;
width: 429px;
shape-outside: circle(50%);
}
<div class="box">
<img class="balloon" src="round-
balloon.png" alt="balloon">
<p>...</p>
</div>
CSS Shapes
A simple shape using the
shape-outside property

51.
http://codepen.io/rachelandrew/pen/KrvyQq

52.
.box::before {
content: "";
display: block;
float: left;
width: 429px;
height: 409px;
shape-outside: circle(50%);
}
CSS Shapes
Floating generated content to create
a shape

53.
http://codepen.io/rachelandrew/pen/mErqxy

54.
.balloon {
float: right;
width: 640px;
height: 427px;
shape-outside: ellipse(33% 50% at
460px);
-webkit-clip-path: ellipse(28% 50% at
460px);
clip-path: ellipse(28% 50% at 460px);
}
CSS Shapes
Using clip-path to cut away part of an
image

55.
http://codepen.io/rachelandrew/pen/vKJmXR

56.
http://caniuse.com/#feat=css-shapes

57.
https://bennettfeely.com/clippy/

58.
Feature Queries
Can I Use this with

59.
The ‘@supports’ rule is a conditional group rule whose
condition tests whether the user agent supports CSS
property:value pairs.
FEATURE QUERIES
https://www.w3.org/TR/css3-conditional/#at-supports

60.
http://caniuse.com/#feat=css-featurequeries

61.
Anything new in CSS you
can use feature queries to
detect support.

62.
@supports (display: grid) {
.has-grid {
/* CSS for grid browsers here */
}
}
Feature Queries
Checking for support of Grid Layout

63.
@supports ((display: grid) and (shape-
outside: circle())) {
.has-grid-shapes {
/* CSS for these excellent browsers
here */
}
}
Feature Queries
Test for more than one thing

64.
Using Feature Queries
▸ Write CSS for browsers without support
▸ Override those properties inside the feature queries
▸ See https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/

65.
.balloon {
border: 1px solid #999;
padding: 2px;
}
@supports ((shape-outside: ellipse()) and
((clip-path: ellipse()) or (-webkit-clip-
path:ellipse()))) {
.balloon {
border: none;
padding: 0;
float: right;
width: 640px;
min-width: 640px;
height: 427px;
shape-outside: ellipse(33% 50% at 460px);
-webkit-clip-path: ellipse(28% 50% at
460px);
clip-path: ellipse(28% 50% at 460px);
}
}
Feature Queries
Write CSS for browsers without
support, override that and add new
CSS inside the feature query.

66.
http://codepen.io/rachelandrew/pen/vKJmXR

67.
http://codepen.io/rachelandrew/pen/vKJmXR

68.
Websites that enhance
themselves as the platform
improves.

69.
Initial Letter
Fancy introductions with

70.
Large, decorative letters have been used to start new sections
of text since before the invention of printing. In fact, their use
predates lowercase letters entirely.
This [initial-letter] property specifies styling for dropped, raised,
and sunken initial letters.
INITIAL LETTER
https://drafts.csswg.org/css-inline/#initial-letter-styling

71.
h1+p::first-letter {
initial-letter: 4 3;
}
Initial Letter
Make the initial letter four lines tall,
one line above the content and 3 into
the content.

72.
http://codepen.io/rachelandrew/full/WobvQq/

73.
http://codepen.io/rachelandrew/full/WobvQq/

74.
Currently Safari 9+ only.

75.
h1+p::first-letter {
font-weight: bold;
initial-letter: 7 ;
background-color: rgb(114,110,151);
padding: 2em .5em;
margin: 0 5px 0 0;
color: #fff;
border-radius: 50% ;
float: left;
shape-outside: margin-box;
}
Initial Letter
Adding additional styling to the
initial letter.

76.
http://codepen.io/rachelandrew/pen/LbEpPX

77.
@supports (initial-letter: 3) or (-
webkit-initial-letter: 3) {
h1+p::first-letter {
font-weight: bold;
initial-letter: 7 ;
background-color: rgb(114,110,151);
padding: 2em .5em;
margin: 0 5px 0 0;
color: #fff;
border-radius: 50% ;
float: left;
shape-outside: margin-box;
}
}
Initial Letter
Using feature queries to test for
support before adding rules that
style the first letter.

78.
http://codepen.io/rachelandrew/pen/LbEpPX

79.
Writing modes
Upside down and back to front with

80.
http://codepen.io/rachelandrew/pen/LbVQNW

81.
.wrapper {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 40px;
}
h1 {
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: right;
grid-column: 1;
align-self: start;
justify-self: start;
}
Writing Modes
Using vertical-rl then flipping the text
with a transform.

82.
http://codepen.io/rachelandrew/pen/LbVQNW

83.
http://caniuse.com/#feat=css-writing-mode

84.
Custom properties
Variables in CSS with

85.
This module introduces a family of custom author-defined
properties known collectively as custom properties, which allow
an author to assign arbitrary values to a property with an
author-chosen name, and the var() function, which allow an
author to then use those values in other properties elsewhere in
the document.
CSS CUSTOM PROPERTIES (CSS VARIABLES)
https://drafts.csswg.org/css-variables/

86.
:root {
--primary: blue;
--secondary: orange;
}
h1 {
color: var(--primary);
}
Custom Properties
Define variables then use them in
CSS

87.
:root {
--primary: blue;
--secondary: orange;
}
@supports (--primary: blue) {
h1 {
color: var(--primary);
}
h2 {
color: var(--secondary);
}
}
Custom Properties
Can be tested for using feature
queries

88.
http://codepen.io/rachelandrew/pen/mErpZA

89.
http://caniuse.com/#feat=css-variables

90.
calc()
Adding things up with

91.
Basic mathematics in CSS

92.
<div class="wrapper">
<div class="box box1">
<p>…</p>
<div>height is defined by the flex
container.</div>
</div>
<div class="box box2">
<div>height is 140px</div>
</div>
<div class="box box3">
<div>height is 14em</div>
</div>
</div>
calc()
Three boxes, each with a div nested
inside.

93.
.box2 {
height: 140px;
}
.box3 {
height: 14em;
transition: height 0.5s ease;
}
.box3:hover {
height: 30em;
}
calc()
Two of the outer boxes have a height,
box1 is the height of the content
inside.
Box3 will grow on hover.

94.
.box > div {
color: #fff;
border-radius: 5px;
position: absolute;
bottom: 20px;
right: 20px;
width: 30%;
height: calc(50% - 20px);
}
calc()
In the CSS for the inner box, we
calculate the height as 50% - 20px.

95.
http://codepen.io/rachelandrew/full/VmYYqM/

96.
http://caniuse.com/#feat=calc

97.
position: sticky
Staying put with

98.
A stickily positioned box is positioned similarly to a relatively
positioned box, but the offset is computed with reference to
the nearest ancestor with a scrolling box, or the viewport if no
ancestor has a scrolling box.
POSITION: STICKY
https://drafts.csswg.org/css-position/#sticky-pos

99.
<dl class="authors">
<dt>A</dt>
<dd>John Allsopp</dd>
<dd>Rachel Andrew</dd>
<dt>B</dt>
<dd>. . .</dd>
</dl>
position: sticky
A dl with dt elements followed by
multiple dd elements.

100.
.authors dt {
position: sticky;
top: 0;
}
position: sticky
Applying position: sticky to the dt

101.
http://codepen.io/rachelandrew/pen/NbPamG

102.
http://caniuse.com/#feat=css-sticky

103.
Scroll snapping
Snap to it with

104.
https://drafts.csswg.org/css-scroll-snap-1/

105.
http://caniuse.com/#feat=css-snappoints

106.
.gallery {
scroll-snap-type: x mandatory;
}
.group {
scroll-snap-align: center none;
}
Scroll Snapping
This currently works in Safari only.

107.
http://codepen.io/rachelandrew/pen/NbPGYg

108.
.gallery {
scroll-snap-type: y mandatory;
}
.group {
scroll-snap-align: none start;
}
Scroll Snapping
On the y axis, again supported only
by Safari.

109.
http://codepen.io/rachelandrew/pen/xRbXqr

110.
Blend Modes & Filters
Beautiful images and text with

111.
.image {
background-color: green;
background-image: url(my-image.jpg);
background-blend-mode: multiply;
}
background-blend-mode
normal, multiply, screen, overlay,
darken, lighten, color-dodge, color-
burn, hard-light, soft-light, difference,
exclusion, hue, saturation, color,
luminosity.

112.
https://codepen.io/rachelandrew/pen/eVRxVW

113.
.image {
background-image:
url(image.jpg),
url(circles-dark.png);
background-blend-mode: multiply;
}
background-blend-mode
Blend more than one image, images
plus a color.

114.
https://codepen.io/rachelandrew/pen/EQXMjp

115.
h1 {
background-color: rgb(0,0,0);
color: #fff;
mix-blend-mode: multiply;
}
mix-blend-mode
Blends an object or text with the
background.

116.
https://codepen.io/rachelandrew/pen/MQEwEK

117.
https://codepen.io/rachelandrew/pen/MQEwEK

118.
.blur img {
filter: blur(2px);
}
.brightness img {
filter: brightness(0.3);
}
.contrast img {
filter: contrast(250%);
}
filter
Add filters to objects with a line of
CSS.

119.
https://codepen.io/rachelandrew/pen/JprGYg

120.
https://caniuse.com/#feat=css-backgroundblendmode

121.
https://caniuse.com/#feat=css-mixblendmode

122.
https://caniuse.com/#feat=css-filters

123.
https://ilyashubin.github.io/FilterBlend/

124.
Animation
Adding delight with

125.
http://animista.net/

126.
http://valhead.com/

127.
CSS Transforms &
Animations have excellent
browser support.

128.
The Web Animations API

129.
https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API

130.
http://rachelnabors.com/

131.
Variable Fonts
Many font styles one font file with

132.
Variable fonts
▸ Part of the OpenType font file specification
▸ Available as .otf or .ttf files
▸ In CSS use the font-variation-settings property
▸ CSS Fonts Level 4 Spec adds additional values to existing font properties

133.
https://caniuse.com/#feat=variable-fonts

134.
https://www.axis-praxis.org

135.
Getting our hands on all
the new shiny

136.
Let browser vendors know
you want these features

137.
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/shapes/?q=shapes

138.
Thank you
https://rachelandrew.co.uk/speaking/event/uxi18