It's first iteration of small border editor to play with. Made with Vue
A Pen by Menglin Chen on CodePen.
Created
November 20, 2018 01:35
-
-
Save ChanMenglin/e9add93cbd93ee4d8d3f39b4a17855c6 to your computer and use it in GitHub Desktop.
Border playground
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="app"> | |
| <div class="scene"> | |
| <div class="rect" | |
| :style="'border-radius: '+radius.general+'px; border-top: '+border.top+'px solid '+color.top+'; border-bottom: '+border.bottom+'px solid '+color.bottom+';border-left: '+border.left+'px solid '+color.left+';border-right: '+border.right+'px solid '+color.right+';transform: skew('+skew.x+'deg, '+skew.y+'deg);'"></div> | |
| <input class="rangeX x b-2" type="range" min="-45" max="45" v-model="skew.x"> | |
| <input class="rangeY y r-2" orient="vertical" type="range" min="-45" max="45" v-model="skew.y"> | |
| <input class="rangeX x b" type="range" min="0" max="200" v-model="middle.x"> | |
| <input class="rangeY y r" orient="vertical" type="range" min="0" max="200" v-model="middle.y"> | |
| <div class="y r2"> | |
| <input class="color" type="color" v-model="color.right"> | |
| </div> | |
| <input class="color y l2" type="color" v-model="color.left"> | |
| <input class="color x t2" type="color" v-model="color.top"> | |
| <input class="color x b2" type="color" v-model="color.bottom"> | |
| </div> | |
| <div class="output"> | |
| <pre><code> | |
| .rect { | |
| border-top: {{border.top}}px solid {{color.top}}; | |
| border-bottom: {{border.bottom}}px solid {{color.bottom}}; | |
| border-left: {{border.left}}px solid {{color.left}}; | |
| border-right: {{border.right}}px solid {{color.right}}; | |
| transform: skew({{skew.x}}deg, {{skew.y}}deg); | |
| } | |
| </code></pre> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| new Vue({ | |
| data() { | |
| return { | |
| radius: { | |
| general: 0 | |
| }, | |
| skew: { | |
| x: 0, | |
| y: 0 | |
| }, | |
| middle: { | |
| x: 50, | |
| y: 50 | |
| }, | |
| color: { | |
| top: '#000000', | |
| bottom: '#000000', | |
| left: '#000000', | |
| right: '#000000', | |
| } | |
| } | |
| }, | |
| computed: { | |
| border() { | |
| return { | |
| top: 200 - this.middle.y, | |
| bottom: this.middle.y, | |
| right: 200 - this.middle.x, | |
| left: this.middle.x, | |
| } | |
| } | |
| }, | |
| mounted() { | |
| this.$nextTick(() => { | |
| this.skew = { | |
| x: 15, | |
| y: 3 | |
| } | |
| this.middle = { | |
| x: 45, | |
| y: 40 | |
| } | |
| this.color = { | |
| top: '#42A5F5', | |
| bottom: '#0D47A1', | |
| left: '#1565C0', | |
| right: '#1976D2', | |
| } | |
| setTimeout(() => { | |
| this.skew = { | |
| x: 0, | |
| y: 0 | |
| } | |
| this.middle = { | |
| x: 100, | |
| y: 100 | |
| } | |
| this.color = { | |
| top: '#42A5F5', | |
| bottom: '#1565C0', | |
| left: '#1976D2', | |
| right: '#0D47A1', | |
| } | |
| }, 2000) | |
| }) | |
| } | |
| }).$mount('#app') |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| box-sizing: border-box; | |
| } | |
| #app { | |
| display: flex; | |
| } | |
| .scene { | |
| display: flex; | |
| height: 400px; | |
| width: 400px; | |
| justify-content: center; | |
| align-items: center; | |
| margin: 2em 2em 2em auto; | |
| position: relative; | |
| } | |
| .output{ | |
| margin: 2em auto 2em 2em; | |
| width: 50%; | |
| } | |
| .rect { | |
| width: 200px; | |
| height: 200px; | |
| background: grey; | |
| transition-duration: .4s; | |
| } | |
| label { | |
| display: block; | |
| } | |
| input.rangeX { | |
| width: 200px; | |
| } | |
| input.rangeY { | |
| height: 200px; | |
| width: 8px; | |
| writing-mode: bt-lr; | |
| -webkit-appearance: slider-vertical; | |
| } | |
| .x, .y { | |
| position: absolute; | |
| } | |
| .x { | |
| left: 50%; | |
| transform: translatex(-50%); | |
| } | |
| .y { | |
| top: 50%; | |
| transform: translatey(-50%); | |
| } | |
| .t{top:0;} | |
| .b{bottom:0} | |
| .l{left:0} | |
| .r{right:0} | |
| .t2{top:2em;} | |
| .b2{bottom:2em} | |
| .l2{left:2em} | |
| .r2{right:2em} | |
| .b-2{bottom:-2em} | |
| .r-2{right:-2em} | |
| .-mt-2 { | |
| margin-top: -1em; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment