How to apply CSS to only half Word or character?


I want to apply CSS to half word of character only, means I would like to create a character effect in which we have One-half of character as Blue color while another half as black or transparent white.

How to achieve it using pure CSS or javascript/CSS combination?


Asked by:- Vinnu
1
: 388 At:- 7/20/2017 8:07:17 AM
CSS javascript HTML half-character-styling






1 Answers
profileImage Answered by:- jaya

Yes there are ways with the help of which you can style half character or word using CSS

HalfStyle.com

  • Pure CSS for a Single Character
  • JavaScript used for automation across text or multiple characters
  • Preserves Text Accessibility for screen readers for the blind or visually impaired
  • You can use Pure CSS way or javascript way using this technique.

Example : jsFiddle

Half-chacrter-styling-using-CSS

Splitchar

Another plugin, Splitchar can be used to styling of word or charcter using CSS

Splitchar

Direct Method

You can use this pure CSS solution, which will work in webkit and Chrome

h1 {
  display: inline-block;
  margin: 0; /* for demo snippet */
  line-height: 1em; /* for demo snippet */ 
  font-weight: bold;
    font-size: 400px;
  font-family:Arial;
  background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

HTML:

<h1>Z</h1>

Output:

Z-Character-styling-using-CSS

here is the Fiddle example

1
At:- 7/20/2017 12:09:11 PM
thank you, it helped me a lot 0
By : Vinnu - at :- 8/17/2017 5:07:07 PM





Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use

Subscribe Now

Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly