Thinking Outside the Box With CSS


bit.ly/git-totb

Brandon Kennedy [UI/UX Developer]

Introduction

What Are We Going To Learn About?

Pseudo Elements

Pseudo Classes

Transitions

Animations

Box-Shadows

Pseudo-Elements

A CSS selectable part of an element.

Pseudo-Elements

Currently Available

  •  ::after (:after) 
  •  ::-ms-fill 
  •  ::-ms-fill-lower 
  •  ::-ms-fill-upper 
  •  ::-ms-thumb 
  •  ::-ms-track 
  •  ::-moz-progress-bar 
  •  ::-moz-range-progress 
  •  ::-moz-range-thumb 
  •  ::-moz-range-track 
  •  ::-webkit-progress-bar 
  •  ::-webkit-progress-value 
  •  ::-webkit-slider-runnable-track 
  •  ::-webkit-slider-thumb 
  •  ::before (:before) 
  •  ::first-letter (:first-letter) 
  •  ::first-line (:first-line) 
  •  ::selection 
  •  ::backdrop 
  •  ::after (:after) 
  •  ::-ms-fill 
  •  ::-ms-fill-lower 
  •  ::-ms-fill-upper 
  •  ::-ms-thumb 
  •  ::-ms-track 
  •  ::-moz-progress-bar 
  •  ::-moz-range-progress 
  •  ::-moz-range-thumb 
  •  ::-moz-range-track 
  •  ::-webkit-progress-bar 
  •  ::-webkit-progress-value 
  •  ::-webkit-slider-runnable-track 
  •  ::-webkit-slider-thumb 
  •  ::before (:before) 
  •  ::first-letter (:first-letter) 
  •  ::first-line (:first-line) 
  •  ::selection 
  •  ::backdrop 
  •  ::after (:after) 
  •  ::-ms-fill 
  •  ::-ms-fill-lower 
  •  ::-ms-fill-upper 
  •  ::-ms-thumb 
  •  ::-ms-track 
  •  ::-moz-progress-bar 
  •  ::-moz-range-progress 
  •  ::-moz-range-thumb 
  •  ::-moz-range-track 
  •  ::-webkit-progress-bar 
  •  ::-webkit-progress-value 
  •  ::-webkit-slider-runnable-track 
  •  ::-webkit-slider-thumb 
  •  ::before (:before) 
  •  ::first-letter (:first-letter) 
  •  ::first-line (:first-line) 
  •  ::selection 
  •  ::backdrop 
  •  ::after (:after) 
  •  ::-ms-fill 
  •  ::-ms-fill-lower 
  •  ::-ms-fill-upper 
  •  ::-ms-thumb 
  •  ::-ms-track 
  •  ::-moz-progress-bar 
  •  ::-moz-range-progress 
  •  ::-moz-range-thumb 
  •  ::-moz-range-track 
  •  ::-webkit-progress-bar 
  •  ::-webkit-progress-value 
  •  ::-webkit-slider-runnable-track 
  •  ::-webkit-slider-thumb 
  •  ::before (:before) 
  •  ::first-letter (:first-letter) 
  •  ::first-line (:first-line) 
  •  ::selection 
  •  ::backdrop 

Pseudo-Elements

:before & :after

[element]

[element]

[element]

[element]

[element]

[element]

Pseudo-Elements

Positioning

element

element

element

element

Pseudo-Elements

Lets Talk About Content

All :before and :after pseudo elements MUST have 'content'.

content: '';
content: '\2605';

content: attr(data-content);
  1. item 1
  2. item 2
  3. item 3
ol {
  counter-reset: my-counter;
  list-style: none;
 
  li:before {
    content: counter(my-counter);
    counter-increment: my-counter;
  }
}

Pseudo-Classes

A CSS selectable state of an element.

:hover

Pseudo-Classes

Some You Probably Know

:active

:first-child

:focus

:hover

:last-child

:nth-child()

Pseudo-Classes

Some You Might Not Know

:checked

:first-of-type

:invalid

:last-of-type

:nth-of-type()

:required

:valid

Pseudo-Classes

All The Classes!!!

:active:any:checked:default:dir():disabled:empty:enabled:first:first-child:first-of-type:fullscreen:focus:hover:indeterminate:in-range:invalid:lang():last-child:last-of-type:left:link:not():nth-child():nth-last-child():nth-last-of-type():nth-of-type():only-child:only-of-type:optional:out-of-range:read-only:read-write:required:right:root:scope:target:valid:visited

The "Checkbox Hack"

Nesting styles after a :checked pseudo class on a checkbox to gain functionality instead of just style

The "Checkbox Hack"

A Basic Example



  

  


// SCSS
#agree {
  &:checked {
    ~ .sign-up-button {
      opacity: 1;
      pointer-events: all;
    }
  }
  
  ~ .sign-up-button {
    opacity: .6;
    pointer-events: none;
  }
}

