The 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.
For a single character:
All you need to do is add the classes .halfStyle with your own class.
For each element containing the character, a data attribute holds the character,
For Any text:
Simply add .textToHalfStyle class and data attribute data-halfstyle="[your class name]".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* start half-style hs-base */
.halfStyle.hs-base {
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
color: #000; /* for demo purposes */
}
.halfStyle.hs-base:before {
display:block;
z-index:1;
position:absolute;
top:0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
pointer-events: none; /* so the base char is selectable by mouse and the click handlers bound on it will fire */
overflow:hidden;
color: #f00; /* for demo purposes */
}
/* end half-style hs-base */
/* start half-style hs-vertical-half */
.halfStyle.hs-vertical-half {
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: transparent; /* hide the base character */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle.hs-vertical-half:before { /* creates the left part */
display:block;
z-index:1;
position:absolute;
top:0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse and the click handlers bound on it will fire */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle.hs-vertical-half:after { /* creates the right part */
display:block;
direction: rtl; /* very important, will make the width to start from right */
position:absolute;
z-index:2;
top:0;
left:50%;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse and the click handlers bound on it will fire */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
/* end half-style hs-vertical-half */
/* start half-style hs-vertical-third */
.halfStyle.hs-vertical-third {
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: transparent; /* hide the base character */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
color: #f0f; /* for demo purposes */
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
.halfStyle.hs-vertical-third:before { /* creates the left part */
display:block;
z-index:2;
position:absolute;
top:0;
width: 33.33%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle.hs-vertical-third:after { /* creates the right part */
display:block;
z-index:1;
position:absolute;
top:0;
width: 66.66%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}
/* end half-style hs-vertical-third */
/* start half-style hs-horizontal-half */
.halfStyle.hs-horizontal-half {
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: transparent; /* hide the base character */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle.hs-horizontal-half:before { /* creates the top part */
display:block;
z-index:2;
position:absolute;
top:0;
height: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle.hs-horizontal-half:after { /* creates the bottom part */
display:block;
position:absolute;
z-index:1;
top:0;
height: 100%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
/* end half-style hs-horizontal-half */
/* start half-style hs-horizontal-third */
.halfStyle.hs-horizontal-third { /* base char and also the bottom 1/3 */
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: transparent;
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
color: #f0f;
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
.halfStyle.hs-horizontal-third:before { /* creates the top 1/3 */
display:block;
z-index:2;
position:absolute;
top:0;
height: 33.33%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #fa0; /* for demo purposes */
}
.halfStyle.hs-horizontal-third:after { /* creates the middle 1/3 */
display:block;
position:absolute;
z-index:1;
top:0;
height: 66.66%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}
/* end half-style hs-horizontal-third */
/* start half-style hs-PeelingStyle, by user SamTremaine on Stackoverflow.com */
.halfStyle.hs-PeelingStyle {
position: relative;
display: inline-block;
font-size: 68px;
color: rgba(0, 0, 0, 0.8);
overflow: hidden;
white-space: pre;
transform: rotate(4deg);
text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}
.halfStyle.hs-PeelingStyle:before { /* creates the left part */
display: block;
z-index: 1;
position: absolute;
top: -0.5px;
left: -3px;
width: 100%;
content: attr(data-content);
overflow: hidden;
pointer-events: none;
color: #FFF;
transform: rotate(-4deg);
text-shadow: 0px 0px 1px #000;
}
/* end half-style hs-PeelingStyle */
/* start half-style hs-KevinGranger, by user KevinGranger on StackOverflow.com*/
.textToHalfStyle.hs-KevinGranger {
display:block;
margin: 200px 0 0 0;
text-align:center;
}
.halfStyle.hs-KevinGranger {
font-family: 'Libre Baskerville', serif;
position:relative;
display:inline-block;
width:1;
font-size:70px;
color: black;
overflow:hidden;
white-space: pre;
text-shadow: 1px 2px 0 white;
}
.halfStyle.hs-KevinGranger:before {
display:block;
z-index:1;
position:absolute;
top:0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
color: white;
}
/* end half-style hs-KevinGranger*/
</style>
<script src="https://raw.githubusercontent.com/arbelh/HalfStyle/master/js/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/arbelh/HalfStyle/master/js/halfstyle.js" type="text/javascript" charset="utf-8" asyn defer></script>
</head>
<body>
<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>
</body>
</html>
0 Comment(s)