Esquinas biseladas basadas en lienzo con JavaScript-CHAMFER. js
| Autor: | MISoftware |
|---|---|
| Views Total: | 869 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 31, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
CHAMFER. js es una biblioteca de JavaScript que aplica bordes biselados con base en lienzo (biselado) a cualquier elemento de bloque como imágenes, divs y más.
Funcionamiento
Incluya el polyfill de ResizeObserver para los bordes responsivos.
<script src="dist/ResizeObserver.js"></script>
Incluya el archivo principal de JavaScript Chaffer. js justo antes de la etiqueta body de cierre.
<script src="dist/chamfer.js"></script>
Aplique los bordes biselados (biselado) a sus elementos de la siguiente manera:
ChamferEnvelop(el, {
// options here
});
// or
ChamferBg(el, {
// options here
}); Todas las opciones posibles con valores predeterminados.
{
// border side
size: 5,
// stroke width
sw: 1,
// stroke color
sc: 'black',
// fill color
fc: undefined,
// image to use as fill pattern
fp: undefined,
// enables Chamfer.js on top-left corner?
tl: true,
// enables Chamfer.js on top-right corner?
tr: true, // chamfer top-right corner?
// enables Chamfer.js on bottom-left corner?
bl: true, // chamfer bottom-left corner?
// enables Chamfer.js on bottom-right corner?
br: true, // chamfer bottom-right corner?
// enables/disables resize observer
resize_observe: false
}