( https://css-tricks.com/child-and-sibling-selectors/ )

The "Checkbox Hack"

¿Modals con no JS?

A Checkbox Powered Modal

demo

The "Checkbox Hack"

Expand/Collapse & Dropdowns

Lorem ipsum dolor sit amet, in vero wisi consectetuer has. Quas quidam ornatus ad vix.

Lorem ipsum dolor sit amet, in vero wisi consectetuer has. Quas quidam ornatus ad vix.

Lorem ipsum dolor sit amet, in vero wisi consectetuer has. Quas quidam ornatus ad vix.

The "(Insert Input/Psuedo Class Here) Hack"

Same concept.
Different pseudo classes / input types.
Better functionality.

The "(Insert Input/Psuedo Class Here) Hack"

Accordions

checkboxes

Lorem ipsum dolor sit amet, in vero wisi consectetuer has. Quas quidam ornatus ad vix.

Lorem ipsum dolor sit amet, in vero wisi consectetuer has. Quas quidam ornatus ad vix.

Lorem ipsum dolor sit amet, in vero wisi consectetuer has. Quas quidam ornatus ad vix.

radios

Lorem ipsum dolor sit amet, in vero wisi consectetuer has. Quas quidam ornatus ad vix.

Lorem ipsum dolor sit amet, in vero wisi consectetuer has. Quas quidam ornatus ad vix.

Lorem ipsum dolor sit amet, in vero wisi consectetuer has. Quas quidam ornatus ad vix.

The "(Insert Input/Psuedo Class Here) Hack"

Tab Navigation

Lorem ipsum dolor sit amet, no mea accommodare reprehendunt. Erat civibus insolens vix te, eu vel soluta minimum tacimates, sed te alia ullum consectetuer. Cu melius viderer est, eum nulla liberavisse ei. Id timeam viderer bonorum sea. Ea justo fuisset antiopam sea. Nec ex inermis splendide, pro nonumy dicunt qualisque no.

Brute autem est eu, eos audire signiferumque eu. Exerci mandamus per ex. Cu mel vidisse atomorum, cum autem augue dicant ut. Cum graece suavitate te. Tale consul phaedrum mei te, nam in ullum iudicabit, qui ad nihil expetenda sententiae. Sea modo brute ut, et quas pericula delicatissimi qui.

...
...
...
...
.c-tabs {
  &#tab-1:checked {
    ~ .c-tabs__nav > label[for='tab-1'] {
      // active tab styles
    }
    
    ~ .c-tabs__content > [data-for='tab-1'] {
      display: block;
    }
  }
  
  &__content-item {
    display: none;
  }
  
  // rest of appearance styles
}

The "(Insert Input/Psuedo Class Here) Hack"

Dropdown Menu

checkboxes

radios

The "(Insert Input/Psuedo Class Here) Hack"

Multiple Modals

Radio Powered Modals

demo

The "(Insert Input/Psuedo Class Here) Hack"

Form Labels

Stacked Label/Input
Inline Label/Input
Placeholder as Label

The "(Insert Input/Psuedo Class Here) Hack"

Form Labels cont.

First Name




// SCSS
.c-form-group--inset { position: relative; }

.c-form-group--inset .c-input:focus + .c-label--inset,
.c-form-group--inset .c-input:valid + .c-label--inset {
  font-size: .75em;
  opacity: .7;
  top: 0;
}

.c-form-group--inset .c-label--inset {
  left: 10px;
  opacity: 1;
  position: absolute;
  top: 10px;
}

Transitions

A change in property values over a specified duration of time
instead of occurring immediately

Transitions

Why bother?

Transitions

Syntax

