Style Half Or Third Of A Character Using jQuery And CSS - HalfStyle

HalfStyle is a lightweight jQuery/CSS library to create creative and artistic text on your web pages. The library provides a set of CSS rules to style half or third of each character in your text, automatic or manual, vertical or horizontal.

See Also:

• Style Half of A Character Using jQuery and CSS - Splitchar.js
• jQuery Plugin To Split Text By Lines - SplitLines
• Powerful Web Typography Plugin For jQuery - Lettering.js

How to use it:

1. Load the HalfStyle plugin in the document.

<!-- Required -->
<link rel="stylesheet" href="css/halfstyle.css"/>

<!-- Only Required When Using Automated Mode -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="js/halfstyle.js" ></script>

2. Apply the HalfStyle to a single character (Pure CSS, no Javascript).

<!-- Basic -->
<span class="halfStyle hs-base" data-content="X">X</span>

<!-- Vertical Half -->
<span class="halfStyle hs-vertical-half" data-content="X">X</span>

<!-- Vertical 1/3 -->
<span class="halfStyle hs-vertical-third" data-content="X">X</span>

<!-- Horizontal Half -->
<span class="halfStyle hs-horizontal-half" data-content="X">X</span>

<!-- Horizontal 1/3 -->
<span class="halfStyle hs-horizontal-third" data-content="X">X</span>

<!-- PeelingStyle -->
<span class="halfStyle hs-PeelingStyle" data-content="X">X</span>

<!-- KevinGranger -->
<span class="halfStyle hs-KevinGranger" data-content="X">X</span> 

3. Apply the HalfStyle to each character in your text (requires jQuery). 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.

<!-- Basic -->
<span class="textToHalfStyle" data-halfstyle="hs-base">
  jQueryScript
</span>

<!-- Vertical Half -->
<span class="textToHalfStyle" data-halfstyle="hs-vertical-half">
  jQueryScript
</span>

<!-- Vertical 1/3 -->
<span class="textToHalfStyle" data-halfstyle="hs-vertical-third">
  jQueryScript
</span>

<!-- Horizontal Half -->
<span class="textToHalfStyle" data-halfstyle="hs-horizontal-half">
  jQueryScript
</span>

<!-- Horizontal 1/3 -->
<span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">
  jQueryScript
</span>

<!-- PeelingStyle -->
<span class="textToHalfStyle" data-halfstyle="hs-PeelingStyle">
  jQueryScript
</span>

<!-- KevinGranger -->
<span class="textToHalfStyle" data-halfstyle="hs-KevinGranger">
  jQueryScript
</span>

---

This awesome jQuery plugin is developed by arbelh. For more Advanced Usages, please check the demo page or visit the official website.