Originally, I wanted to pack a lot of thumbnails together but use HighSlide to show the fuller images; a thing that Xara cannot achieve easily.
I did a lot of JavaScript coding to then discover CSS clip-path.
The bonus is the means to animate the hover as well.
The example file is just using simple path shapes.
The fun comes when you use SVG shapes as well.
CSS - Path Clippers.xar
The clipped paths align with the presented shape so there is none of the usual overlapping that rectangular DIVs/SPANs show.
There are four ways to develop further:
- Build up a further collection of polygons and ellipses.
- Add in specific keyframes for different classes.
- Add in a dusting of SVG shapes.
- Experiment with customised paths, which have to use absolute values and not percentages.
The current CSS code is in Website > HTML Code (head).
Acorn
Bookmarks