Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://kovart.github.io/dashed-border-generator/
Custom Dashed Border | Online CSS Generator 🚀
https://kovart.github.io/dashed-border-generator/
border css dashed dotted generator stroke svg tool
Last synced: 4 months ago
JSON representation
Custom Dashed Border | Online CSS Generator 🚀
- Host: GitHub
- URL: https://kovart.github.io/dashed-border-generator/
- Owner: kovart
- Created: 2019-02-22T07:54:45.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-02-10T07:06:35.000Z (almost 3 years ago)
- Last Synced: 2024-04-06T23:31:25.240Z (9 months ago)
- Topics: border, css, dashed, dotted, generator, stroke, svg, tool
- Language: HTML
- Homepage: https://kovart.github.io/dashed-border-generator/
- Size: 97.7 KB
- Stars: 309
- Watchers: 5
- Forks: 21
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dashed Border Generator
A simple online tool for creating custom dashed or dotted borders. Using CSS hack, this tool can simply increase space between dots, change dash length or distance between strokes.## How does it work? 🚀
Native CSS properties **don't support** the customization of `border-style`.
Therefore, we use a trick with an ***SVG image inside*** `background-image` property.
The SVG features give us the ability to change the distance between dashed lines, set custom pattern, add dash offset or even change a line cap.Generated SVG image is vector and it fills width and height of elements by 100%, so it doesn't matter what size elements have.
## [View in Action](http://kovart.github.io/dashed-border-generator/)
![intro](./intro.png)## Dependencies
* [VueJS](https://github.com/vuejs/vue)
* [Bootstrap 4](https://github.com/twbs/bootstrap)
* [vue-color](https://github.com/xiaokaike/vue-color)
* [mini-svg-data-uri](https://github.com/tigt/mini-svg-data-uri)## License
[The MIT License](http://opensource.org/licenses/MIT)Copyright (c) 2019-present, Artem Kovalchuk