dashed-border-generator/index.html at b012c3aa867c0ea4f5bc6149222d9608870f0e86 · kovart/dashed-border-generator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!--
* Sup! This tool can be used as generator of advanced dashed or dotted border.
* -
* The project uses Bootstrap 4 and VueJS v2 frameworks.
* The "vue-color" component is used to replace standard color picker.
* The "mini-svg-data-uri" library is used to encode SVG to the URI-safe string.
* -
* Author: Artem Kovalchuk
* Email: kovart.dev@gmail.com
* URL: github.com/kovart
-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Trick – Customized Dashed or Dotted Border</title>
    <meta name="description" content="A simple CSS generator for custom dashed or dotted border. Has ability to increase space between dots, change dash length or distance between strokes. Based on a trick with SVG-image inside 'background-image' property.">
    <meta name="Keywords" content="CSS, border, stroke, dashed, dotted, spacing, generator, svg, distance, trick, hack, online">
    <meta name="author" content="Artem Kovalchuk">
    <link rel="icon" type="image/ico" href="favicon.ico">
    <!-- Open Graph -->
    <meta property="og:title" content="Dashed Border Generator by @kovart">
    <meta property="og:description" content="With this tool you can simply increase space between dots, change dash length or distance between strokes.">
    <meta property="og:url" content="https://kovart.github.io/dashed-border-generator/">
    <meta property="og:image" content="https://kovart.github.io/dashed-border-generator/intro.png">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-134982632-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'UA-134982632-1');
    </script>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="text-center py-4">
            <h1 style="margin-bottom: 1rem">Customize your CSS Border 🚀</h1>
            <h2 class="text-center lead">
                With this tool you can simply increase space between dots, change dash length or distance between strokes.
            </h2>
        </div>
        <div class="row">
            <!-- Visualization -->
            <div class="col-md-6">
                <div class="visualization block">
                    <div class="visualization__color-list">
                        <div class="visualization__color"
                             @click="openColorPicker('border')"
                             v-bind:class="{'is-active': colorPicker.target == 'border'}"
                             v-bind:style="{ background: currentStyle.borderColor }"></div>
                        <div class="visualization__color"
                             @click="openColorPicker('background')"
                             v-bind:class="{'is-active': colorPicker.target == 'background'}"
                             v-bind:style="{ background: currentStyle.backgroundColor }"
                        ></div>
                    </div>
                    <div v-if="colorPicker.isOpened" class="visualization__color-picker">
                        <div @click="closeColorPicker" class="filler"></div>
                        <chrome-picker ref="colorPicker" @input="updateColor" v-model="colorPicker.borderColor" />
                    </div>
                    <div v-bind:style="blockStyle" class="visualization__rectangle"></div>
                    <div class="visualization__style-list">
                        <button class="visualization__style"
                                v-for="style in styles"
                                @click="setStyle(style)"
                                v-bind:style="generateBorderStyle(style)">
                        </button>
                    </div>
                </div>
            </div>
            <!-- Settings -->
            <div class="col-md-6">
                <div class="block">
                    <!-- Block size -->
                    <div class="form-row">
                        <div class="col-6">
                            <label for="input-block-width">Width:</label>
                            <input v-model="block.width" class="form-control" type="text" id="input-block-width">
                        </div>
                        <div class="col-6">
                            <label for="input-block-height">Height:</label>
                            <input v-model="block.height" class="form-control" type="text" id="input-block-height">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-12">

                            <small class="form-text text-muted">
                                Note: It doesn't impact on generated style.
                            </small>
                        </div>
                    </div>
                    <hr>
                    <!-- Stroke width -->
                    <div class="form-row">
                        <div class="col-12">
                            <label for="input-stroke-width">Stroke width:</label>
                            <input v-model="currentStyle.width" class="form-control" type="text" id="input-stroke-width">
                        </div>
                    </div>
                    <div class="form-row ">
                        <!-- Dash Array -->
                        <div class="col-6">
                            <div class="form-inline"></div>
                            <div class="form-group">
                                <label for="input-dash-array">Dash Array</label>
                                <div class="input-group">
                                    <input type="text" v-model="currentStyle.dashArray" class="form-control"
                                           id="input-dash-array" aria-describedby="dashArray">
                                    <div class="input-group-append">
                                        <button @click="generateRandomDashArray()" class="btn btn-outline-secondary" type="button">Random</button>
                                    </div>
                                </div>
                                <small class="form-text text-muted">
                                    It's a sequence of visible/invisible intervals.
                                </small>
                            </div>
                        </div>
                        <!-- Line cap -->
                        <div class="col-6">
                            <label for="input-linecap">Line Cap</label>
                            <select id="input-linecap" class="form-control" v-model="currentStyle.linecap">
                                <option v-for="option in options.linecap" v-bind:value="option">
                                    {{ option }}
                                </option>
                            </select>
                        </div>
                    </div>
                    <!-- Dash offset -->
                    <div class="form-row">
                        <div class="col-12">
                            <label for="input-stroke-width">Dash offset: {{ currentStyle.dashOffset }}</label>
                            <input v-model="currentStyle.dashOffset" step="1" min="0" max="100" class="custom-range"
                                   id="input-dash-offset" type="range">
                        </div>
                    </div>
                    <hr>
                    <!-- Border radius -->
                    <div class="form-row">
                        <div class="col-12">
                            <label for="input-border-radius">Border radius:</label>
                            <input v-model="currentStyle.borderRadius" class="form-control" type="text" id="input-border-radius">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Generated Style -->
        <div class="row mt-3">
            <div class="col-12">
                <div class="block">
                    <textarea readonly ref="codeInput" id="code" class="output mb-3">{{ output }}</textarea>
                    <button ref="copyBtn" @click="copyCss" class="btn btn-outline-primary px-5 mx-auto">
                        {{ isCopied ? 'Copied' : 'Copy' }}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <hr class="mt-5">
    <div class="container">
        <div class="row justify-content-md-center my-5">
            <div class="col-12 col-md-8">
                <h2>Usage</h2>
                <p>
                    Just copy the output and paste it into your CSS code. For example:
                <pre class="block"><code class="css">.block {
   width: 100px;
   height: 100px;
   /* dashed border */
   background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}</code></pre>
                </p>
                <h2 class="pt-3">How does it work?</h2>
                <p>
                    Native CSS properties <b>don't support</b> the customization of <mark>border-style</mark>.
                    Therefore, we use a trick with an <b><i>SVG image inside</i></b> <mark>background-image</mark> 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.
                </p>
            </div>
        </div>
    </div>
</div>
<!-- Github corner -->
<a href="https://github.com/kovart/dashed-border-generator" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
<style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<!-- VueJS CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Libraries -->
<script src="vendor/vue-color.min.js"></script>
<script src="vendor/mini-svg-data-uri.js"></script>
<!-- App -->
<script src="main.js"></script>
<!-- Code highlight -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/atom-one-light.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script></body>
</html>