├── img ├── aurea.jpg ├── clone.jpg ├── grid.jpg ├── line.jpg ├── linex.jpg ├── liney.jpg ├── magic.gif ├── oval.jpg ├── rect.jpg ├── circle.jpg ├── origin.jpg ├── pixels.jpg ├── shadow.png ├── horizontal.gif ├── multline.jpg ├── plankton.jpg ├── position.jpg ├── triangle.jpg ├── vertical.gif └── multiple-pixels.jpg ├── .gitignore ├── test ├── img │ ├── magic.gif │ └── unicorn.png ├── style.styl ├── index.html └── style.css ├── demo ├── assets │ ├── img │ │ └── share.png │ ├── icons │ │ └── favicon-32.png │ ├── stylus │ │ └── style.styl │ └── css │ │ └── style.css ├── index.html └── plankton.styl ├── .travis.yml ├── .editorconfig ├── package.json ├── .stylintrc ├── CONTRIBUTING.md ├── LICENSE.md ├── backstop.json ├── Gruntfile.js ├── da-vinci.styl └── README.md /img/aurea.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/aurea.jpg -------------------------------------------------------------------------------- /img/clone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/clone.jpg -------------------------------------------------------------------------------- /img/grid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/grid.jpg -------------------------------------------------------------------------------- /img/line.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/line.jpg -------------------------------------------------------------------------------- /img/linex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/linex.jpg -------------------------------------------------------------------------------- /img/liney.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/liney.jpg -------------------------------------------------------------------------------- /img/magic.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/magic.gif -------------------------------------------------------------------------------- /img/oval.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/oval.jpg -------------------------------------------------------------------------------- /img/rect.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/rect.jpg -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | .grunt 5 | backstop_data 6 | -------------------------------------------------------------------------------- /img/circle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/circle.jpg -------------------------------------------------------------------------------- /img/origin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/origin.jpg -------------------------------------------------------------------------------- /img/pixels.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/pixels.jpg -------------------------------------------------------------------------------- /img/shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/shadow.png -------------------------------------------------------------------------------- /img/horizontal.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/horizontal.gif -------------------------------------------------------------------------------- /img/multline.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/multline.jpg -------------------------------------------------------------------------------- /img/plankton.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/plankton.jpg -------------------------------------------------------------------------------- /img/position.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/position.jpg -------------------------------------------------------------------------------- /img/triangle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/triangle.jpg -------------------------------------------------------------------------------- /img/vertical.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/vertical.gif -------------------------------------------------------------------------------- /test/img/magic.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/test/img/magic.gif -------------------------------------------------------------------------------- /test/img/unicorn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/test/img/unicorn.png -------------------------------------------------------------------------------- /img/multiple-pixels.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/img/multiple-pixels.jpg -------------------------------------------------------------------------------- /demo/assets/img/share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/demo/assets/img/share.png -------------------------------------------------------------------------------- /demo/assets/icons/favicon-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/da-vinci-css/HEAD/demo/assets/icons/favicon-32.png -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - stable 4 | 5 | before_install: 6 | - npm install -g grunt-cli 7 | 8 | script: 9 | - grunt lint 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # http://editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | indent_style = space 9 | indent_size = 2 10 | end_of_line = lf 11 | charset = utf-8 12 | trim_trailing_whitespace = true 13 | insert_final_newline = true 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "da-vinci-css", 3 | "version": "0.4.0", 4 | "description": "Creating shapes and drawings with CSS.", 5 | "license": "MIT", 6 | "author": { 7 | "name": "Afonso Pacifer", 8 | "email": "afonsopacifer@live.com", 9 | "url": "http://afonsopacifer.com" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/afonsopacifer/da-vinci-css" 14 | }, 15 | "keywords": [ 16 | "drawing", 17 | "css", 18 | "stylus" 19 | ], 20 | "devDependencies": { 21 | "autoprefixer-core": "^5.2.0", 22 | "backstopjs": "^1.2.1", 23 | "grunt": "^0.4.5", 24 | "grunt-contrib-connect": "^0.8.0", 25 | "grunt-contrib-stylus": "^0.20.0", 26 | "grunt-contrib-watch": "^0.6.1", 27 | "grunt-gh-pages": "^0.10.0", 28 | "grunt-postcss": "^0.4.0", 29 | "grunt-stylint": "^0.1.2", 30 | "stylus": "^0.50.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /demo/assets/stylus/style.styl: -------------------------------------------------------------------------------- 1 | // Da Vinci CSS 2 | @import "../../../da-vinci" 3 | 4 | // Demos 5 | @import "../../plankton" 6 | 7 | /* Colors 8 | _____________________________________________________ */ 9 | highlight = #eb02dd 10 | 11 | * 12 | box-sizing border-box 13 | 14 | body 15 | font-family 'Roboto', sans-serif 16 | font-weight 300 17 | background-color #eee 18 | color #595959 19 | 20 | .main 21 | width 100% 22 | padding 30px 23 | 24 | .demo 25 | background #fff 26 | display inline-block 27 | padding 15px 28 | 29 | .demo h2 30 | margin 0 0 15px 0 31 | 32 | .link 33 | color highlight 34 | text-decoration none 35 | font-weight 300 36 | padding 10px 0 37 | display inline-block 38 | 39 | .link-btn 40 | background highlight 41 | color #fff 42 | text-decoration none 43 | font-weight 300 44 | padding 5px 10px 45 | display inline-block 46 | transition opacity .3 47 | 48 | .link-btn:hover 49 | opacity .8 50 | 51 | .link:hover 52 | text-decoration underline 53 | -------------------------------------------------------------------------------- /.stylintrc: -------------------------------------------------------------------------------- 1 | { 2 | "blocks": false, 3 | "brackets": "never", 4 | "colons": "never", 5 | "colors": "always", 6 | "commaSpace": "always", 7 | "commentSpace": "always", 8 | "cssLiteral": "never", 9 | "depthLimit": false, 10 | "duplicates": true, 11 | "efficient": "always", 12 | "extendPref": false, 13 | "globalDupe": false, 14 | "indentPref": false, 15 | "leadingZero": "never", 16 | "maxErrors": false, 17 | "maxWarnings": false, 18 | "mixed": false, 19 | "namingConvention": false, 20 | "namingConventionStrict": false, 21 | "none": "never", 22 | "noImportant": true, 23 | "parenSpace": false, 24 | "placeholders": "always", 25 | "prefixVarsWithDollar": "always", 26 | "quotePref": false, 27 | "semicolons": "never", 28 | "sortOrder": "alphabetical", 29 | "stackedProperties": "never", 30 | "trailingWhitespace": "never", 31 | "universal": false, 32 | "valid": true, 33 | "zeroUnits": "never", 34 | "zIndexNormalize": false 35 | } 36 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | 1. Fork it! 4 | 5 | 2. Create your feature branch: 6 | ```sh 7 | $ git checkout -b my-new-feature 8 | ``` 9 | 10 | 3. Install all dependencies: 11 | ```sh 12 | $ npm install 13 | ``` 14 | 15 | 4. Create the references to the regression test: 16 | ```sh 17 | $ cd node_modules/backstopjs 18 | $ npm run reference 19 | $ cd ../.. 20 | ``` 21 | 5. Create your feature: 22 |

