index.html
<!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
// 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();
