Friday, November 28, 2014

Applying clipping to elements in CSS

The clip property is deprecated now. The new, recommend version of applying clipping to elements in CSS is clip-path.

Clip property has two significant weaknesses:
  1. Element has to be positioned as absolute.
  2. Clip can only do rectangles.

The clip-path property solves the weaknesses. The clip-path property can be applied to all HTML elements and SVG container elements. The clip-path property takes any graphical element from SVG or basic shapes from CSS and uses them as clipping region.

The clip-path property do not require any SVG markup. You can use basic shapes from CSS. They were added to clip-path to provide easy shorthand functions for simple clipping operations.

  • inset(top right bottom left [ round border-radius ]?)
  • circle(r? [ at position ]?)
  • ellipse(rx ry? [ at position ]?)
  • polygon(x1 y1, x2 y2, ..., xn yn)

Animating/Transitioning clip-path
Basic shapes can be animated. The following example uses hover effect. Animation of basic shapes works fine when it is applied to the same shape.

Clippy - CSS clip-path maker