HELLO
MANDY
​MICHAEL
@mandy_kerr
@mandymichael
@mandy_kerr
div {
...
overflow: hidden;
}OVERFLOW: HIDDEN
@mandy_kerr
h1 {
...
overflow: hidden;
text-overflow: ellipsis;
}TEXT-OVERFLOW: ELLIPSIS
@mandy_kerr
TEXT-OVERFLOW: ELLIPSIS
@mandy_kerr
TEXT-OVERFLOW: ELLIPSIS
@mandy_kerr
VERTICAL ALIGNMENT: FLEXBOX - CENTRED
@mandy_kerr
div {
...
display: flex;
align-items: center;
}VERTICAL ALIGNMENT: FLEXBOX - ROW
@mandy_kerr
div {
...
display: flex;
align-items: center;
flex-direction: row;
}Cross Axis
Main Axis
VERTICAL ALIGNMENT: FLEXBOX - COLUMN
@mandy_kerr
div {
display: flex;
justify-items: center;
flex-direction: column;
}Main Axis
Cross Axis
@mandy_kerr
div {
display: flex;
flex-direction: column;
justify-content: space-between;
}VERTICAL ALIGNMENT: FLEXBOX - SPACE BETWEEN
@mandy_kerr
div {
display: flex;
align-items: flex-end;
}VERTICAL ALIGNMENT: FLEXBOX - END
@mandy_kerr
div {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-auto-rows: minmax(150px, auto);
}CSS GRID
@mandy_kerr
CSS GRID
@mandy_kerr
CSS SHAPES
.shape {
width: 100%;
height: 100%;
float: left;
shape-outside: polygon(0 0, 0% 100%, 50% 50%);
}@mandy_kerr
CSS SHAPES
.shape {
width: 100%;
height: 100%;
float: left;
shape-outside: circle(50% at 0 50%);
}
REMOVE CONSTRAINTS
@mandy_kerr
@mandy_kerr
REMOVE CONSTRAINTS
VIEWPORT UNITS
@mandy_kerr
h1 {
...
font-size: 5vw;
}VIEWPORT UNITS
@mandy_kerr
VARIABLE FONTS
@mandy_kerr
h1 {
font-family: "Dunbar";
font-variation-settings: "wght" 178, "xhgt" 353;
}
span {
font-variation-settings: "wght" 50, "xhgt" 574;
}
span + span {
font-variation-settings: "wght" 89.1875, "xhgt" 527.311;
}VARIABLE FONTS
@mandy_kerr
FIRST LETTER
@mandy_kerr
h1::first-letter {
font-size: 150px;
font-family: 'Fata background';
font-weight: normal;
color: yellow;
}TEXT DECORATION: SKIP
@mandy_kerr
h1 {
text-decoration: underline;
text-decoration-skip: ink;
text-decoration-color: rebeccapurple;
}TEXT DECORATION: UNDER & OVER LINES
@mandy_kerr
h1 {
text-decoration: underline;
text-decoration-color: rebeccapurple;
text-decoration-line: overline underline;
}TEXT DECORATION: WAVY & LINE-THROUGH
@mandy_kerr
h1 {
color: royalblue;
text-decoration-color: rebeccapurple;
text-decoration-style: wavy;
text-decoration-line: line-through;
}@mandy_kerr
SHADOWS
@mandy_kerr
SHADOWS
div {
border-color: #f98ca4;
box-shadow:
0px 0px 0px 1px #2f3e9c,
8px 8px 0px 0px #4ad9db;
}
h1 {
color: #4ad9db;
text-shadow:
-1px -1px 0 #2f3e9c,
1px -1px 0 #2f3e9c,
-1px 1px 0 #2f3e9c,
1px 1px 0px #2f3e9c,
1px 0px 0px #f98ca4,
0px 1px 0px #f98ca4,
2px 1px 0px #f98ca4,
1px 2px 0px #f98ca4,
3px 2px 0px #f98ca4,
2px 3px 0px #f98ca4,
4px 3px 0px #f98ca4,
3px 4px 0px #f98ca4,
5px 4px 0px #f98ca4,
3px 5px 0px #2f3e9c,
6px 5px 0px #2f3e9c;
}@mandy_kerr
SHADOWS
@mandy_kerr
div {
box-shadow:
-1px -1px 0 rgba(255, 255, 255, .7),
1px -1px 0 rgba(255, 255, 255, .7),
-1px 1px 0 rgba(255, 255, 255, .7),
1px 1px 0 rgba(255, 255, 255, .7),
-1px 2px 1px #a0a0a0,
-2px 4px 2px #a0a0a0,
-3px 6px 3px rgba(#a0a0a0, 0.6),
-4px 8px 4px rgba(#a0a0a0, 0.5),
-5px 10px 5px rgba(#a0a0a0, 0.4),
-6px 12px 6px rgba(#a0a0a0, 0.3),
-7px 13px 7px rgba(#a0a0a0, 0.2),
-8px 15px 8px rgba(#a0a0a0, 0.2),
-9px 17px 9px rgba(#a0a0a0, 0.2),
-10px 19px 10px rgba(#a0a0a0, 0.2),
-11px 20px 11px rgba(#a0a0a0, 0.1),
-12px 22px 12px rgba(#a0a0a0, 0.1),
-13px 24px 13px rgba(#a0a0a0, 0.1),
-14px 26px 14px rgba(#a0a0a0, 0.1),
-15px 28px 15px rgba(#a0a0a0, 0.1),
-16px 30px 16px rgba(#a0a0a0, 0.1),
-17px 32px 17px rgba(#a0a0a0, 0.1),
-18px 34px 18px rgba(#a0a0a0, 0.1),
-19px 36px 19px rgba(#a0a0a0, 0.1),
-20px 38px 20px rgba(#a0a0a0, 0.1),
-21px 39px 21px rgba(#a0a0a0, 0.1);
}SHADOWS
ANIMATION WARNING
!
@mandy_kerr
ANIMATIONS
@mandy_kerr
ANIMATIONS
@keyframes disco {
0% { background: #ece914; }
20% { background: #f92727; }
40% { background: #3434ff; }
60% { background: #7bf927; }
80% { background: #11d8df; }
100% { background: #e41ed8; }
}
div {
animation-name: disco;
animation-timing: 1000ms;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@mandy_kerr
BLEND MODES
body {
background-color: #ffff24;
background-image: url('image.png');
background-blend-mode: darken;
}
h1 {
color: #bcff00;
mix-blend-mode: color-dodge;
}@mandy_kerr
BLEND MODES
@mandy_kerr
BLEND MODES
ANIMATION WARNING
!
@mandy_kerr
BLEND MODES
@mandy_kerr
@mandy_kerr
sibling selectors
:first-letter
matrix()
pseudo-elements
filters
currentColor
counters
columns
attr()
:nth-child
calc
custom properties
linear-gradient
border-radius
transitions
whitespace
:nth-of-type
background-size
background-position
scale
rotate
translate
skew
@supports
opacity
object-fit
will-change
quotes
rem
pointer-events
fr
hyphens
auto
:first-child
masking
floats
background-image
box-sizing
media queries
stroke
display: contents
:empty
@mandy_kerr
By Stacey Reiman @mspanish
THANK YOU
@mandy_kerr
@mandymichael
CSS is Awesome
By Mandy Michael
