Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Making a Text Half styled

    @sunil.chatterji
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 239
    Comment on it

    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]".

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Document</title>
    6.     <style>
    7.  /* start half-style hs-base */
    8.  .halfStyle.hs-base {
    9.     position:relative;
    10.     display:inline-block;
    11.     font-size:80px; /* or any font size will work */
    12.     overflow:hidden;
    13.     white-space: pre; /* to preserve the spaces from collapsing */
    14.     color: #000; /* for demo purposes */
    15. }
    16. .halfStyle.hs-base:before {
    17.     display:block;
    18.     z-index:1;
    19.     position:absolute;
    20.     top:0;
    21.     width: 50%;
    22.     content: attr(data-content); /* dynamic content for the pseudo element */
    23.     pointer-events: none; /* so the base char is selectable by mouse and the click handlers bound on it will fire */
    24.     overflow:hidden;
    25.     color: #f00; /* for demo purposes */
    26. }
    27.  /* end half-style hs-base */
    28.  
    29.  /* start half-style hs-vertical-half */
    30. .halfStyle.hs-vertical-half {
    31.     position:relative;
    32.     display:inline-block;
    33.     font-size:80px; /* or any font size will work */
    34.     color: transparent; /* hide the base character */
    35.     overflow:hidden;
    36.     white-space: pre; /* to preserve the spaces from collapsing */
    37. }
    38. .halfStyle.hs-vertical-half:before { /* creates the left part */
    39.     display:block;
    40.     z-index:1;
    41.     position:absolute;
    42.     top:0;
    43.     width: 50%;
    44.     content: attr(data-content); /* dynamic content for the pseudo element */
    45.     overflow:hidden;
    46.     pointer-events: none; /* so the base char is selectable by mouse and the click handlers bound on it will fire */
    47.     color: #f00; /* for demo purposes */
    48.     text-shadow: 2px -2px 0px #af0; /* for demo purposes */
    49. }
    50. .halfStyle.hs-vertical-half:after { /* creates the right part */
    51.     display:block;
    52.     direction: rtl; /* very important, will make the width to start from right */
    53.     position:absolute;
    54.     z-index:2;
    55.     top:0;
    56.     left:50%;
    57.     width: 50%;
    58.     content: attr(data-content); /* dynamic content for the pseudo element */
    59.     overflow:hidden;
    60.     pointer-events: none; /* so the base char is selectable by mouse and the click handlers bound on it will fire */
    61.     color: #000; /* for demo purposes */
    62.     text-shadow: 2px 2px 0px #0af; /* for demo purposes */
    63. }
    64. /* end half-style hs-vertical-half */
    65.  
    66. /* start half-style hs-vertical-third */
    67. .halfStyle.hs-vertical-third {
    68.     position:relative;
    69.     display:inline-block;
    70.     font-size:80px; /* or any font size will work */
    71.     color: transparent; /* hide the base character */
    72.     overflow:hidden;
    73.     white-space: pre; /* to preserve the spaces from collapsing */
    74.     color: #f0f; /* for demo purposes */
    75.     text-shadow: 2px 2px 0px #0af; /* for demo purposes */
    76. }
    77. .halfStyle.hs-vertical-third:before { /* creates the left part */
    78.     display:block;
    79.     z-index:2;
    80.     position:absolute;
    81.     top:0;
    82.     width: 33.33%;
    83.     content: attr(data-content); /* dynamic content for the pseudo element */
    84.     overflow:hidden;
    85.     pointer-events: none; /* so the base char is selectable by mouse */
    86.     color: #f00; /* for demo purposes */
    87.     text-shadow: 2px -2px 0px #af0; /* for demo purposes */
    88. }
    89. .halfStyle.hs-vertical-third:after { /* creates the right part */
    90.     display:block;
    91.     z-index:1;
    92.     position:absolute;
    93.     top:0;
    94.     width: 66.66%;
    95.     content: attr(data-content); /* dynamic content for the pseudo element */
    96.     overflow:hidden;
    97.     pointer-events: none; /* so the base char is selectable by mouse */
    98.     color: #000; /* for demo purposes */
    99.     text-shadow: 2px 2px 0px #af0; /* for demo purposes */
    100. }
    101. /* end half-style hs-vertical-third */
    102.  
    103. /* start half-style hs-horizontal-half */
    104. .halfStyle.hs-horizontal-half {
    105.     position:relative;
    106.     display:inline-block;
    107.     font-size:80px; /* or any font size will work */
    108.     color: transparent; /* hide the base character */
    109.     overflow:hidden;
    110.     white-space: pre; /* to preserve the spaces from collapsing */
    111. }
    112. .halfStyle.hs-horizontal-half:before { /* creates the top part */
    113.     display:block;
    114.     z-index:2;
    115.     position:absolute;
    116.     top:0;
    117.     height: 50%;
    118.     content: attr(data-content); /* dynamic content for the pseudo element */
    119.     overflow:hidden;
    120.     pointer-events: none; /* so the base char is selectable by mouse */
    121.     color: #f00; /* for demo purposes */
    122.     text-shadow: 2px -2px 0px #af0; /* for demo purposes */
    123. }
    124. .halfStyle.hs-horizontal-half:after { /* creates the bottom part */
    125.     display:block;
    126.     position:absolute;
    127.     z-index:1;
    128.     top:0;
    129.     height: 100%;
    130.     content: attr(data-content); /* dynamic content for the pseudo element */
    131.     overflow:hidden;
    132.     pointer-events: none; /* so the base char is selectable by mouse */
    133.     color: #000; /* for demo purposes */
    134.     text-shadow: 2px 2px 0px #0af; /* for demo purposes */
    135. }
    136. /* end half-style hs-horizontal-half */
    137.  
    138. /* start half-style hs-horizontal-third */
    139. .halfStyle.hs-horizontal-third { /* base char and also the bottom 1/3 */
    140.     position:relative;
    141.     display:inline-block;
    142.     font-size:80px; /* or any font size will work */
    143.     color: transparent;
    144.     overflow:hidden;
    145.     white-space: pre; /* to preserve the spaces from collapsing */
    146.     color: #f0f;
    147.     text-shadow: 2px 2px 0px #0af; /* for demo purposes */
    148. }
    149. .halfStyle.hs-horizontal-third:before { /* creates the top 1/3 */
    150.     display:block;
    151.     z-index:2;
    152.     position:absolute;
    153.     top:0;
    154.     height: 33.33%;
    155.     content: attr(data-content); /* dynamic content for the pseudo element */
    156.     overflow:hidden;
    157.     pointer-events: none; /* so the base char is selectable by mouse */
    158.     color: #f00; /* for demo purposes */
    159.     text-shadow: 2px -2px 0px #fa0; /* for demo purposes */
    160. }
    161. .halfStyle.hs-horizontal-third:after { /* creates the middle 1/3 */
    162.     display:block;
    163.     position:absolute;
    164.     z-index:1;
    165.     top:0;
    166.     height: 66.66%;
    167.     content: attr(data-content); /* dynamic content for the pseudo element */
    168.     overflow:hidden;
    169.     pointer-events: none; /* so the base char is selectable by mouse */
    170.     color: #000; /* for demo purposes */
    171.     text-shadow: 2px 2px 0px #af0; /* for demo purposes */
    172. }
    173. /* end half-style hs-horizontal-third */
    174.  
    175. /* start half-style hs-PeelingStyle, by user SamTremaine on Stackoverflow.com */
    176. .halfStyle.hs-PeelingStyle {
    177.     position: relative;
    178.     display: inline-block;
    179.     font-size: 68px;
    180.     color: rgba(0, 0, 0, 0.8);
    181.     overflow: hidden;
    182.     white-space: pre;
    183.     transform: rotate(4deg);
    184.     text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
    185. }
    186. .halfStyle.hs-PeelingStyle:before { /* creates the left part */
    187.     display: block;
    188.     z-index: 1;
    189.     position: absolute;
    190.     top: -0.5px;
    191.     left: -3px;
    192.     width: 100%;
    193.     content: attr(data-content);
    194.     overflow: hidden;
    195.     pointer-events: none;
    196.     color: #FFF;
    197.     transform: rotate(-4deg);
    198.     text-shadow: 0px 0px 1px #000;
    199. }
    200. /* end half-style hs-PeelingStyle */
    201.  
    202. /* start half-style hs-KevinGranger, by user KevinGranger on StackOverflow.com*/
    203. .textToHalfStyle.hs-KevinGranger {
    204.     display:block;
    205.     margin: 200px 0 0 0;
    206.     text-align:center;
    207. }
    208.  
    209. .halfStyle.hs-KevinGranger {
    210.     font-family: 'Libre Baskerville', serif;
    211.     position:relative;
    212.     display:inline-block;
    213.     width:1;
    214.     font-size:70px;
    215.     color: black;
    216.     overflow:hidden;
    217.     white-space: pre;
    218.     text-shadow: 1px 2px 0 white;
    219. }
    220. .halfStyle.hs-KevinGranger:before {
    221.     display:block;
    222.     z-index:1;
    223.     position:absolute;
    224.     top:0;
    225.     width: 50%;
    226.     content: attr(data-content); /* dynamic content for the pseudo element */
    227.     overflow:hidden;
    228.     color: white;
    229. }
    230. /* end half-style hs-KevinGranger*/
    231.  
    232.     </style>   
    233.     <script src="https://raw.githubusercontent.com/arbelh/HalfStyle/master/js/jquery.min.js"></script>
    234.     <script src="https://raw.githubusercontent.com/arbelh/HalfStyle/master/js/halfstyle.js" type="text/javascript" charset="utf-8" asyn defer></script>
    235. </head>
    236. <body>
    237.     <span class="halfStyle hs-base" data-content="X">X</span>
    238.     <span class="halfStyle hs-base" data-content="Y">Y</span>
    239.     <span class="halfStyle hs-base" data-content="Z">Z</span>
    240. </body>
    241. </html>
    Half styled text half colored text
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: