-
Notifications
You must be signed in to change notification settings - Fork 48
/
Copy pathdemo.html
105 lines (105 loc) · 4.88 KB
/
demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/halfstyle.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/halfstyle.js" ></script>
<title>HalfStyle - Style each half of a character, independently and individually.</title>
</head>
<body>
<p>
On GitHub <a href="http://github.com/arbelh/HalfStyle">http://github.com/arbelh/HalfStyle</a>
</p>
<hr/>
<p>
For the automated mode, just add the class <code>.textToHalfStyle</code> and the data attribute <code>data-halfstyle="[-CustomClassName-]"</code> to the element containing the text. The included jQuery snippet will do the rest of the job.
<br/>
You can have a look at the included demo.html file's source if you need to see example codes.
</p>
<hr/>
<h3>Base Solution</h3>
<h4>class: <code>hs-base</code></h4>
<p>Single Characters: (Pure CSS, no Javascript)</p>
<span class="halfStyle hs-base" data-content="X">X</span>
<span class="halfStyle hs-base" data-content="Y">Y</span>
<span class="halfStyle hs-base" data-content="Z">Z</span>
<span class="halfStyle hs-base" data-content="A">A</span>
<hr/>
<p>Automated on any text: (Requires jQuery to automate the task)</p>
<span class="textToHalfStyle" data-halfstyle="hs-base">Half-style, please.</span>
<hr/>
<h3>Vertical Half</h3>
<h4>class: <code>hs-vertical-half</code></h4>
<p>Single Characters:</p>
<span class="halfStyle hs-vertical-half" data-content="X">X</span>
<span class="halfStyle hs-vertical-half" data-content="Y">Y</span>
<span class="halfStyle hs-vertical-half" data-content="Z">Z</span>
<span class="halfStyle hs-vertical-half" data-content="A">A</span>
<hr/>
<p>Automated on any text:</p>
<span class="textToHalfStyle" data-halfstyle="hs-vertical-half">Half-style, please.</span>
<hr/>
<h3>Vertical 1/3</h3>
<h4>class: <code>hs-vertical-third</code></h4>
<p>Single Characters:</p>
<span class="halfStyle hs-vertical-third" data-content="X">X</span>
<span class="halfStyle hs-vertical-third" data-content="Y">Y</span>
<span class="halfStyle hs-vertical-third" data-content="Z">Z</span>
<span class="halfStyle hs-vertical-third" data-content="A">A</span>
<hr/>
<p>Automated on any text:</p>
<span class="textToHalfStyle" data-halfstyle="hs-vertical-third">Half-style, please.</span>
<hr/>
<h3>Horizontal Half</h3>
<h4>class: <code>hs-horizontal-half</code></h4>
<p>Single Characters:</p>
<span class="halfStyle hs-horizontal-half" data-content="X">X</span>
<span class="halfStyle hs-horizontal-half" data-content="Y">Y</span>
<span class="halfStyle hs-horizontal-half" data-content="Z">Z</span>
<span class="halfStyle hs-horizontal-half" data-content="A">A</span>
<hr/>
<p>Automated on any text:</p>
<span class="textToHalfStyle" data-halfstyle="hs-horizontal-half">Half-style, please.</span>
<hr/>
<h3>Horizontal 1/3</h3>
<h4>class: <code>hs-horizontal-third</code></h4>
<p>Single Characters:</p>
<span class="halfStyle hs-horizontal-third" data-content="X">X</span>
<span class="halfStyle hs-horizontal-third" data-content="Y">Y</span>
<span class="halfStyle hs-horizontal-third" data-content="Z">Z</span>
<span class="halfStyle hs-horizontal-third" data-content="A">A</span>
<hr/>
<p>Automated on any text:</p>
<span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">Half-style, please.</span>
<hr/>
<h3>PeelingStyle by user SamTremaine on StackOverflow.com
<br/>Also available on <a href="http://experimental.samtremaine.co.uk/half-style/">http://experimental.samtremaine.co.uk/half-style/</a></h3>
<h4>class: <code>hs-PeelingStyle</code></h4>
<p>Single Characters:</p>
<span class="halfStyle hs-PeelingStyle" data-content="X">X</span>
<span class="halfStyle hs-PeelingStyle" data-content="Y">Y</span>
<span class="halfStyle hs-PeelingStyle" data-content="Z">Z</span>
<span class="halfStyle hs-PeelingStyle" data-content="A">A</span>
<hr/>
<p>Automated on any text:</p>
<span class="textToHalfStyle" data-halfstyle="hs-PeelingStyle">Half-style, please.</span>
<hr/>
<h3>KevinGranger - By user KevinGranger on StackOverflow.com
<br/>Reqires black background and an external font for the best looks, see a full demo at <a href="http://jsfiddle.net/Kevin_Granger/pd9yB/327/">http://jsfiddle.net/Kevin_Granger/pd9yB/327/</a></h3>
<h4>class: <code>hs-KevinGranger</code></h4>
<div style="background-color:black">
<p>Single Characters:</p>
<span class="halfStyle hs-KevinGranger" data-content="X">X</span>
<span class="halfStyle hs-KevinGranger" data-content="Y">Y</span>
<span class="halfStyle hs-KevinGranger" data-content="Z">Z</span>
<span class="halfStyle hs-KevinGranger" data-content="A">A</span>
<hr/>
<p>Automated on any text:</p>
<span class="textToHalfStyle" data-halfstyle="hs-KevinGranger">Half-style, please.</span>
</div>
<p>
On GitHub <a href="http://github.com/arbelh/HalfStyle">http://github.com/arbelh/HalfStyle</a>
</p>
</body>
</html>