design tips

One thing that has long surprised (and saddened) me is that the clip-path property, as awesome as it is, only takes a few values. The circle() and ellipse() functions are nice, but hiding overflows and rounding with border-radius generally helps there already. Perhaps the most useful value is polygon() because it allows us to draw a shape out of straight lines at arbitrary points.

Here’s a demo of each value:

See the Pen clip-path examples by Chris Coyier (…

The post An Initial Implementation of clip-path: path(); appeared first on CSS-Tricks.

Codrops has a very nice article on CSS Shapes from Tania Rascia. You might know shape-outside is for redefining the area by which text is floated around that element, allowing for some interesting design opportunities. But there are a couple of genuine CSS tricks in here:

1. Float shape-outside elements both right and left to get text to flow between them.
2. You can set shape-outside to take an image and use shape-image-threshold to adjust where the text flows, meaning you could

…

The post People Talkin’ Shapes appeared first on CSS-Tricks.