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>

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>

<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>

<h1>CSS text-stroke generator <small>(text-shadow hack)</small></h1>

</div>

<h2>Preview</h2>

<textarea id="preview" rows="1">Hello world !</textarea>

</div>

<h2>Settings</h2>

<label class="col-sm-2 control-label">Font-family</label>

<option>Arial</option>

<option>Calibri</option>

<option>Helvetica</option>

<option>Times</option>

</optgroup>

<option>Droid Sans</option>

<option>Oswald</option>

<option>Raleway</option>

<option>Roboto</option>

<option>Source Sans Pro</option>

</optgroup>

</select>

</div>

<label class="col-sm-2 control-label">Font-color</label>

</div>

</div>

<label class="col-sm-2 control-label">Stroke-color</label>

</div>

<label class="col-sm-2 control-label">Stroke-size</label>

</div>

</form>

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

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

Related posts:

You Might Also Like

Javascript Boostrap 4 Modal Popup CRUD Web App in Browser Using jQuery Full Project For Beginners

Node.js ytdl-core Example to Download Multiple Videos Using ProgressBar in Command Line Using Javascript Full Project For Beginners

Node.js Tutorial to Run PHP Script inside Browser Using HTTP Server & Child Process Module in Javascript

Leave a Reply Cancel reply