Hakim El Hattab / hakim.se

Building Better Interfaces

Dev/design

Creative tools

SLIDES.com

I

U

REVEAL.JS

LOADING

POPOUTS

WIREFRAME

Hover MENUS

👆😑

Timeout?

let anchor = document.querySelector( '.anchor' ).getBBox();
let menu = document.querySelector( '.menu' ).getBBox();

document.querySelector( 'path' ).setAttribute( 'd', `
  M ${anchor.x} ${anchor.y}
  Q ${menu.x} ${anchor.y},
    ${menu.x} ${menu.y}
  v ${menu.height}
  Q ${menu.x} ${anchor.y + anchor.height},
    ${anchor.x} ${anchor.y + anchor.height}
  h ${anchor.width}
  v ${-anchor.height}
  z` );
<svg width="300" height="200">
  <rect class="anchor" fill="#ddd" y="85" width="100" height="30" />
  <rect class="menu" fill="#ddd" x="140" width="120" height="200" />
  <path stroke="#00ff00" stroke-width="2" />
</svg>
svg  { pointer-events: none; }

path { pointer-events: auto; }

CORE COMPONENTS

ANIMATIONS

MEANINGFUL
POINTLESSNESS

TABLE OF CONTENTS

github.com/hakimel

Tutorial

hakim.se

@hakimel

Thanks!

CSS Day 2019

By Hakim El Hattab

CSS Day 2019

I've spent the past six years building the UI for Slides. In this talk, I'm going to share what I've learned in the process in the form of hands-on tips and talk about the benefits of some of the specific UI patterns that we established.

  • 6,122

More from Hakim El Hattab