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

Made with Slides.com