23 | ![magic](img/magic.gif) 24 | 25 | 6. Run lint process: 26 | ``` 27 | $ grunt lint 28 | ``` 29 | 7. Run the regression test: 30 | ```sh 31 | $ cd node_modules/backstopjs 32 | $ npm run test 33 | $ cd ../.. 34 | ``` 35 | 8. Write your visual regression test **(Not mandatory)** 36 | 37 | 9. Commit your changes: 38 | ``` 39 | $ git commit -m 'Add some feature' 40 | ``` 41 | 42 | 10. Push to the branch: 43 | ``` 44 | $ git push origin my-new-feature 45 | ``` 46 | 47 | 11. Submit a pull request 48 | 49 | **PS:** *After your pull request is merged, you can safely delete your branch.* 50 | 51 | ### [<-- Back](https://github.com/afonsopacifer/da-vinci-css/) 52 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016 Afonso Pacifer, [afonsopacifer.com](http://afonsopacifer.com/) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /backstop.json: -------------------------------------------------------------------------------- 1 | { 2 | "viewports": [ 3 | { 4 | "name": "default", 5 | "width": 1200, 6 | "height": 480 7 | } 8 | ], 9 | "scenarios": [ 10 | { 11 | "label": "Da Vinci CSS", 12 | "url": "../../test/index.html", 13 | "hideSelectors": [], 14 | "removeSelectors": [ 15 | ], 16 | "selectors": [ 17 | ".test-rect", 18 | ".test-circ", 19 | ".test-oval", 20 | ".test-tri", 21 | ".test-grid", 22 | ".test-origin", 23 | ".test-pixel", 24 | ".test-line", 25 | ".test-lineX", 26 | ".test-lineY", 27 | ".test-all", 28 | ".test-img", 29 | ".test-pos", 30 | ".test-flip-vertical", 31 | ".test-flip-horizontal", 32 | ".test-clone", 33 | ".test-shadow" 34 | ], 35 | "readyEvent": null, 36 | "delay": 0, 37 | "onBeforeScript": null, 38 | "onReadyScript": null 39 | } 40 | ], 41 | "paths": { 42 | "bitmaps_reference": "../../backstop_data/bitmaps_reference", 43 | "bitmaps_test": "../../backstop_data/bitmaps_test", 44 | "compare_data": "../../backstop_data/bitmaps_test/compare.json", 45 | "casper_scripts": "../../backstop_data/casper_scripts" 46 | }, 47 | "engine": "phantomjs", 48 | "report": ["CLI", "browser"], 49 | "cliExitOnFail": false, 50 | "casperFlags": [], 51 | "debug": false, 52 | "port": 3001 53 | } 54 | -------------------------------------------------------------------------------- /test/style.styl: -------------------------------------------------------------------------------- 1 | // Da Vinci CSS 2 | @import "../da-vinci" 3 | 4 | /* Colors 5 | _____________________________________________________ */ 6 | highlight = #eb02dd 7 | 8 | * 9 | box-sizing border-box 10 | 11 | body 12 | background-color #eee 13 | 14 | .main 15 | width 100% 16 | margin 0 auto 17 | max-width 1200px 18 | 19 | .section 20 | display flex 21 | flex-wrap wrap 22 | 23 | .section-title 24 | width 100% 25 | color highlight 26 | border-bottom 3px solid highlight 27 | padding-bottom 5px 28 | 29 | .demo 30 | background #fff 31 | padding 5px 32 | margin 5px 33 | width 230px 34 | position relative 35 | 36 | .demo-title 37 | margin 0 0 15px 0 38 | border-bottom 3px solid #eee 39 | padding-bottom 5px 40 | 41 | .test-pos 42 | position relative 43 | width 220px 44 | height 200px 45 | 46 | /* Basic shapes 47 | ------------------------------------------------ */ 48 | 49 | //rect 50 | .rect 51 | rect(100px, 100px, highlight) 52 | 53 | //circ 54 | .circ 55 | circ(50px, highlight) 56 | 57 | //oval 58 | .oval 59 | oval(100px, 70px, highlight) 60 | 61 | //tri 62 | .tri 63 | tri(100px, 50px, 50px,highlight) 64 | 65 | /* Pixel Art 66 | ------------------------------------------------ */ 67 | 68 | //grid 69 | .grid 70 | grid(30px, 6, #000) 71 | 72 | //origin 73 | .origin 74 | origin(1,1,30px,#000) 75 | 76 | //pixel 77 | .pixel 78 | origin(1,1,30px,#000) 79 | box-shadow: pixel(2,2,30px,#000); 80 | 81 | //line 82 | .line 83 | origin(1,1,30px,#000) 84 | box-shadow: line(2..6,30px,highlight); 85 | 86 | //lineX 87 | .lineX 88 | origin(1,1,30px,#000) 89 | box-shadow: lineX(2..6,30px,highlight); 90 | 91 | //lineY 92 | .lineY 93 | origin(1,1,30px,#000) 94 | box-shadow: lineY(2..6,30px,highlight); 95 | 96 | //all 97 | .all 98 | a = 30px 99 | origin(1, 1, a, #eb02dd) 100 | box-shadow: 101 | pixel(3, 4, a, #eb02dd), 102 | line(2..6, a, purple), 103 | lineY(2..6, a, pink), 104 | lineX(2..6, a, pink); 105 | 106 | /* Images 107 | ------------------------------------------------ */ 108 | 109 | //img 110 | .img 111 | img("img/magic.gif", 200px, 200px) 112 | 113 | /* Edit 114 | ------------------------------------------------ */ 115 | 116 | //pos 117 | .pos 118 | rect(100px, 50px, #eb02dd) 119 | pos(50px, 50px, 1) 120 | 121 | //flip vertival 122 | .flip-vertical 123 | img("img/magic.gif", 200px, 200px) 124 | flip(vertical) 125 | 126 | //flip horizontal 127 | .flip-horizontal 128 | img("img/magic.gif", 200px, 200px) 129 | flip(horizontal) 130 | 131 | //clone 132 | .clone 133 | rect(100px, 100px, #eb02dd) 134 | clone(110px, 0, #ccc) 135 | 136 | //shadow 137 | .shadow 138 | img("img/unicorn.png", 200px, 200px) 139 | shadow(5px, 5px, 5px, #000) 140 | -------------------------------------------------------------------------------- /demo/assets/css/style.css: -------------------------------------------------------------------------------- 1 | .canvas{background:linear-gradient(to top,transparent 94%,#000 94%) repeat-x,linear-gradient(to bottom,transparent 94%,#000 94%),linear-gradient(to left,transparent 94%,#000 94%) repeat-y,linear-gradient(to right,transparent 94%,#000 94%);background-size:10px;height:170px;position:relative;width:170px}.plankton{background-color:#2c2e2d;height:10px;width:10px;box-shadow:10px 0 #2c2e2d,90px 0 #2c2e2d,100px 0 #2c2e2d,0 10px #2c2e2d,10px 10px #008543,20px 10px #2c2e2d,80px 10px #2c2e2d,90px 10px #008543,100px 10px #2c2e2d,10px 20px #2c2e2d,20px 20px #008543,30px 20px #2c2e2d,70px 20px #2c2e2d,80px 20px #008543,90px 20px #2c2e2d,20px 30px #2c2e2d,30px 30px #008543,40px 30px #2c2e2d,60px 30px #2c2e2d,70px 30px #008543,80px 30px #2c2e2d,20px 40px #2c2e2d,30px 40px #008543,40px 40px #2c2e2d,50px 40px #2c2e2d,60px 40px #2c2e2d,70px 40px #008543,80px 40px #2c2e2d,30px 50px #2c2e2d,40px 50px #008543,50px 50px #008543,60px 50px #008543,70px 50px #2c2e2d,20px 60px #2c2e2d,30px 60px #008543,40px 60px #008543,50px 60px #03ad55,60px 60px #03ad55,70px 60px #03ad55,80px 60px #2c2e2d,20px 70px #2c2e2d,30px 70px #008543,40px 70px #2c2e2d,50px 70px #2c2e2d,60px 70px #2c2e2d,70px 70px #03ad55,80px 70px #2c2e2d,20px 80px #2c2e2d,30px 80px #008543,40px 80px #fcd808,50px 80px #f9ff43,60px 80px #f9ff43,70px 80px #03ad55,80px 80px #2c2e2d,10px 90px #2c2e2d,20px 90px #008543,30px 90px #008543,40px 90px #fcd808,50px 90px #b02522,60px 90px #f9ff43,70px 90px #03ad55,80px 90px #03ad55,90px 90px #2c2e2d,0 100px #2c2e2d,10px 100px #008543,20px 100px #2c2e2d,30px 100px #008543,40px 100px #fcd808,50px 100px #fcd808,60px 100px #fcd808,70px 100px #03ad55,80px 100px #2c2e2d,90px 100px #03ad55,100px 100px #2c2e2d,0 110px #2c2e2d,10px 110px #008543,20px 110px #2c2e2d,30px 110px #008543,40px 110px #03ad55,50px 110px #03ad55,60px 110px #03ad55,70px 110px #03ad55,80px 110px #2c2e2d,90px 110px #03ad55,100px 110px #2c2e2d,10px 120px #2c2e2d,20px 120px #2c2e2d,30px 120px #008543,40px 120px #03ad55,50px 120px #03ad55,60px 120px #03ad55,70px 120px #03ad55,80px 120px #2c2e2d,90px 120px #2c2e2d,20px 130px #2c2e2d,30px 130px #008543,40px 130px #008543,50px 130px #03ad55,60px 130px #03ad55,70px 130px #03ad55,80px 130px #2c2e2d,30px 140px #2c2e2d,40px 140px #008543,50px 140px #008543,60px 140px #008543,70px 140px #2c2e2d,20px 150px #2c2e2d,30px 150px #008543,40px 150px #2c2e2d,50px 150px #2c2e2d,60px 150px #2c2e2d,70px 150px #008543,80px 150px #2c2e2d,20px 160px #2c2e2d,30px 160px #2c2e2d,40px 160px #2c2e2d,60px 160px #2c2e2d,70px 160px #2c2e2d,80px 160px #2c2e2d}*{box-sizing:border-box}body{font-family:'Roboto',sans-serif;font-weight:300;background-color:#eee;color:#595959}.main{width:100%;padding:30px}.demo{background:#fff;display:inline-block;padding:15px}.demo h2{margin:0 0 15px 0}.link{color:#eb02dd;text-decoration:none;font-weight:300;padding:10px 0;display:inline-block}.link-btn{background:#eb02dd;color:#fff;text-decoration:none;font-weight:300;padding:5px 10px;display:inline-block;transition:opacity .3}.link-btn:hover{opacity:.8}.link:hover{text-decoration:underline} -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function( grunt ) { 2 | 3 | "use strict" 4 | 5 | grunt.initConfig({ 6 | 7 | pkg: grunt.file.readJSON('package.json'), 8 | 9 | // watch 10 | watch: { 11 | 12 | html: { 13 | files: 'demo/*.html', 14 | }, 15 | 16 | styl: { 17 | files: ['demo/assets/stylus/*.styl', 'da-vinci.styl'], 18 | tasks: ['stylus:compile','stylint'], 19 | }, 20 | 21 | test: { 22 | files: ['test/*.styl'], 23 | tasks: ['stylus:test','autoprefixer'], 24 | }, 25 | 26 | css: { 27 | files: 'demo/assets/css/*.css', 28 | }, 29 | 30 | options: { 31 | livereload: true 32 | } 33 | 34 | }, 35 | 36 | // stylus 37 | stylus: { 38 | options: { 39 | compress: true, 40 | }, 41 | compile: { 42 | files: { 43 | 'demo/assets/css/style.css':'demo/assets/stylus/style.styl' // 1:1 compile 44 | } 45 | }, 46 | test: { 47 | files: { 48 | 'test/style.css':'test/style.styl' // 1:1 compile 49 | } 50 | } 51 | }, 52 | 53 | stylint: { 54 | src: ['da-vinci.styl'] 55 | }, 56 | 57 | //Post CSS for autoprefixer :) 58 | postcss: { 59 | options: { 60 | cascade: false, 61 | map: true, 62 | processors: [ 63 | require('autoprefixer-core')({browsers: 'last 2 version, ie >= 9'}) 64 | ] 65 | }, 66 | dist: { 67 | src: ['test/*.css'] 68 | } 69 | }, 70 | 71 | //Deploy the production files for gh-pages 72 | 'gh-pages': { 73 | options: { 74 | base: 'demo/' 75 | }, 76 | src: ['**'] 77 | }, 78 | 79 | // connect 80 | connect: { 81 | 82 | demo: { 83 | options: { 84 | port: 9000, 85 | base: "demo/", 86 | hostname: "localhost", 87 | livereload: true, 88 | open: true 89 | } 90 | }, 91 | test: { 92 | options: { 93 | port: 9000, 94 | base: "test/", 95 | hostname: "localhost", 96 | livereload: true, 97 | open: true 98 | } 99 | } 100 | 101 | } 102 | 103 | }); 104 | 105 | // plugins 106 | grunt.loadNpmTasks('grunt-contrib-stylus'); 107 | grunt.loadNpmTasks('grunt-contrib-watch'); 108 | grunt.loadNpmTasks('grunt-contrib-connect'); 109 | grunt.loadNpmTasks('grunt-gh-pages'); 110 | grunt.loadNpmTasks('grunt-postcss'); 111 | grunt.loadNpmTasks('grunt-stylint'); 112 | 113 | // tasks demo 114 | grunt.registerTask( 'serve', ['connect:demo','watch']); 115 | grunt.registerTask( 'deploy', ['gh-pages']); 116 | 117 | // tasks test 118 | grunt.registerTask( 'lint', ['stylint']); 119 | grunt.registerTask( 'create-test', ['connect:test','watch']); 120 | grunt.registerTask( 'autoprefixer', ['postcss']); 121 | }; 122 | -------------------------------------------------------------------------------- /da-vinci.styl: -------------------------------------------------------------------------------- 1 | /* 2 | Da Vinci CSS 3 | Platform: Stylus 4 | 5 | Original repository: 6 | https://github.com/afonsopacifer/da-vinci-css 7 | Author: 8 | Afonso Pacifer (afonsopacifer.com) 9 | Version: 0.4.0 10 | Licence: 11 | MIT - https://github.com/afonsopacifer/da-vinci-css/blob/master/licence.md 12 | */ 13 | 14 | /* Basic shapes 15 | ------------------------------------------------ */ 16 | 17 | // rectangle 18 | rect($w, $h, $c = #eb02dd) 19 | background-color $c 20 | height $h 21 | width $w 22 | 23 | // circle 24 | circ($r, $c = #eb02dd) 25 | background-color $c 26 | border-radius 50% 27 | height $r * 2 28 | width $r * 2 29 | 30 | // oval 31 | oval($w, $h, $c = #eb02dd) 32 | background-color $c 33 | border-radius 50% 34 | height $h 35 | width $w 36 | 37 | // triangle 38 | tri($t, $l, $r, $c = #eb02dd) 39 | border-bottom $t solid $c 40 | border-left $l solid transparent 41 | border-right $r solid transparent 42 | height 0 43 | width 0 44 | 45 | /* Pixel Art 46 | ------------------------------------------------ */ 47 | 48 | // grid 49 | grid($cell-size, $grid-size = 4, $stroke-color = #000) 50 | background linear-gradient(to top, transparent 94%, $stroke-color 94%) repeat-x, linear-gradient(to bottom, transparent 94%, $stroke-color 94%), linear-gradient(to left, transparent 94%, $stroke-color 94%) repeat-y, linear-gradient(to right, transparent 94%, $stroke-color 94%) 51 | background-size $cell-size 52 | height $cell-size * $grid-size 53 | position relative 54 | width $cell-size * $grid-size 55 | 56 | // origin 57 | origin($r, $cl, $s, $c = #000) 58 | background-color $c 59 | height $s 60 | left $s * ($r - 1) 61 | position absolute 62 | top $s * ($cl - 1) 63 | width $s 64 | 65 | // pixel 66 | pixel($r, $cl, $s, $c = #000) 67 | ($s * ($cl - 1)) ($s * ($r - 1)) $c 68 | 69 | p($r, $cl, $s, $c = #000) 70 | ($s * ($cl - 1)) ($s * ($r - 1)) $c 71 | 72 | // line 73 | line($range, $s, $c = #000) 74 | $pixels = '0 0 #000' 75 | for $n in $range 76 | $pixels += ', ' + ($n - 1)*$s + ' ' + ($n - 1)*$s + ' ' 77 | $pixels += $c 78 | return unquote($pixels) 79 | 80 | // lineX 81 | lineX($range, $s, $c = #000) 82 | $pixels = '0 0 #000' 83 | for $n in $range 84 | $pixels += ', ' + ($n - 1)*$s + ' ' + 0 + ' ' 85 | $pixels += $c 86 | return unquote($pixels) 87 | 88 | // lineY 89 | lineY($range, $s, $c = #000) 90 | $pixels = '0 0 #000' 91 | for $n in $range 92 | $pixels += ', ' + 0 + ' ' + ($n - 1)*$s + ' ' 93 | $pixels += $c 94 | return unquote($pixels) 95 | 96 | /* Images 97 | ------------------------------------------------ */ 98 | 99 | // img 100 | img($url, $w, $h) 101 | background-image url($url) 102 | background-repeat no-repeat 103 | background-size $w $h 104 | height $h 105 | width $w 106 | 107 | /* Edit 108 | ------------------------------------------------ */ 109 | 110 | // position 111 | pos($x, $y, $z = 1) 112 | left $y 113 | position absolute 114 | top $x 115 | z-index $z 116 | 117 | // flip 118 | flip($x = horizontal) 119 | if $x == "horizontal" 120 | transform rotateY(180deg) 121 | if $x == "vertical" 122 | transform rotateX(180deg) 123 | 124 | // clone 125 | clone($x, $y, $c = #eb02dd) 126 | box-shadow $x $y $c 127 | 128 | // shadow 129 | shadow($x, $y, $dissipation, $c = #eb02dd) 130 | filter drop-shadow($x $y $dissipation $c) 131 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Da Vinci CSS Gallery 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 |

Sheldon J. Plankton

43 |
44 |
45 |
46 |

47 | By: Da Vinci CSS - V 0.2.0
48 | View code 49 |

50 |
51 | 52 |
53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /demo/plankton.styl: -------------------------------------------------------------------------------- 1 | /* 2 | Plankton demo 3 | Author: Afonso Pacifer (afonsopacifer.com) 4 | 5 | Da Vinci CSS 6 | Version: 0.2.0 7 | */ 8 | 9 | /* 10 | Markup: 11 | 12 |
13 |
14 |
15 | */ 16 | 17 | .canvas 18 | grid(10px, 17, #000) 19 | 20 | .plankton 21 | $s = 10px 22 | $stroke = #2c2e2d 23 | $body = #03ad55 24 | $body-shadow = #008543 25 | $eye = #f9ff43 26 | $eye-shadow = #fcd808 27 | $iris = #b02522 28 | 29 | rect($s, $s, $stroke) 30 | 31 | box-shadow: 32 | p(1, 2, $s, $stroke), 33 | p(1, 10, $s, $stroke), 34 | p(1, 11, $s, $stroke), 35 | 36 | p(2, 1, $s, $stroke), 37 | p(2, 2, $s, $body-shadow), 38 | p(2, 3, $s, $stroke), 39 | p(2, 9, $s, $stroke), 40 | p(2, 10, $s, $body-shadow), 41 | p(2, 11, $s, $stroke), 42 | 43 | p(3, 2, $s, $stroke), 44 | p(3, 3, $s, $body-shadow), 45 | p(3, 4, $s, $stroke), 46 | p(3, 8, $s, $stroke), 47 | p(3, 9, $s, $body-shadow), 48 | p(3, 10, $s, $stroke), 49 | 50 | p(4, 3, $s, $stroke), 51 | p(4, 4, $s, $body-shadow), 52 | p(4, 5, $s, $stroke), 53 | p(4, 7, $s, $stroke), 54 | p(4, 8, $s, $body-shadow), 55 | p(4, 9, $s, $stroke), 56 | 57 | p(5, 3, $s, $stroke), 58 | p(5, 4, $s, $body-shadow), 59 | p(5, 5, $s, $stroke), 60 | p(5, 6, $s, $stroke), 61 | p(5, 7, $s, $stroke), 62 | p(5, 8, $s, $body-shadow), 63 | p(5, 9, $s, $stroke), 64 | 65 | p(6, 4, $s, $stroke), 66 | p(6, 5, $s, $body-shadow), 67 | p(6, 6, $s, $body-shadow), 68 | p(6, 7, $s, $body-shadow), 69 | p(6, 8, $s, $stroke), 70 | 71 | p(7, 3, $s, $stroke), 72 | p(7, 4, $s, $body-shadow), 73 | p(7, 5, $s, $body-shadow), 74 | p(7, 6, $s, $body), 75 | p(7, 7, $s, $body), 76 | p(7, 8, $s, $body), 77 | p(7, 9, $s, $stroke), 78 | 79 | p(8, 3, $s, $stroke), 80 | p(8, 4, $s, $body-shadow), 81 | p(8, 5, $s, $stroke), 82 | p(8, 6, $s, $stroke), 83 | p(8, 7, $s, $stroke), 84 | p(8, 8, $s, $body), 85 | p(8, 9, $s, $stroke), 86 | 87 | p(9, 3, $s, $stroke), 88 | p(9, 4, $s, $body-shadow), 89 | p(9, 5, $s, $eye-shadow), 90 | p(9, 6, $s, $eye), 91 | p(9, 7, $s, $eye), 92 | p(9, 8, $s, $body), 93 | p(9, 9, $s, $stroke), 94 | 95 | p(10, 2, $s, $stroke), 96 | p(10, 3, $s, $body-shadow), 97 | p(10, 4, $s, $body-shadow), 98 | p(10, 5, $s, $eye-shadow), 99 | p(10, 6, $s, $iris), 100 | p(10, 7, $s, $eye), 101 | p(10, 8, $s, $body), 102 | p(10, 9, $s, $body), 103 | p(10, 10, $s, $stroke), 104 | 105 | p(11, 1, $s, $stroke), 106 | p(11, 2, $s, $body-shadow), 107 | p(11, 3, $s, $stroke), 108 | p(11, 4, $s, $body-shadow), 109 | p(11, 5, $s, $eye-shadow), 110 | p(11, 6, $s, $eye-shadow), 111 | p(11, 7, $s, $eye-shadow), 112 | p(11, 8, $s, $body), 113 | p(11, 9, $s, $stroke), 114 | p(11, 10, $s, $body), 115 | p(11, 11, $s, $stroke), 116 | 117 | p(12, 1, $s, $stroke), 118 | p(12, 2, $s, $body-shadow), 119 | p(12, 3, $s, $stroke), 120 | p(12, 4, $s, $body-shadow), 121 | p(12, 5, $s, $body), 122 | p(12, 6, $s, $body), 123 | p(12, 7, $s, $body), 124 | p(12, 8, $s, $body), 125 | p(12, 9, $s, $stroke), 126 | p(12, 10, $s, $body), 127 | p(12, 11, $s, $stroke), 128 | 129 | p(13, 2, $s, $stroke), 130 | p(13, 3, $s, $stroke), 131 | p(13, 4, $s, $body-shadow), 132 | p(13, 5, $s, $body), 133 | p(13, 6, $s, $body), 134 | p(13, 7, $s, $body), 135 | p(13, 8, $s, $body), 136 | p(13, 9, $s, $stroke), 137 | p(13, 10, $s, $stroke), 138 | 139 | p(14, 3, $s, $stroke), 140 | p(14, 4, $s, $body-shadow), 141 | p(14, 5, $s, $body-shadow), 142 | p(14, 6, $s, $body), 143 | p(14, 7, $s, $body), 144 | p(14, 8, $s, $body), 145 | p(14, 9, $s, $stroke), 146 | 147 | p(15, 4, $s, $stroke), 148 | p(15, 5, $s, $body-shadow), 149 | p(15, 6, $s, $body-shadow), 150 | p(15, 7, $s, $body-shadow), 151 | p(15, 8, $s, $stroke), 152 | 153 | p(16, 3, $s, $stroke), 154 | p(16, 4, $s, $body-shadow), 155 | p(16, 5, $s, $stroke), 156 | p(16, 6, $s, $stroke), 157 | p(16, 7, $s, $stroke), 158 | p(16, 8, $s, $body-shadow), 159 | p(16, 9, $s, $stroke), 160 | 161 | p(17, 3, $s, $stroke), 162 | p(17, 4, $s, $stroke), 163 | p(17, 5, $s, $stroke), 164 | p(17, 7, $s, $stroke), 165 | p(17, 8, $s, $stroke), 166 | p(17, 9, $s, $stroke); 167 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Test - Da Vinci CSS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 19 |
20 |

Basic Shapes

21 | 22 | 23 |
24 |

rectangle

25 | 26 |
27 |
28 |
29 | 30 |
31 | 32 | 33 |
34 |

circle

35 | 36 |
37 |
38 |
39 | 40 |
41 | 42 | 43 |
44 |

oval

45 | 46 |
47 |
48 |
49 | 50 |
51 | 52 | 53 |
54 |

triangle

55 | 56 |
57 |
58 |
59 | 60 |
61 | 62 |
63 | 64 | 66 |
67 |

Pixel Art

68 | 69 | 70 |
71 |

grid

72 | 73 |
74 |
75 |
76 | 77 |
78 | 79 | 80 |
81 |

origin

82 | 83 |
84 |
85 |
86 |
87 |
88 | 89 |
90 | 91 | 92 |
93 |

pixel

94 | 95 |
96 |
97 |
98 |
99 |
100 | 101 |
102 | 103 | 104 |
105 |

line

106 | 107 |
108 |
109 |
110 |
111 |
112 | 113 |
114 | 115 | 116 |
117 |

lineX

118 | 119 |
120 |
121 |
122 |
123 |
124 | 125 |
126 | 127 | 128 |
129 |

lineY

130 | 131 |
132 |
133 |
134 |
135 |
136 | 137 |
138 | 139 | 140 |
141 |

all

142 | 143 |
144 |
145 |
146 |
147 |
148 | 149 |
150 | 151 |
152 | 153 | 155 |
156 |

Images

157 | 158 | 159 |
160 |

img

161 | 162 |
163 |
164 |
165 |
166 | 167 |
168 | 169 | 171 |
172 |

Edit

173 | 174 | 175 |
176 |

position

177 | 178 |
179 |
180 |
181 | 182 |
183 | 184 | 185 |
186 |

flip vertical

187 | 188 |
189 |
190 |
191 | 192 |
193 | 194 | 195 |
196 |

flip horizontal

197 | 198 |
199 |
200 |
201 | 202 |
203 | 204 | 205 |
206 |

clone

207 | 208 |
209 |
210 |
211 | 212 |
213 | 214 | 215 |
216 |

shadow

217 | 218 |
219 |
220 |
221 | 222 |
223 | 224 |
225 | 226 |
227 | 228 | 229 | 230 | 231 | 232 | 233 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![aurea](img/aurea.jpg) 2 | 3 | # Da Vinci CSS 4 | 5 | ![Build Status](https://travis-ci.org/afonsopacifer/da-vinci-css.svg?branch=master) 6 | ![Release v0.4.0](https://img.shields.io/badge/release-v0.4.0-f775ff.svg) 7 | 8 | > Creating shapes and drawings with CSS. 9 | 10 | #### Pixel Art demo 11 | 12 | ![Plankton](img/plankton.jpg) 13 | 14 | Sheldon J. Plankton - 15 | [View demo](http://afonsopacifer.github.io/da-vinci-css/) 16 | 17 | ## Summary 18 | - [Why?](#why) 19 | - [How to install?](#how-to-install) 20 | - [Usage](#usage) 21 | - [Basic shapes](#basic-shapes) 22 | - [rectangle](#rectangle) 23 | - [circle](#circle) 24 | - [oval](#oval) 25 | - [triangle](#triangle) 26 | - [Pixel Art](#pixel-art) 27 | - [markup](#markup) 28 | - [grid](#grid) 29 | - [origin](#origin) 30 | - [pixels](#pixels) 31 | - [line](#line) 32 | - [lineX](#linex) 33 | - [lineY](#liney) 34 | - [Images](#images) 35 | - [img](#img) 36 | - [Edit](#edit) 37 | - [position](#position) 38 | - [flip vertical](#flip-vertical) 39 | - [flip horizontal](#flip-horizontal) 40 | - [clone](#clone) 41 | - [shadow](#) 42 | - [Versioning](#versioning) 43 | - [Contributing](#contributing) 44 | - [History](#history) 45 | - [License](#license) 46 | 47 | ## Why? 48 | 49 | Because it's fun. 50 | 51 | ## How to install? 52 | 53 | > **Note:** To use the framework, you'll need to compile your style with the Stylus preprocessor using NodeJS, for more information see [NodeJS](https://nodejs.org/en/) and [Stylus](http://stylus-lang.com/). 54 | 55 | **Import** the library. 56 | 57 | ``` 58 | @import "da-vinci" 59 | ``` 60 | 61 | **Done** ;) 62 | 63 | ## Usage 64 | 65 | ### Basic shapes 66 | 67 | #### rectangle 68 | 69 | ```css 70 | .element 71 | rect(100px, 50px, #eb02dd) /* width, height, color (default #eb02dd) */ 72 | ``` 73 | 74 | ![rectangle](img/rect.jpg) 75 | 76 | #### circle 77 | 78 | ```css 79 | .element 80 | circ(50px, #eb02dd) /* radius, color (default = #eb02dd) */ 81 | ``` 82 | 83 | ![circle](img/circle.jpg) 84 | 85 | #### oval 86 | 87 | ```css 88 | .element 89 | oval(100px, 50px, #eb02dd) /* width, height, color (default = #eb02dd) */ 90 | ``` 91 | 92 | ![oval](img/oval.jpg) 93 | 94 | #### triangle 95 | 96 | ```css 97 | .element 98 | tri(100px, 50px, 50px, #eb02dd) /* top, right, left (default = #eb02dd) */ 99 | ``` 100 | 101 | ![triangle](img/triangle.jpg) 102 | 103 | ### Pixel art 104 | 105 | #### markup 106 | 107 | ```html 108 |
109 |
110 |
111 | ``` 112 | 113 | #### grid 114 | 115 | ```css 116 | .canvas { 117 | grid(30px, 4, #000) /* cell size, grid size (default = 4), stroke color (default = #000) */ 118 | } 119 | ``` 120 | 121 | ![grid](img/grid.jpg) 122 | 123 | #### origin 124 | 125 | ```css 126 | .art { 127 | origin(1, 1, 30px, #000) /* row, col, displacement, color (default = #000) */ 128 | } 129 | ``` 130 | 131 | ![origin](img/origin.jpg) 132 | 133 | #### pixels 134 | 135 | ```css 136 | .art { 137 | origin(1, 1, 30px, #000) 138 | box-shadow: pixel(2, 2, 30px, #000); /* row, col, displacement, color (default = #000) */ 139 | } 140 | ``` 141 | 142 | > **Tip:** Create variables and use p( ) > pixel( ). 143 | 144 | ```css 145 | .art { 146 | a = 30px 147 | origin(1, 1, a) 148 | box-shadow: p(2, 2, a); 149 | } 150 | ``` 151 | 152 | ![pixels](img/pixels.jpg) 153 | 154 | #### line 155 | 156 | ```css 157 | .art { 158 | a = 30px 159 | origin(1, 1, a) 160 | box-shadow: line(2..6, a, #eb02dd); /* start..end, displacement, color (default = #000) */ 161 | } 162 | ``` 163 | 164 | ![line](img/line.jpg) 165 | 166 | #### lineX 167 | 168 | ```css 169 | .art { 170 | a = 30px 171 | origin(1, 1, a) 172 | box-shadow: lineX(2..6, a, #eb02dd); /* start..end, displacement, color (default = #000) */ 173 | } 174 | ``` 175 | 176 | ![lineX](img/linex.jpg) 177 | 178 | #### lineY 179 | 180 | ```css 181 | .art { 182 | a = 30px 183 | origin(1, 1, a) 184 | box-shadow: lineY(2..6, a, #eb02dd); /* start..end, displacement, color (default = #000) */ 185 | } 186 | ``` 187 | 188 | ![lineY](img/liney.jpg) 189 | 190 | **Working all together** 191 | 192 | ```css 193 | .canvas { 194 | grid(30px, 6, #ccc) 195 | } 196 | 197 | .art { 198 | a = 30px 199 | origin(1, 1, a, #eb02dd) 200 | box-shadow: 201 | pixel(3, 4, a, #eb02dd), 202 | line(2..6, a, purple), 203 | lineY(2..6, a, pink), 204 | lineX(2..6, a, pink); 205 | } 206 | ``` 207 | 208 | ![lineY](img/multline.jpg) 209 | 210 | ### Images 211 | 212 | #### img 213 | 214 | ```css 215 | .picture 216 | img("magic.gif", 200px, 200px) /* url, width, height */ 217 | ``` 218 | 219 | ![magic](img/magic.gif) 220 | 221 | ### Edit 222 | 223 | #### position 224 | 225 | ```css 226 | .element 227 | rect(100px, 50px, #eb02dd) 228 | pos(10px, 10px, 1) /* x, y, layer(default = 1) */ 229 | ``` 230 | 231 | ![position](img/position.jpg) 232 | 233 | #### flip vertical 234 | 235 | ```css 236 | .picture 237 | img("magic.gif", 200px, 200px) 238 | flip(vertical) /* vertical or horizontal (default = horizontal) */ 239 | ``` 240 | 241 | ![vertical](img/vertical.gif) 242 | 243 | #### flip horizontal 244 | 245 | ```css 246 | .picture 247 | img("magic.gif", 200px, 200px) 248 | flip(horizontal) /* vertical or horizontal (default = horizontal) */ 249 | ``` 250 | 251 | ![horizontal](img/horizontal.gif) 252 | 253 | #### clone 254 | 255 | ```css 256 | .element 257 | rect(100px, 100px, #eb02dd) 258 | clone(110px, 0, #ccc) /* x, y, color (default = #eb02dd) */ 259 | ``` 260 | 261 | ![clone](img/clone.jpg) 262 | 263 | #### shadow 264 | 265 | ```css 266 | .picture 267 | img("unicorn.png", 200px, 200px) 268 | shadow(10px, 10px, 5px, #000) /*X, Y, dissipation, color (default = #000) */ 269 | ``` 270 | 271 | ![shadow](img/shadow.png) 272 | 273 | ## Versioning 274 | 275 | To keep better organization of releases we follow the [Semantic Versioning 2.0.0](http://semver.org/) guidelines. 276 | 277 | ## Contributing 278 | Find on our [roadmap](https://github.com/afonsopacifer/da-vinci-css/issues/1) the next steps of the project ;) 279 |
280 | Want to contribute? [Follow these recommendations](https://github.com/afonsopacifer/da-vinci-css/blob/master/CONTRIBUTING.md). 281 | 282 | ## History 283 | See [Releases](https://github.com/afonsopacifer/da-vinci-css/releases) for detailed changelog. 284 | 285 | ## License 286 | [MIT License](https://github.com/afonsopacifer/da-vinci-css/blob/master/LICENSE.md) © [Afonso Pacifer](http://afonsopacifer.com/) 287 | -------------------------------------------------------------------------------- /test/style.css: -------------------------------------------------------------------------------- 1 | *{box-sizing:border-box}body{background-color:#eee}.main{width:100%;margin:0 auto;max-width:1200px}.section{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.section-title{width:100%;color:#eb02dd;border-bottom:3px solid #eb02dd;padding-bottom:5px}.demo{background:#fff;padding:5px;margin:5px;width:230px;position:relative}.demo-title{margin:0 0 15px 0;border-bottom:3px solid #eee;padding-bottom:5px}.test-pos{position:relative;width:220px;height:200px}.rect{background-color:#eb02dd;height:100px;width:100px}.circ{background-color:#eb02dd;border-radius:50%;height:100px;width:100px}.oval{background-color:#eb02dd;border-radius:50%;height:70px;width:100px}.tri{border-bottom:100px solid #eb02dd;border-left:50px solid transparent;border-right:50px solid transparent;height:0;width:0}.grid{background:linear-gradient(to top,transparent 94%,#000 94%) repeat-x,linear-gradient(to bottom,transparent 94%,#000 94%),linear-gradient(to left,transparent 94%,#000 94%) repeat-y,linear-gradient(to right,transparent 94%,#000 94%);background-size:30px;height:180px;position:relative;width:180px}.origin{background-color:#000;height:30px;left:0;position:absolute;top:0;width:30px}.pixel{background-color:#000;height:30px;left:0;position:absolute;top:0;width:30px;box-shadow:30px 30px #000}.line{background-color:#000;height:30px;left:0;position:absolute;top:0;width:30px;box-shadow:0 0 #000, 30px 30px #eb02dd, 60px 60px #eb02dd, 90px 90px #eb02dd, 120px 120px #eb02dd, 150px 150px #eb02dd}.lineX{background-color:#000;height:30px;left:0;position:absolute;top:0;width:30px;box-shadow:0 0 #000, 30px 0 #eb02dd, 60px 0 #eb02dd, 90px 0 #eb02dd, 120px 0 #eb02dd, 150px 0 #eb02dd}.lineY{background-color:#000;height:30px;left:0;position:absolute;top:0;width:30px;box-shadow:0 0 #000, 0 30px #eb02dd, 0 60px #eb02dd, 0 90px #eb02dd, 0 120px #eb02dd, 0 150px #eb02dd}.all{background-color:#eb02dd;height:30px;left:0;position:absolute;top:0;width:30px;box-shadow:90px 60px #eb02dd,0 0 #000, 30px 30px #800080, 60px 60px #800080, 90px 90px #800080, 120px 120px #800080, 150px 150px #800080,0 0 #000, 0 30px #ffc0cb, 0 60px #ffc0cb, 0 90px #ffc0cb, 0 120px #ffc0cb, 0 150px #ffc0cb,0 0 #000, 30px 0 #ffc0cb, 60px 0 #ffc0cb, 90px 0 #ffc0cb, 120px 0 #ffc0cb, 150px 0 #ffc0cb}.img{background-image:url("img/magic.gif");background-repeat:no-repeat;background-size:200px 200px;height:200px;width:200px}.pos{background-color:#eb02dd;height:50px;width:100px;left:50px;position:absolute;top:50px;z-index:1}.flip-vertical{background-image:url("img/magic.gif");background-repeat:no-repeat;background-size:200px 200px;height:200px;width:200px;-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.flip-horizontal{background-image:url("img/magic.gif");background-repeat:no-repeat;background-size:200px 200px;height:200px;width:200px;-webkit-transform:rotateY(180deg);transform:rotateY(180deg);}.clone{background-color:#eb02dd;height:100px;width:100px;box-shadow:110px 0 #ccc}.shadow{background-image:url("img/unicorn.png");background-repeat:no-repeat;background-size:200px 200px;height:200px;width:200px;-webkit-filter:drop-shadow(5px 5px 5px #000);filter:drop-shadow(5px 5px 5px #000)} 2 | /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxFQUFFLHFCQUFxQixDQUFDLEtBQUsscUJBQXFCLENBQUMsTUFBTSxXQUFXLGNBQWMsZ0JBQWdCLENBQUMsU0FBUyxxQkFBYSxBQUFiLG9CQUFhLEFBQWIsYUFBYSx1QkFBYyxBQUFkLG1CQUFjLEFBQWQsY0FBYyxDQUFDLGVBQWUsV0FBVyxjQUFjLGdDQUFnQyxrQkFBa0IsQ0FBQyxNQUFNLGdCQUFnQixZQUFZLFdBQVcsWUFBWSxpQkFBaUIsQ0FBQyxZQUFZLGtCQUFrQiw2QkFBNkIsa0JBQWtCLENBQUMsVUFBVSxrQkFBa0IsWUFBWSxZQUFZLENBQUMsTUFBTSx5QkFBeUIsYUFBYSxXQUFXLENBQUMsTUFBTSx5QkFBeUIsa0JBQWtCLGFBQWEsV0FBVyxDQUFDLE1BQU0seUJBQXlCLGtCQUFrQixZQUFZLFdBQVcsQ0FBQyxLQUFLLGtDQUFrQyxtQ0FBbUMsb0NBQW9DLFNBQVMsT0FBTyxDQUFDLE1BQU0sdU9BQXVPLHFCQUFxQixhQUFhLGtCQUFrQixXQUFXLENBQUMsUUFBUSxzQkFBc0IsWUFBWSxPQUFPLGtCQUFrQixNQUFNLFVBQVUsQ0FBQyxPQUFPLHNCQUFzQixZQUFZLE9BQU8sa0JBQWtCLE1BQU0sV0FBVyx5QkFBeUIsQ0FBQyxNQUFNLHNCQUFzQixZQUFZLE9BQU8sa0JBQWtCLE1BQU0sV0FBVyxzSEFBc0gsQ0FBQyxPQUFPLHNCQUFzQixZQUFZLE9BQU8sa0JBQWtCLE1BQU0sV0FBVyxxR0FBcUcsQ0FBQyxPQUFPLHNCQUFzQixZQUFZLE9BQU8sa0JBQWtCLE1BQU0sV0FBVyxxR0FBcUcsQ0FBQyxLQUFLLHlCQUF5QixZQUFZLE9BQU8sa0JBQWtCLE1BQU0sV0FBVyw4VEFBOFQsQ0FBQyxLQUFLLHNDQUFzQyw0QkFBNEIsNEJBQTRCLGFBQWEsV0FBVyxDQUFDLEtBQUsseUJBQXlCLFlBQVksWUFBWSxVQUFVLGtCQUFrQixTQUFTLFNBQVMsQ0FBQyxlQUFlLHNDQUFzQyw0QkFBNEIsNEJBQTRCLGFBQWEsWUFBWSxrQ0FBeUIsQUFBekIseUJBQXlCLENBQUMsaUJBQWlCLHNDQUFzQyw0QkFBNEIsNEJBQTRCLGFBQWEsWUFBWSxrQ0FBMEIsQUFBMUIsMEJBQTBCLENBQUMsT0FBTyx5QkFBeUIsYUFBYSxZQUFZLHVCQUF1QixDQUFDLFFBQVEsd0NBQXdDLDRCQUE0Qiw0QkFBNEIsYUFBYSxZQUFZLDZDQUFvQyxBQUFwQyxvQ0FBb0MsQ0FBQyIsImZpbGUiOiJzdHlsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIqe2JveC1zaXppbmc6Ym9yZGVyLWJveH1ib2R5e2JhY2tncm91bmQtY29sb3I6I2VlZX0ubWFpbnt3aWR0aDoxMDAlO21hcmdpbjowIGF1dG87bWF4LXdpZHRoOjEyMDBweH0uc2VjdGlvbntkaXNwbGF5OmZsZXg7ZmxleC13cmFwOndyYXB9LnNlY3Rpb24tdGl0bGV7d2lkdGg6MTAwJTtjb2xvcjojZWIwMmRkO2JvcmRlci1ib3R0b206M3B4IHNvbGlkICNlYjAyZGQ7cGFkZGluZy1ib3R0b206NXB4fS5kZW1ve2JhY2tncm91bmQ6I2ZmZjtwYWRkaW5nOjVweDttYXJnaW46NXB4O3dpZHRoOjIzMHB4O3Bvc2l0aW9uOnJlbGF0aXZlfS5kZW1vLXRpdGxle21hcmdpbjowIDAgMTVweCAwO2JvcmRlci1ib3R0b206M3B4IHNvbGlkICNlZWU7cGFkZGluZy1ib3R0b206NXB4fS50ZXN0LXBvc3twb3NpdGlvbjpyZWxhdGl2ZTt3aWR0aDoyMjBweDtoZWlnaHQ6MjAwcHh9LnJlY3R7YmFja2dyb3VuZC1jb2xvcjojZWIwMmRkO2hlaWdodDoxMDBweDt3aWR0aDoxMDBweH0uY2lyY3tiYWNrZ3JvdW5kLWNvbG9yOiNlYjAyZGQ7Ym9yZGVyLXJhZGl1czo1MCU7aGVpZ2h0OjEwMHB4O3dpZHRoOjEwMHB4fS5vdmFse2JhY2tncm91bmQtY29sb3I6I2ViMDJkZDtib3JkZXItcmFkaXVzOjUwJTtoZWlnaHQ6NzBweDt3aWR0aDoxMDBweH0udHJpe2JvcmRlci1ib3R0b206MTAwcHggc29saWQgI2ViMDJkZDtib3JkZXItbGVmdDo1MHB4IHNvbGlkIHRyYW5zcGFyZW50O2JvcmRlci1yaWdodDo1MHB4IHNvbGlkIHRyYW5zcGFyZW50O2hlaWdodDowO3dpZHRoOjB9LmdyaWR7YmFja2dyb3VuZDpsaW5lYXItZ3JhZGllbnQodG8gdG9wLHRyYW5zcGFyZW50IDk0JSwjMDAwIDk0JSkgcmVwZWF0LXgsbGluZWFyLWdyYWRpZW50KHRvIGJvdHRvbSx0cmFuc3BhcmVudCA5NCUsIzAwMCA5NCUpLGxpbmVhci1ncmFkaWVudCh0byBsZWZ0LHRyYW5zcGFyZW50IDk0JSwjMDAwIDk0JSkgcmVwZWF0LXksbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LHRyYW5zcGFyZW50IDk0JSwjMDAwIDk0JSk7YmFja2dyb3VuZC1zaXplOjMwcHg7aGVpZ2h0OjE4MHB4O3Bvc2l0aW9uOnJlbGF0aXZlO3dpZHRoOjE4MHB4fS5vcmlnaW57YmFja2dyb3VuZC1jb2xvcjojMDAwO2hlaWdodDozMHB4O2xlZnQ6MDtwb3NpdGlvbjphYnNvbHV0ZTt0b3A6MDt3aWR0aDozMHB4fS5waXhlbHtiYWNrZ3JvdW5kLWNvbG9yOiMwMDA7aGVpZ2h0OjMwcHg7bGVmdDowO3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO3dpZHRoOjMwcHg7Ym94LXNoYWRvdzozMHB4IDMwcHggIzAwMH0ubGluZXtiYWNrZ3JvdW5kLWNvbG9yOiMwMDA7aGVpZ2h0OjMwcHg7bGVmdDowO3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO3dpZHRoOjMwcHg7Ym94LXNoYWRvdzowIDAgIzAwMCwgMzBweCAzMHB4ICNlYjAyZGQsIDYwcHggNjBweCAjZWIwMmRkLCA5MHB4IDkwcHggI2ViMDJkZCwgMTIwcHggMTIwcHggI2ViMDJkZCwgMTUwcHggMTUwcHggI2ViMDJkZH0ubGluZVh7YmFja2dyb3VuZC1jb2xvcjojMDAwO2hlaWdodDozMHB4O2xlZnQ6MDtwb3NpdGlvbjphYnNvbHV0ZTt0b3A6MDt3aWR0aDozMHB4O2JveC1zaGFkb3c6MCAwICMwMDAsIDMwcHggMCAjZWIwMmRkLCA2MHB4IDAgI2ViMDJkZCwgOTBweCAwICNlYjAyZGQsIDEyMHB4IDAgI2ViMDJkZCwgMTUwcHggMCAjZWIwMmRkfS5saW5lWXtiYWNrZ3JvdW5kLWNvbG9yOiMwMDA7aGVpZ2h0OjMwcHg7bGVmdDowO3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO3dpZHRoOjMwcHg7Ym94LXNoYWRvdzowIDAgIzAwMCwgMCAzMHB4ICNlYjAyZGQsIDAgNjBweCAjZWIwMmRkLCAwIDkwcHggI2ViMDJkZCwgMCAxMjBweCAjZWIwMmRkLCAwIDE1MHB4ICNlYjAyZGR9LmFsbHtiYWNrZ3JvdW5kLWNvbG9yOiNlYjAyZGQ7aGVpZ2h0OjMwcHg7bGVmdDowO3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO3dpZHRoOjMwcHg7Ym94LXNoYWRvdzo5MHB4IDYwcHggI2ViMDJkZCwwIDAgIzAwMCwgMzBweCAzMHB4ICM4MDAwODAsIDYwcHggNjBweCAjODAwMDgwLCA5MHB4IDkwcHggIzgwMDA4MCwgMTIwcHggMTIwcHggIzgwMDA4MCwgMTUwcHggMTUwcHggIzgwMDA4MCwwIDAgIzAwMCwgMCAzMHB4ICNmZmMwY2IsIDAgNjBweCAjZmZjMGNiLCAwIDkwcHggI2ZmYzBjYiwgMCAxMjBweCAjZmZjMGNiLCAwIDE1MHB4ICNmZmMwY2IsMCAwICMwMDAsIDMwcHggMCAjZmZjMGNiLCA2MHB4IDAgI2ZmYzBjYiwgOTBweCAwICNmZmMwY2IsIDEyMHB4IDAgI2ZmYzBjYiwgMTUwcHggMCAjZmZjMGNifS5pbWd7YmFja2dyb3VuZC1pbWFnZTp1cmwoXCJpbWcvbWFnaWMuZ2lmXCIpO2JhY2tncm91bmQtcmVwZWF0Om5vLXJlcGVhdDtiYWNrZ3JvdW5kLXNpemU6MjAwcHggMjAwcHg7aGVpZ2h0OjIwMHB4O3dpZHRoOjIwMHB4fS5wb3N7YmFja2dyb3VuZC1jb2xvcjojZWIwMmRkO2hlaWdodDo1MHB4O3dpZHRoOjEwMHB4O2xlZnQ6NTBweDtwb3NpdGlvbjphYnNvbHV0ZTt0b3A6NTBweDt6LWluZGV4OjF9LmZsaXAtdmVydGljYWx7YmFja2dyb3VuZC1pbWFnZTp1cmwoXCJpbWcvbWFnaWMuZ2lmXCIpO2JhY2tncm91bmQtcmVwZWF0Om5vLXJlcGVhdDtiYWNrZ3JvdW5kLXNpemU6MjAwcHggMjAwcHg7aGVpZ2h0OjIwMHB4O3dpZHRoOjIwMHB4O3RyYW5zZm9ybTpyb3RhdGVYKDE4MGRlZyl9LmZsaXAtaG9yaXpvbnRhbHtiYWNrZ3JvdW5kLWltYWdlOnVybChcImltZy9tYWdpYy5naWZcIik7YmFja2dyb3VuZC1yZXBlYXQ6bm8tcmVwZWF0O2JhY2tncm91bmQtc2l6ZToyMDBweCAyMDBweDtoZWlnaHQ6MjAwcHg7d2lkdGg6MjAwcHg7dHJhbnNmb3JtOnJvdGF0ZVkoMTgwZGVnKTt9LmNsb25le2JhY2tncm91bmQtY29sb3I6I2ViMDJkZDtoZWlnaHQ6MTAwcHg7d2lkdGg6MTAwcHg7Ym94LXNoYWRvdzoxMTBweCAwICNjY2N9LnNoYWRvd3tiYWNrZ3JvdW5kLWltYWdlOnVybChcImltZy91bmljb3JuLnBuZ1wiKTtiYWNrZ3JvdW5kLXJlcGVhdDpuby1yZXBlYXQ7YmFja2dyb3VuZC1zaXplOjIwMHB4IDIwMHB4O2hlaWdodDoyMDBweDt3aWR0aDoyMDBweDtmaWx0ZXI6ZHJvcC1zaGFkb3coNXB4IDVweCA1cHggIzAwMCl9Il19 */ --------------------------------------------------------------------------------