.defaults {
  transition-property: all;
  transition-duration: 0s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.shorthand {
  transition: all 0s ease 0s;
}

Transitions

Specifying What Changes

Transitions

Specifying What Changes

button:hover {
  transition: background 1s linear;
}
button:hover {
  transition: background 1s linear, transform 1s linear;
}
button:hover {
  transition: all 1s linear;
}

Transitions

Different Reverse Transitions

button {
  transition: background 1s linear;

  &:hover {
    transition: all 1s linear;
  }
}

Transitions

Timing Functions

How to handle the progress of the transition over time

ease
ease-in
ease-out
ease-in-out
linear
steps()
cubic-bezier()
ease
ease-in
ease-out
ease-in-out
linear
steps()
cubic-bezier()

Animations

A change in property values over a specified duration of time
instead of occurring immediately

Animations

How are they different?

animationsvstransitions

can stack on top of each otheryou only get one per element

can looponly forward/backward

reset when finished (default)don't reset when finished

don't reverse themselvesautomatically reverse

Animations

Syntax

.defaults {
  animation-name: none;
  animation-duration: 0s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}
.shorthand {
  animation: none 0s ease 0s 1 normal none running;
}

Animations

Keyframes

A keyframe is the actual definition of what the animation will do.

.example {
  animation: spin 2s linear infinite;
}@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Animations

What Can We Animate?

-moz-outline-radius-moz-outline-radius-bottomleft-moz-outline-radius-bottomright-moz-outline-radius-topleft-moz-outline-radius-topright-webkit-text-fill-color-webkit-text-stroke-webkit-text-stroke-color-webkit-touch-calloutallbackdrop-filterbackgroundbackground-colorbackground-positionbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-widthborder-colorborder-leftborder-left-colorborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-widthborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-widthborder-widthbottombox-shadowclipclip-pathcolorcolumn-countcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-widthcolumn-widthcolumnsfilterflexflex-basisflex-growflex-shrinkfontfont-sizefont-size-adjustfont-stretchfont-weightgrid-column-gapgrid-gapgrid-row-gapheightleftletter-spacingline-heightmarginmargin-bottommargin-leftmargin-rightmargin-topmaskmask-positionmask-sizemax-heightmax-widthmin-heightmin-widthmotion-offsetmotion-rotationobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-widthpaddingpadding-bottompadding-leftpadding-rightpadding-topperspectiveperspective-originrightscroll-snap-coordinatescroll-snap-destinationshape-image-thresholdshape-marginshape-outsidetext-decorationtext-decoration-colortext-emphasistext-emphasis-colortext-indenttext-shadowtoptransformtransform-originvertical-alignvisibilitywidthword-spacingz-index

Animations

Stacking Animations


// SCSS .a-bounce { animation: bounce .75s ease-in-out -.375s infinite alternate; }

// SCSS // .a-bounce { // animation: bounce .75s ease-out -.375s infinite alternate; // } .a-warp { animation: warp 1.5s ease-in-out -.375s infinite alternate; }

// SCSS .a-bounce { animation: bounce .75s ease-out -.375s infinite alternate; &.a-warp { animation-name: bounce, warp; animation-direction: alternate, normal; animation-duration: .75s, 1.5s; } } .a-warp { animation: warp 1.5s ease-in-out -.375s infinite; }

Animations

Delayed Progress

no delay
positive delay
negative delay

Animations

Why Negative?

no delay

paused (no delay)

negative delay

paused (no delay)

Animations

Chaining Timing Functions

@keyframes sample {
  0% {
    animation-timing-function: ease-in;
    ...
  }
  33% {
    animation-timing-function: steps(4);
    ...
  }
  66% {
    animation-timing-function: ease-out;
    ...
  }
  100% {
    ...
  }
}

Animation Demos

Animation Demos

Often Overlooked Options

animate the <html>

animate pseudo-elements on the <html>

Animation Demos

Making an Entrance

Animation Demos

Just For Fun

Box-Shadows

Box-Shadows

The Basics

button {
  box-shadow: none                  ;
}
button {
  box-shadow: x-offset              ;
}
button {
  box-shadow:          y-offset     ;
}
button {
  box-shadow:                   blur;
}
button {
  box-shadow: 10px 10px 20px;
}

Box-Shadows

More Basics

button {
  box-shadow: 0 10px 20px;
}
button {
  box-shadow: 0 10px 20px;
}
button {
  box-shadow: 0 10px 20px #333;
}

Box-Shadows

Functional, Not Just Design

  • Information
  • More Information
  • A thing you should know.
  • A much more intensive version of some things that might interest you. At least a little bit, we hope.
  • Something dumb to take up space.
  • Information
  • More Information
  • A thing you should know.
  • A much more intensive version of some things that might interest you. At least a little bit, we hope.
  • Something dumb to take up space.
  • Information
  • More Information
  • A thing you should know.
  • A much more intensive version of some things that might interest you. At least a little bit, we hope.
  • Something dumb to take up space.
  • li {
      box-shadow: 0 2px 0 0 white;
    }
    

So why are box-shadows so great?

The Fantastic 4th Number

Box-Shadows

The 4th Number

box-shadow: 0 0 0 6px currentColor;
box-shadow: 0 0 0 -6px currentColor;
box-shadow: 0 20px 0 6px currentColor;
box-shadow: 0 20px 0 -6px currentColor;
box-shadow: 0 10px 20px -5px #333333;

Its The Final Property

Box-Shadows

The Final Property

box-shadow: inset 0 0 10px 0 currentColor;

box-shadow: 0 0 10px 0 currentColor inset;

Multiple Shadows

Box-Shadows

Multiple Shadows

box-shadow:
  0 0 0  5px #ff6347,
  0 0 0 10px #ffa500,
  0 0 0 15px #ffd700,
  0 0 0 20px #32cd32,
  0 0 0 25px #1e90ff,
  0 0 0 30px #9370db
;

Box-Shadows

Multiple Shadows

Box-Shadows

Static Icons

Box-Shadows

Animated Icons

Questions?

Thinking Outside the Box With CSS

bit.ly/css-totb-demos