Style Half Or Third Of A Character Using jQuery And CSS - HalfStyle
File Size: | 8.73 KB |
---|---|
Views Total: | 83 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.