HalfStyle: Style Half of a Character by CSS

Sparked by the question “Is it possible to apply CSS to half of a character?” on StackOverflow, HalfStyle was created:

HalfStyle is a set of advanced CSS rules that allow styling each half or third of a character, vertically or horizontally, independently and individually.

Works on any dynamic text, or a single character, and is all automated. All you need to do is add a class on the target text and the rest is taken care of.

Uses CSS’ ::before and ::after to repeat the characters seen on screen. The key part – where the character is passed from the HTML to CSS – uses a data-* HTML attribute along with content: attr(data-nameoftheattribute); in CSS. Finally, some more CSS is used to only show half/a third of the orginal and overlaid characters.

The repository also ships with a jQuery plugin to automate the effect

HalfStyle: Style Half of a Character by CSS →
HalfStyle Demo (also embedded above)

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.