On GitHub http://github.com/arbelh/HalfStyle


For the automated mode, just add the class .textToHalfStyle and the data attribute data-halfstyle="[-CustomClassName-]" to the element containing the text. The included jQuery snippet will do the rest of the job.
You can have a look at the included demo.html file's source if you need to see example codes.


Base Solution

class: hs-base

Single Characters: (Pure CSS, no Javascript)

X Y Z A

Automated on any text: (Requires jQuery to automate the task)

Half-style, please.

Vertical Half

class: hs-vertical-half

Single Characters:

X Y Z A

Automated on any text:

Half-style, please.

Vertical 1/3

class: hs-vertical-third

Single Characters:

X Y Z A

Automated on any text:

Half-style, please.

Horizontal Half

class: hs-horizontal-half

Single Characters:

X Y Z A

Automated on any text:

Half-style, please.

Horizontal 1/3

class: hs-horizontal-third

Single Characters:

X Y Z A

Automated on any text:

Half-style, please.

PeelingStyle by user SamTremaine on StackOverflow.com
Also available on http://experimental.samtremaine.co.uk/half-style/

class: hs-PeelingStyle

Single Characters:

X Y Z A

Automated on any text:

Half-style, please.

KevinGranger - By user KevinGranger on StackOverflow.com
Reqires black background and an external font for the best looks, see a full demo at http://jsfiddle.net/Kevin_Granger/pd9yB/327/

class: hs-KevinGranger

Single Characters:

X Y Z A

Automated on any text:

Half-style, please.

On GitHub http://github.com/arbelh/HalfStyle