CSS3 Secrets 10 things you might not know about CSS3

CAUTION: May contain traces of JavaScript

By Lea Verou (@LeaVerou)

Bouncing transitions

Bouncing transitions

On an element's position

Bouncing transitions

On an element's size

Bouncing transitions

On background colors

cubic-bezier(x, y, z, w>1)

Browser support

  • Supported
  • Since IE10
  • Supported
  • Supported (in nightly)

Flexible ellipses

Flexible ellipses

How?

Hi,
I pretend to be an ellipse but I’m a liar. Try changing my aspect ratio to see why ;-)

Flexible ellipses

With border-radius: 50%

Hi,
I’m a true ellipse. Try changing my aspect ratio: I’ll still be an ellipse ;-)

border-radius: 50%

Browser support

  • Supported since 4, used to be buggy in 3.6
  • Supported since IE9
  • Supported since 11.50
  • Supported, used to be buggy with borders

Multiple outlines

Make shadows bigger

with box-shadow spread

I have a shadow and it will soon have a spread radius. Stop reading this and pay attention if you wanna find out what that is!

Multiple outlines

with multiple box-shadows

Hi,
I have multiple shadows with spread radii so they look like outlines.

box-shadow spread

Browser support

  • Supported
  • Supported
  • Supported
  • Supported

Make pointer events pass through

Custom select menus

With pointer-events

pointer-events

Browser support

  • Supported, since 3.6
  • Not supported (on HTML elements)
  • Not supported (on HTML elements)
  • Supported

pointer-events

Feature detection

First thought:

var dummy = document.createElement('_');
if(!('pointerEvents' in dummy.style)) {
	/* Workaround here */
}

pointer-events

Feature detection

var supportsPointerEvents = (function(){
  var dummy = document.createElement('_');
  if(!('pointerEvents' in dummy.style)) return false;
  dummy.style.pointerEvents = 'auto';
  dummy.style.pointerEvents = 'x';
  document.body.appendChild(dummy);
  var r = getComputedStyle(dummy).pointerEvents === 'auto';
  document.body.removeChild(dummy);
  return r;
})();

Original idea by Martin Auswöger

pointer-events: none

JavaScript workaround

function noPointerEvents (element) {
	$(element).bind('click mouseover', function (evt) {
		this.style.display = 'none';
		var x = evt.pageX, y = evt.pageY,
		    under = document.elementFromPoint(x, y);
		this.style.display = '';
		evt.stopPropagation();
		evt.preventDefault();
		$(under).trigger(evt.type);
	});
}

Adjusting tab size

The tab-size property

tab-size

Browser support

  • Supported
  • Not supported
  • Supported
  • Not supported

Styling based on sibling count

Structural pseudo-classes

Browser support

  • Supported
  • Supported
  • Supported
  • Supported

Practical example

    Colors taken from the palettes:

    3 colors or more:

    9 colors or more:

    Credit where it’s due: André Luís came up with the first version of this idea

    Custom checkboxes & radio buttons

    Credit where it’s due: Ryan Seddon came up with the first version of this idea

    :checked

    Browser support

    • Supported
    • Supported
    • Supported
    • Supported

    More cursors
    for better UX

    Cursors in CSS2

    • crosshair
    • default
    • help
    • move
    • e-resize
    • ne-resize
    • nw-resize
    • n-resize
    • se-resize
    • sw-resize
    • s-resize
    • w-resize
    • text
    • wait
    • progress

    New cursors in CSS3

    • none
    • context-menu
    • cell
    • vertical-text
    • alias
    • copy
    • no-drop
    • not-allowed
    • col-resize
    • row-resize
    • all-scroll
    • zoom-in
    • zoom-out

    CSS3 cursors

    Browser support

    • All supported
      Issue: no-drop same as not-allowed
    • Doesn't support none, context-menu, cell, alias, copy, zoom-in/out.
    • Only supports col-resize, row-resize, all-scroll and zoom-in/out on Windows
    • All supported

    Background patterns with  pure CSS

    CSS3 gradients

    CSS gradients

    Browser support

    • Supported since Firefox 3.6
    • Supported since IE10
    • Supported (Radial gradients in v12)
    • Supported (Safari since 5.1)

    Background positioning tricks

    CSS3 background-position

    Browser support

    • Not supported
    • Supported
    • Supported
    • Not supported

    background-origin

    Browser support

    • Supported
    • Supported
    • Supported
    • Supported

    Browser score card

    Browser Supported Buggy No support
    Firefox
    Opera
    Webkit
    Internet Explorer

    FAQ

    Q: Will the slides be published? When?

    A: They already are:

    Q: How did you make the slides?

    A: With my slideshow framework, CSSS (github.com/LeaVerou/CSSS)

    Any other questions?

    Takk!

    lea.verou.me
@leaverou
lea@verou.me