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:
shape-outside elements both right and left to get text to flow between them.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.
You know how some sites and web apps have that neat native feel when transitioning between two pages or views? Sarah Drasner has shown some good examples and even a Vue library to boot.
These animations are the type of features that can turn a good user experience into a great one. But to achieve this in a React stack, it is necessary to couple crucial parts in your application: the routing logic and the animation tooling.
Let’s start with …
The post Animating Between Views in React appeared first on CSS-Tricks.
Explore what the world is searching. Enter a search term or a topic.
