How to cope with graphical challenges using latest web technologies

Alex Wolkov - for W3C Israel

◎_◎

Create awesome stuff. FAST

Using CSS3

✔

INTRO ✌

  • Alex Wolkov
  • FED lead at Conduit
  • @altryne on twitter - follow me
  • alexw.me - personal blog

Heads Up

  • ☒ IE (under 9) - were here to have fun
  • ☒ "proper" way
    (semantics, optimization, SEO)
  • ☒ long talks about a single subject

Technologies ↓

  • CSS3
  • Web tools
  • JS

CSS3

  • transitions
  • gradients
  • border-radius
  • multiple backgrounds

Web Tools

Javascript

  • request animation frame
  • canvas manipulation

Step 1 : Get inspiration ♪♪♫

Awesome inspiration places:

Step 1 : Get inspiration ♪♪♫

Breakdown + layout ✂

Doing it even faster...

  • Absolute positioning
  • Approx sizes
  • Ugly bg colors :)
  • #ace, #bada55, #bad, #dad, #badDad, #facade

Step 2 : Gradients ◕‿◕

Simplest Form

background : linear-gradient(#000,#FFF);

More complicated

background : linear-gradient(top, #d1ede9, #c1e9e3 3%, #b1e4dc 12%, #59d2bf 90%, #00bfa2);

Radial goodness

background : radial-gradient(center center, contain, #d1ede9, #c1e9e3 3%, #b1e4dc 12%, #59d2bf 90%, #00bfa2);

Fastest way - layerstyles.org

Benefits

  • Faster
  • Easier
  • Updatier
  • Better than you ;)
  • Your designer can do it

More info on gradients

Updated css3 linear-gradient syntax

Step 3 : Borders and Shadows ✰

Border radius

border-radius : 50%;

Border custom radius

border-top-right-radius: 15px 150px;

Box Shadow

box-shadow : 15px 15px 15px #000 ;

Inset

box-shadow : inset 15px 15px 10px #000;

Border width shadow

box-shadow : 0 0 0px 5px #000;

Shadows are versatile

  • Multiple layers
  • Drop shadow
  • Outer glow
  • Inner glow
  • Multiple Borders

Crazy shadows

More info on shadows

39 crazy box shadows - j.mp/css3shadows

Step 4 : 3D ♡

  • 3D is tricky
  • Hardware accelerated
  • Chrome, safari, Firefox 11, IE10
  • Fallback to 2d with modernizr

3d perspective

-webkit-perspective : 300px;

Rotate me baby

  • transform : rotateX(15deg)
  • deg and rad values
  • transform-origin:50% 50%

3d tester

CSS3 3d tester - j.mp/css3dtester

More info on css 3d

CSS3 3d tester - j.mp/css3dtester
CSS3 3d perspective - j.mp/css3dperspective
MDN on transform-origin - j.mp/cssorigin

Step 5 : Transitions ☭

transition : all 1s ease-in 10ms
  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay

Transition me

width:500px;

More info on transitions

Thanx. You were great.

Credits :

Slideshow source : Reveal.js (@hakimel)
PrefixFree.js (@leaverou)