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

  • How to set half color on text ?

    @mukul.kant
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 986
    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
    half color text color text css html css3 HTML5
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           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: