index.html
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 |
<!DOCTYPE html> <html> <head> <title>CSS text-stroke generator (text-shadow hack)</title> <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="bower_components/seiyria-bootstrap-slider/dist/css/bootstrap-slider.min.css" rel="stylesheet"> <link href="bower_components/mjolnic-bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css" rel="stylesheet"> <style> @import url('http://fonts.googleapis.com/css?family=Open+Sans'); @import url('http://fonts.googleapis.com/css?family=Roboto'); @import url('http://fonts.googleapis.com/css?family=Oswald'); @import url('http://fonts.googleapis.com/css?family=Lato'); @import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro'); @import url('http://fonts.googleapis.com/css?family=PT+Sans'); @import url('http://fonts.googleapis.com/css?family=Droid+Sans'); @import url('http://fonts.googleapis.com/css?family=Raleway'); textarea#preview { width:100%; border:0; resize: none; text-align: center; display:inline-block; vertical-align: middle; outline: none; } textarea#code { width:100%; } </style> </head> <body> <div class="container"> <div class="page-header"> <h1>CSS text-stroke generator <small>(text-shadow hack)</small></h1> </div> <h2>Preview</h2> <div class="panel panel-default"> <div class="panel-body"> <textarea id="preview" rows="1">Hello world !</textarea> </div> </div> <h2>Settings</h2> <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">Font-family</label> <div class="col-sm-2"> <select id="fontFamily" class="form-control"> <optgroup label="Classics"> <option>Arial</option> <option>Calibri</option> <option>Helvetica</option> <option>Times</option> </optgroup> <optgroup label="Google fonts"> <option>Droid Sans</option> <option>Lato</option> <option>Open Sans</option> <option>Oswald</option> <option>PT Sans</option> <option>Raleway</option> <option>Roboto</option> <option>Source Sans Pro</option> </optgroup> </select> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Font-color</label> <div class="col-sm-2"> <input type="text" class="form-control" id="fontColor" value="#000000" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Font-size</label> <div class="col-sm-2"> <input id="fontSize" type="number" data-slider-min="0" data-slider-max="70" data-slider-step="1" data-slider-value="32"/> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Stroke-color</label> <div class="col-sm-2"> <input type="text" class="form-control" id="strokeColor" value="#2bbfff" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Stroke-size</label> <div class="col-sm-2"> <input id="strokeSize" type="number" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="3"/> </div> </div> </form> <h2>Code</h2> <pre></pre> <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js"></script> <script src="bower_components/mjolnic-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script> <script src="index.js"></script> </body> </html> |
index.js
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 |
// Sliders $('#fontSize, #strokeSize').slider({ formatter: function(value) { return value + 'px'; } }); $('#fontSize, #strokeSize').on('slide', function() { update(); }); // Colorpickers $('#fontColor, #strokeColor').colorpicker().on('changeColor', function() { update(); }); // Other $('#fontFamily').change(function() { update(); }); // Functions var update = function() { // get form values var fontFamily = $('#fontFamily').val(); var fontSize = $('#fontSize').slider('getValue'); var strokeSize = $('#strokeSize').slider('getValue'); var fontColor = $('#fontColor').val(); var strokeColor = $('#strokeColor').val(); // update css var $preview = $('#preview'); $preview.css('font-family', fontFamily); $preview.css('color', fontColor); $preview.css('font-size', fontSize); $preview.css('text-shadow', ''); for (var angle=0; angle<2*Math.PI; angle+=1/strokeSize) { appendShadow($preview, Math.cos(angle) * strokeSize, Math.sin(angle) * strokeSize, strokeColor); } // update code preview $('pre').html('text-shadow: ' + $preview.css('text-shadow') + ';'); } var appendShadow = function(item, x, y, col) { // compute new text-shadow property var textShadow = ''; if (item.css('text-shadow') !== 'none') { textShadow = item.css('text-shadow') + ', '; } textShadow = textShadow + x + 'px ' + y + 'px ' + col; // apply new text-shadow property item.css('text-shadow', textShadow); } update(); |