Build a CSS Text Stroke or Shadow Generator With Source Code in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

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();

Leave a Reply