Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to set half color on text ?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 980
    Comment on it

    Hi all,

    Below is an example how to make half color on text using css. In this example we are using custom-attribute. If you are looking for custom-attribute, In one my previous blog I have explained about it click custom-attribute to know more.

    HTML :

    <span class="halfStyle" data-content="F">F</span>
    <span class="halfStyle" data-content="I">I</span>
    <span class="halfStyle" data-content="N">N</span>
    <span class="halfStyle" data-content="D">D</span>
    <span class="halfStyle" data-content="N">N</span>
    <span class="halfStyle" data-content="E">E</span>
    <span class="halfStyle" data-content="R">R</span>
    <span class="halfStyle" data-content="D">D</span>
    

    CSS :

    .halfStyle {
        position:relative;
        display:inline-block;
        font-size:80px;
        color: #1086ad;
        overflow:hidden;
    }
    .halfStyle:before {
        display:block;
        z-index:1;
        position:absolute;
        top:0;
        width: 50%;
        content: attr(data-content); 
        overflow:hidden;
        color: #f18b12;
    }
    

    Output : The output generated by using above code clearly shows orange on half text and blue color on another half.

    F I N D N E R D

 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: