Over 30 preset cookie-cutter shapes are included from a drop-down menu, to help you get started. The custom option lets you supply your own CSS clip-path code, therefore permitting you to apply any conceivable shape possible, within the limits of the CSS clip-path specification.
All images inside CookieCutter are scaled responsively to fit different screen sizes (without parts of the image getting cut-off or distorted). ALT attributes can still be applied to these images, for improved webpage accessibility and search engine ranking.
Much like many Stacks4Stacks stacks, you have the choice of using images dragged and dropped into CookieCutter or sourced from your RapidWeaver resources or a warehouse location. Optional links are easily applied to CookieCutter stacks, by placing each one inside a LinkBox stack.
If you need text to occupy the space created by the cut-out shape, consider using the CutOut stack.
All images inside CookieCutter are scaled responsively to fit different screen sizes (without parts of the image getting cut-off or distorted). ALT attributes can still be applied to these images, for improved webpage accessibility and search engine ranking.
Much like many Stacks4Stacks stacks, you have the choice of using images dragged and dropped into CookieCutter or sourced from your RapidWeaver resources or a warehouse location. Optional links are easily applied to CookieCutter stacks, by placing each one inside a LinkBox stack.
If you need text to occupy the space created by the cut-out shape, consider using the CutOut stack.
Examples
Here are several real examples of CookieCutter in action, being used to apply various shapes to a sample image. It would be easy to put CookieCutter stacks inside grid or column stacks.
Web browser compatibility
The CSS clip-path property is now supported by well over 95% of web browsers, people use to access your website with. Expect compatibility to be nearer towards 100% in the real world. In very old and obsolete web browsers (like Internet Explorer) the cut-out effect is ignored and the image will render normally. There is never a danger that the image will be missing or any errors will get shown.Setting CookieCutter stacks as links
Simply nest (place) a CookieCutter stack within a LinkBox stack and configure the link accordingly. Links can be configured to point to anchors, page links or external websites and may include custom attributes to do things like triggering a TopBox lightbox.Creating custom shapes
CookieCutter supports custom shapes. Search the internet for 'CSS clip-path' and read some of the many tutorials and articles that already exist. Essentially the way clip-path works is to define the X and Y position of each corner of the shape, expressed as a percentage value. Every pair of X and Y coordinates are separated with a comma. Most custom shapes are polygons. The code for a simple triangle would look something like this:clip-path: polygon(50% 0%, 0% 100%, 100% 100%);In this example, the first point is 50% from the left, 0% from the top. The bottom left of the triangle is 0% from the left and 100% from the top. And the bottom right of the triangle is 100% from the left and 100% from the top. With some practice, the technique to generate custom shapes is quite straightforward.
