15 pravidel webové grafiky - PORTA DESIGN
1. Style guide · Logo –⁠ musí být vektorové, potřebujeme i čtvercové logo pro faviconu · Font – všechny řezy písma a zdroj (preferujeme fonty ...
složitější tvary
Jdou vytvořit i <anchor>složitější tvary</anchor>, jejich použití ale doporučujeme nejdříve konzultovat s kodérem. Přenesením masky do kódu je možné vytvářet i různé dynamické transformace a efekty při průchodu webem.
Clippy — CSS clip-path maker
Clippy — CSS clip-path maker

[CSS clip-path maker](http://bennettfeely.com/clippy) [Tweet](https://twitter.com/share)

to add points

to
custom polygon.


## Custom shape

## Round edges

The `inset()` shape optionally allows values
similar to `border-radius` for rounded edges.
This new feature may be buggy in
your browser.


`clip-path: ;`

This ad keeps this site running.

Consider whitelisting this page.

Thank you for visiting either way!

## Round edges

The `inset()` shape optionally allows values
similar to `border-radius` for rounded edges.
This new feature may be buggy in
your browser.


## Custom shape

## Demo Size

## ×

## Demo Background

![](pics/pittsburgh.jpg)![](pics/fierenze.jpg)![](pics/sparkler.jpg)![](pics/miami.jpg)

## Show outside clip-path

## About Clip Paths

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.

CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.

## Browser Support

Check out the current browser support for the `clip-path` property on [Can I Use](http://caniuse.com/#search=clip-path).

## Brought to you by Bennett Feely

[Follow @bennettfeely](https://twitter.com/bennettfeely)

Find this project on [Github](https://github.com/bennettfeely/Clippy).

Want a list of the name of every polygon? Check out my new site, [Copy Paste List](https://copypastelist.com/math/list-of-polygons/).