Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Making a Text Half styled

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 53
    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]".

    <!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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: