Demo #1: OTT radio buttons

The checkbox hack (1/2)

The input and its label must be linked

Either wrap the input in the label

<label>
  <input type="radio" name="moment" value="block">
  <img src="img/block.jpg" srcset="img/block.jpg 2x" alt="The Block">
  <span>The Block</span>
</label>

Or use the for="ID_OF_INPUT" attribute on the label

<input type="radio" name="moment" value="block" id="block">
<label for="block">
  <img src="img/block.jpg" srcset="img/block.jpg 2x" alt="The Block">
  <span>The Block</span>
</label>

The checkbox hack (2/2)

Uses the :checked pseudo-class and sibling selectors

.o-option__input {
  opacity: 0;
  position: absolute;
  
  &:checked + .o-option__img {
    border-color: #860038;
  }
  
  &:checked ~ .o-option__txt {
    color: #860038;
  }
}

CSS animations (1/3)

The transform: translateX() property with nth-child selectors

.is-active.c-4options {
  z-index: -1;

  .is-checked.o-option:nth-child(1) {
    transform: translateX(100%);
  }

  .is-checked.o-option:nth-child(3) {
    transform: translateX(-100%);
  }

  .is-checked.o-option:nth-child(4) {
    transform: translateX(-200%);
  }
}

CSS animations (2/3)

The transform: scale() and opacity property

.c-action,
.c-logo__img,
.is-active .o-option:not(.is-checked) {
	transform: scale(0);
	opacity: 0;
	z-index: 0;
}

.is-active .c-action,
.is-active .c-logo__img {
	opacity: 1;
	transform: scale(1);
}

CSS animations (3/3)

The transition and transition-delay property

.o-option,
.c-action,
.c-logo__img {
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-out;
  transition-delay: 0.1s;
}

That 0.1s pause does make a difference ¯\_(ツ)_/¯

Seperation of concerns

• Layout-specific classes prefixed with l-
• Javascript hooks prefixed with js-
• Styling of objects prefixed with o-

<label class="l-option o-option js-option">
  <input class="o-option__input" type="radio" name="moment" value="block">
  <img src="https://res.cloudinary.com/huijing/image/upload/w_200/block.jpg" srcset="https://res.cloudinary.com/huijing/image/upload/w_400/block.jpg 2x" alt="The Block" class="o-option__img">
  <span class="o-option__txt">The Block</span>
</label>

Accessibility problem

Does not play nice with keyboard controls 😔

Make the enhancement a choice that can be toggled

Source code

https://github.com/huijing/ott-radio-btns

Codepen link

Demo #2: CSS Album Art

Pseudo-elements

.element::before {
  content: '';
  display: block;
  width: 50%;
  height: 50%;
}

Shapes with CSS (1/3)

This be a circle

.circle {
  width: 30vmin;
  height: 30vmin;
  background: #f2af29;
  border-radius: 50%; /* This is the key line, right here */
  margin: 0 auto;
}

Shapes with CSS (2/3)

.triangle {
  border-top: 18.75vmin solid transparent;
  border-bottom: 18.75vmin solid transparent;
  border-left: 18.75vmin solid #1e292f;
}

Shapes with CSS (3/3)

This be a trapezium

.trapezium {
  width: 60vmin;
  height: 30vmin;
  background: #1e292f;
  clip-path: polygon(33% 0, 67% 0, 100% 100%, 0% 100%); /* This is the key line, right here */
}

Unfortunately, clip-path is NOT supported in Edge or IE 😔

Box shadow trick

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

.o-logo-basic {
  border-radius: 50%;
  height: 1px;
  width: 1px;
  position: absolute;
  bottom: 10%;
  left: 50%;
  box-shadow: -6vmin     0 0 0.5vmin #47473f, -4vmin     0 0 0.5vmin #47473f,
              -2vmin     0 0 0.5vmin #47473f,      0     0 0 0.5vmin #47473f,
               4vmin     0 0 0.5vmin #47473f, -6vmin 2vmin 0 0.5vmin #47473f,
              -4vmin 2vmin 0 0.5vmin #47473f,      0 2vmin 0 0.5vmin #47473f,
               2vmin 2vmin 0 0.5vmin #47473f,  4vmin 2vmin 0 0.5vmin #47473f,
               6vmin 2vmin 0 0.5vmin #47473f;
}

CSS Scroll Snap

Okay fine, it's scroll-jacking ¯\_(ツ)_/¯

Only works on Firefox and Edge 😔

main {
  width: 100vw;
  height: 85vmin;
  white-space: nowrap;
  overflow-y: hidden;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: mandatory; /* this is the key line */
}

section {
  display: inline-block;
  width: 100%;
  height: 100%;
  scroll-snap-coordinate: 0 0; /* this is the key line */
}

Source code

https://github.com/huijing/album-art

Codepen link