-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
111 lines (99 loc) · 3.97 KB
/
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>