bennettfeely / clippy Goto Github PK

in the bottom: This demo uses Draggabilly by Dave Desandro
http**:**//desandro.com/

missing ":"

Hi,

Once I work out how to do it i might make a pull request, but if there is a way to smooth edges that would be great. My use case is a hexagon from a client ie:

For the moment I used the site and will hand code the edges, but need to research the math to do it the right way

https://bennettfeely.com/clippy/ does not appear to work correctly in Safari. The shapes are all rendered as squares and do not mask the image.

This is occurring on Safari on a fully-patched version of Catalina:

I really like your Clippy example...

I would suggest instead of just outputting the just the clip code, why not the whole code: Pic, CSS and HTML?

For example, the whole code would look like:
HTML

<section class="demo">
<div id="box" class="box" style="width: 100%; height: 800px;">
<div class="shadowboard" style="opacity: 0;"></div>
<div class="clipboard" style="clip-path: polygon(50% 0%, 100% 0, 100% 100%, 49% 87%, 19% 73%, 0 52%, 0 0);"></div>
</div>
</section>

CSS

.box {
    position: relative;
    /* box-shadow: inset 0 0 0 10px #fbfcf7, inset 0 0 0 11px #d3d0c9; */
    -ms-touch-action: none;
    touch-action: none;
    min-height: 200px;
    max-width: 100%;
    min-width: 420px;
    height: 800px;
    background: #e01e1e; //<-- Added to change the mask color
}
.shadowboard, .clipboard {
    background-image: url(pics/pittsburgh.jpg); //<-- allowed to change the pic url
}
.shadowboard {
    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity 0.375s;
    transition: opacity 0.375s;
}
.shadowboard, .clipboard {
    position: absolute;
    top: 0px; //<-- not sure why the border
    left: 0px; //not sure why the border
    right: 0px; //not sure why the border
    bottom: 0px; //not sure why the border
    background-color: #fbfcf7 !important;
    background-image: url(pics/pittsburgh.jpg); 
    background-size: cover;
    background-position: center center;
}

And perhaps Media Queries can control the size of the image to respond to different sizes?

I see you have no LICENSE file for this project. The default is copyright.

I would suggest releasing the code under the GPL-3.0-or-later or AGPL-3.0-or-later license so that others are encouraged to contribute changes back to your project.

The page already says

The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

But only the basic shapes are supported in the live demo. The most advanced option available is the custom polygon shape editor. It would be nice to support a text box where we could add a SVG path definition to be used to clip the image. In particular, this would allow drawing curved shapes that are not circles or ellipses.

I want Clippy made an extension for Visual Studio Code! So I can use it without using web browser, Thanks!

When you click 4 or more points, the last point is turned off and the editing effect is not available. The other points cannot be operated

I've discovered a small bug where if you in the mobile version, and you make the size something over the max_height limit, and then you size your browser up to desktop mode, the clipboard extends beyond its container. I think it just needs to trigger on a window resize event to check

I just visited Clippy in Firefox Nightly, and all the shapes render correctly. I checked the relevant flag in about:config, and it has indeed been enabled. The “No support” message should therefore no longer be displayed in Firefox 53+. I can make a PR.

In https://github.com/bennettfeely/Clippy/blob/master/dev/clip.js#L61

It is [[25,0],[100,1],[100,100],[25,100],[0,50]]
Should be [[25,0],[100,0],[100,100],[25,100],[0,50]]

Logo and favicon, both are the vital part of a website. It'd be great if this project will have a logo and favicon.

Mixed Content: The page at '<URL>' was loaded over a secure connection, but contains a form that targets an insecure endpoint '<URL>'.
This endpoint should be made available over a secure connection. 3016:16:46.983 Form submission canceled because the form is not connected

http > https will fix it.

Generated clip-path not working in firefox, becauce firefox use "url" clip-path, not "polygon".
https://stackoverflow.com/questions/28311741/responsive-clip-path-with-inline-svg

I think it would be nice to have the option of

• equilateral

for each polygon

Hey Guys 👋 Thanks for your work 👍

I like when you have code snippet to see a button on the top right that allow you to copy the content in the clipboard like this:

Do you think it's a good idea to implement it? Should I take care of it?

Another option is to make the full snippet clickable, and store in the clipboard when you click on it.

Hey! Just wanted to give you a heads up that the SSL certificate for the website looks to have expired yesterday (7th October 2017).

Hi, Bennettfeely.
Thanks so much for the css clip-path generator you created, It has been really helpful
But i think it would be much easier if there is a "Copy" button to copy to my Clipboard,
I could help create one😀

For example, star can be written:

.star {
   clip-path: polygon(50% 0%, 82% 100%, 0 38%, 100% 38%, 18% 100%);
}

instead of:

.star {
   clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);
}

Maybe you have a good reason to use more points?

Awesome tool btw. :)

Hi Bennett,

I don't know if you intend to improve upon this awesome project or take any PRs, but if you do, I have an idea for a possibly useful feature.

I think it would be great if the user could have the option to select the actual code to copy instead of moving the mouse around that may occasionally cause a failed selection.

I forked Clippy and was experimenting on it, added a small amount of code. Here's a picture of what I ended up with, and also to demonstrate what I mean exactly:

What do you think?

Because they are allowed by the spec.

Currently, no matter how I drag the control points, they don't go under 0 or over 100%. But according to the spec, those values are perfectly valid.

@bennettfeely Absolutely LOVE Clippy, I use it all the time for projects, it's an essential tool. Thank you for building it and offering it to the community!

Recently I was working on a project where I needed my polygon shape's sides to be exactly like a mockup, but I wasn't able to get the precision I needed in Clippy. I did end up using Clippy, but then had to edit the final CSS, by adding decimals. For example, 95% 51% would be 95.2% 51%.

I would be curious to know how challenging it would be to make the numbers increment by 0.1 rather than increments of 1. This would mean precise control for more nuanced custom polygon shapes would be easier to produce in Clippy.

I think add the URL of the site to the about section would be helpful.

Percentages are not suitable when fine control is required, or if the parent container has to be resized.

Please allow toggling between pixels and percentages.

Some suggestions that will make using pixelart much easier:

• Being able to choose to work with pixels (integers) or percent
• Automatically detect the width and height of the image when importing the URL
• Scale (zoom) to better see the position of the points (with normal scroll to move around the image depending on the zoom), with "image-rendering: pixelated" when using larger scales.

But congratulations on the tool, it's the best on the web!!!