Is it possible to apply CSS to half of a character

Question

What I am looking for   A way to style one HALF of a character   In this case  half the letter being transparent   What I have currently searched for and tried  With no luck     Methods for styling half of a character letter Styling part of a character with CSS or JavaScript Apply CSS to 50  of a character   Below is an example of what I am trying to obtain     Does a CSS or JavaScript solution exist for this  or am I going to have to resort to images  I would prefer not to go the image route as this text will end up being generated dynamically     UPDATE   Since many have asked why I would ever want to style half of a character  this is why  My city had recently spent  250 000 to define a new  brand  for itself  This logo is what they came up with  Many people have complained about the simplicity and lack of creativity and continue to do so  My goal was to come up with this website as a joke  Type in  Halifax  and you will see what I mean

User · Answer

I just played with  Arbel s solution    x000D   x000D  var textToHalfStyle       textToHalfStyle   text    x000D  var textToHalfStyleChars   textToHalfStyle split      x000D      textToHalfStyle   html      x000D    each textToHalfStyleChars  function i v   x000D          textToHalfStyle   append   lt span class  halfStyle  data-content      v      gt     v     lt  span gt     x000D      x000D  body  x000D      background-color  black  x000D    x000D   textToHalfStyle  x000D      display block  x000D      margin  200px 0 0 0  x000D      text-align center  x000D    x000D   halfStyle   x000D      font-family   Libre Baskerville   serif  x000D      position relative  x000D      display inline-block  x000D      width 1  x000D      font-size 70px  x000D      color  black  x000D      overflow hidden  x000D      white-space  pre  x000D      text-shadow  1px 2px 0 white  x000D    x000D   halfStyle before   x000D      display block  x000D      z-index 1  x000D      position absolute  x000D      top 0  x000D      width  50   x000D      content  attr data-content      dynamic content for the pseudo element    x000D      overflow hidden  x000D      color  white  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 0 jquery min js  gt  lt  script gt  x000D   lt span class  textToHalfStyle  gt Dr  Jekyll and M  Hide lt  span gt  x000D   x000D   x000D

User · Answer

A nice WebKit-only solution that takes advantage of the background-clip  text support  http   jsfiddle net sandro paganotti wLkVt   span     font-size  100px     background  linear-gradient to right  black  black 50   grey 50   grey      -webkit-background-clip  text     -webkit-text-fill-color  transparent

User · Answer

Just for the record in history   I ve come up with a solution for my own work from 5-6 years ago  which is Gradext   pure javascript and pure css  no dependency      The technical explanation is you can create an element like this    lt span gt A lt  span gt    now if you want to make a gradient on text  you need to create some multiple layers  each individually specifically colored and the spectrum created will illustrate the gradient effect   for example look at this is the word lorem inside of a  lt span gt  and will cause a horizontal gradient effect   check the examples       lt span data-i  0  style  color  rgb 153  51  34    gt L lt  span gt    lt span data-i  1  style  color  rgb 154  52  35    gt o lt  span gt    lt span data-i  2  style  color  rgb 155  53  36    gt r lt  span gt    lt span data-i  3  style  color  rgb 156  55  38    gt e lt  span gt    lt span data-i  4  style  color  rgb 157  56  39    gt m lt  span gt    and you can continue doing this pattern for a long time and long paragraph as well     But   What if you want to create a vertical gradient effect on texts   Then there s another solution which could be helpful  I will describe in details   Assuming our first  lt span gt  again  but the content shouldn t be the letters individually  the content should be the whole text  and now we re going to copy the same    lt span gt  again and again   count of spans will define the quality of your gradient  more span  better result  but poor performance    have a look at this    lt span data-i  6  style  color  rgb 81  165  39   overflow  hidden  height  11 2px   gt Lorem ipsum dolor sit amet  tincidunt ut laoreet dolore magna aliquam erat volutpat  lt  span gt   lt span data-i  7  style  color  rgb 89  174  48   overflow  hidden  height  12 8px   gt Lorem ipsum dolor sit amet  tincidunt ut laoreet dolore magna aliquam erat volutpat  lt  span gt   lt span data-i  8  style  color  rgb 97  183  58   overflow  hidden  height  14 4px   gt Lorem ipsum dolor sit amet  tincidunt ut laoreet dolore magna aliquam erat volutpat  lt  span gt   lt span data-i  9  style  color  rgb 105  192  68   overflow  hidden  height  16px   gt Lorem ipsum dolor sit amet  tincidunt ut laoreet dolore magna aliquam erat volutpat  lt  span gt   lt span data-i  10  style  color  rgb 113  201  78   overflow  hidden  height  17 6px   gt Lorem ipsum dolor sit amet  tincidunt ut laoreet dolore magna aliquam erat volutpat  lt  span gt   lt span data-i  11  style  color  rgb 121  210  88   overflow  hidden  height  19 2px   gt Lorem ipsum dolor sit amet  tincidunt ut laoreet dolore magna aliquam erat volutpat  lt  span gt      Again  But   what if you want to make these gradient effects to move and create an animation out of it   well  there s another solution for it too  You should definitely check animation  true or even  hoverable   method which will lead to a gradient to start based on cursor position    sounds cool xD      this is simply how we re creating gradients   linear or radial   on texts  If you liked the idea or want to know more about it  you should check the links provided     Maybe this is not the best option  maybe not the best performant way to do this  but it will open up some space to create exciting and delightful animations to inspire some other people for a better solution   It will allow you to use gradient style on texts  which is supported by even IE8   Here you can find a working live demo and the original repository is here on GitHub as well  open source and ready to get some updates    D    This is my first time   yeah  after 5 years  you ve heard it right   to mention this repository anywhere on the Internet  and I m excited about that      Update - 2019 August   Github removed github-pages demo of that repository because I m from Iran  Only the source code is available here tho

User · Answer

Here is a CSS only solution for a full line of text  not just a character element   x000D   x000D  div       position  relative      top  2em      height  2em      text-transform  full-width     div before  div after       content  attr data-content       position  absolute      top  0      right  0      bottom  0      left  0     div after       color  red         mask for a single character  By repeating this mask  all the string becomes masked        -webkit-mask-image  linear-gradient to right  transparent 0  transparent  5em  white  5em  white 1em       -webkit-mask-repeat  repeat-x      repeat the mask towards the right        -webkit-mask-size  1em             relative width of a single character                 non-vendor mask settings        mask-image  linear-gradient to right  transparent 0  transparent  5em  white  5em  white 1em       mask-repeat  repeat-x      mask-size  1em         demo purposes    input name  fontSize   first-of-type checked   div       font-size  1em     input name  fontSize   first-of-type   input checked   div       font-size  2em     input name  fontSize   first-of-type   input   input checked   div       font-size  3em    x000D  Font-size     lt input type  radio  name  fontSize  value  1em  gt     lt input type  radio  name  fontSize  value  2em  checked gt     lt input type  radio  name  fontSize  value  3em  gt      lt div data-content  A CSS only solution     gt  lt  div gt     lt div data-content  Try it on Firefox   gt  lt  div gt  x000D   x000D   x000D   The idea is to apply an horizontal CSS mask for each character  that hides the first half of it  0 - 0 5em  and shows the second half  0 5em - 1em   The width of the mask is mask-size  1em to match the width of the very first character in the string  By using the mask-repeat  repeat-x  the same mask is applied to the second  third character and so on  I thought that using the font monospace would solve the problem of using same-width letters  but I was wrong  Instead  I solved it by using the text-transform  full-width  that unfortunatelly is only supported by Firefox  I believe  The use of relative unit em allows the design to scale up down depending on the font-size  Vanilla JavaScript solution for all browsers If Firefox is not an option  then use this script for the rescue  It works by inserting a child span for each character  Inside each span  a non-repeated CSS mask is placed from  0  - 50   and  50  - 100   the width of the letter  which is the width of the span element   This way we don t have anymore the restriction of using same-width characters   x000D   x000D  const     dataElement   document getElementById  data        content   dataElement textContent      zoom   function  fontSize            dataElement style  font-size     fontSize    em                      while  dataElement firstChild        dataElement firstChild remove     for var i   0  i  lt  content length    i        const         spanElem   document createElement  span            ch   content i           spanElem setAttribute  data-ch   ch       spanElem appendChild document createTextNode ch             u00A0    ch        data appendChild spanElem     x000D   data       position  relative      top  2em      height  2em      font-size  2em      data span       display  inline-block      position  relative      color  transparent      data span before   data span after       content  attr data-ch       display  inline-block      position  absolute      top  0      right  0      bottom  0      left  0      text-align  center      color  initial      data span after       color  red      -webkit-mask-image  linear-gradient to right  transparent 0  transparent 50   white 50   white 100        mask-image  linear-gradient to right  transparent 0  transparent 50   white 50   white 100      x000D  Font-size   lt input type  range  min 1 max 4 step 0 05 value 2 oninput  zoom this value   onchange  zoom this value   gt    lt div id  data  gt A Fallback Solution   For all browsers lt  div gt  x000D   x000D   x000D

User · Answer

If you are interested in this  then Lucas Bebber s Glitch is a very similar and super cool effect     Created using a simple SASS Mixin such as   example-one     font-size  100px     include textGlitch  example-one   17  white  black  red  blue  450  115       More details at Chris Coyer s CSS Tricks and Lucas Bebber s Codepen page

User · Answer

JSFiddle DEMO We ll do it using just CSS pseudo selectors  This technique will work with dynamically generated content and different font sizes and widths  HTML   lt div class  split-color  gt Two is better than one  lt  div gt   CSS   split-color  gt  span       white-space  pre-line      position  relative      color   409FBF      split-color  gt  span before       content  attr data-content       pointer-events  none      Prevents events from targeting pseudo-element        position  absolute      overflow  hidden      color   264A73      width  50       z-index  1     To wrap the dynamically generated string  you could use a function like this     Wrap each letter in a span tag and return an HTML string    that can be used to replace the original text function wrapString str      var output         str split     forEach function letter        var wrapper   document createElement  span        wrapper dataset content   wrapper innerHTML   letter       output push wrapper outerHTML            return output join            Replace the original text with the split-color text window onload   function         var el    document querySelector   split-color            txt   el innerHTML           el innerHTML   wrapString txt

User · Answer

Edit  oct 2017   background-clip or rather background-image options are now supported by every major browser  CanIUse   Yes  you can do this with only one character and only CSS    Webkit  and Chrome  only  though   http   jsbin com rexoyice 1    x000D   x000D  h1   x000D    display  inline-block  x000D    margin  0     for demo snippet    x000D    line-height  1em     for demo snippet    x000D    font-family  helvetica  arial  sans-serif  x000D    font-weight  bold  x000D    font-size  300px  x000D    background  linear-gradient to right   7db9e8 50   1e5799 50    x000D    -webkit-background-clip  text  x000D    -webkit-text-fill-color  transparent  x000D    x000D   lt h1 gt X lt  h1 gt  x000D   x000D   x000D    Visually  all the examples that use two characters  be it via JS  CSS pseudo elements  or just HTML  look fine  but note that that all adds content to the DOM which may cause accessibility--as well as text selection cut paste issues

User · Answer

Another CSS-only solution  though data-attribute is needed if you don t want to write letter-specific CSS   This one works more across the board  Tested IE 9 10  Chrome latest  amp  FF latest    x000D   x000D  span   x000D    position  relative  x000D    color  rgba 50 50 200 0 5   x000D    x000D   x000D  span before   x000D    content  attr data-char   x000D    position  absolute  x000D    width  50   x000D    overflow  hidden  x000D    color  rgb 50 50 200   x000D    x000D   lt span data-char  X  gt X lt  span gt  x000D   x000D   x000D

User · Answer

It may be irrelevant  maybe not  but sometime ago  I created a jQuery function that does the same thing  but horizontally   I called it  Strippex  For  stripe   text   demo   http   cdpn io FcIBg  I m not saying this is the solution of any problems  but I already tried to apply css to half of a character  but horizontally  So the idea is the same  the realisation may be horrible  but it works   Ah  and the most important  I had fun creating it

User · Answer

Here an ugly implementation in canvas  I tried this solution  but the results are worse than I expected  so here it is anyway      x000D   x000D     div   each function     x000D    var CHARS     this  text   split      x000D      this  html      x000D      each CHARS  function index  char    x000D      var canvas       lt canvas   gt    x000D         css  width    40px   x000D         css  height    40px   x000D         get 0   x000D         div   append canvas   x000D      var ctx   canvas getContext  2d    x000D      var gradient   ctx createLinearGradient 0  0  130  0   x000D      gradient addColorStop  0    blue    x000D      gradient addColorStop  0 5    blue    x000D      gradient addColorStop  0 51    red    x000D      gradient addColorStop  1 0    red    x000D      ctx font    130pt Calibri   x000D      ctx fillStyle   gradient  x000D      ctx fillText char  10  130   x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div gt Example Text lt  div gt  x000D   x000D   x000D

User · Answer

I ve just finished developing the plugin and it is available for everyone to use  Hope you will enjoy it    View Project on GitHub - View Project Website   so you can see all the split styles   Usage  First of all  make sure you have the jQuery library is included  The best way to get the latest jQuery version is to update your head tag with    lt script src  http   code jquery com jquery-latest min js  gt  lt  script gt    After downloading the files  make sure you include them in your project    lt link rel  stylesheet  type  text css  href  css splitchar css  gt   lt script type  text javascript  src  js splitchar js  gt  lt  script gt    Markup  All you have to do is to asign the class splitchar   followed by the desired style to the element wrapping your text  e g   lt h1 class  splitchar horizontal  gt Splitchar lt  h1 gt    After all this is done  just make sure you call the jQuery function in your document ready file like this       splitchar   splitchar      Customizing  In order to make the text look exactly as you want it to  all you have to do is apply your design like this    horizontal      Base CSS - e g font-size       horizontal before      CSS for the left half       horizontal after      CSS for the right half         That s it  Now you have the Splitchar plugin all set  More info about it at http   razvanbalosin com Splitchar js

User · Answer

FWIW  here s my take on this doing it only with CSS  http   codepen io ricardozea pen uFbts   Several notes    The main reason I did this was to test myself and see if I was able to accomplish styling half of a character while actually providing a meaningful answer to the OP  I am aware that this is not an ideal or the most scalable solution and the solutions proposed by the people here are far better for  real world  scenarios  The CSS code I created is based on the first thoughts that came to my mind and my own personal approach to the problem  My solution only works on symmetrical characters  like X  A  O  M    It does not work on asymmetric characters like B  C  F  K or lower case letters     HOWEVER  this approach creates very interesting  shapes  with asymmetric characters  Try changing the X to a K or to a lower case letter like an h or a p in the CSS      HTML   lt span class  half-letter  gt  lt  span gt    SCSS   half-character      display  inline-block    font  bold 350px  8 Arial    position  relative      amp  before   amp  after       content   X     Change character here     display  inline-block      width  50       overflow  hidden      color   7db9e8         amp  after       position  absolute      top  0      left  50       color   1e5799      transform  rotateY -180deg

User · Answer

You can use below code  Here in this example I have used h1 tag and added an attribute data-title-text  Display Text  which will appear with different color text on h1 tag text element  which gives effect halfcolored text as shown in below example      x000D   x000D  body   x000D    text-align  center  x000D    margin  0  x000D    x000D   x000D  h1   x000D    color   111  x000D    font-family  arial  x000D    position  relative  x000D    font-family   Oswald   sans-serif  x000D    display  inline-block  x000D    font-size  2 5em  x000D    x000D   x000D  h1  after   x000D    content  attr data-title-text   x000D    color   e5554e  x000D    position  absolute  x000D    left  0  x000D    top  0  x000D    clip  rect 0  1000px  30px  0   x000D    x000D   lt h1 data-title-text  Display Text  gt Display Text lt  h1 gt  x000D   x000D   x000D

User · Answer

Now on GitHub as a Plugin    Feel free to fork and improve   Demo   Download Zip   Half-Style com  Redirects to GitHub      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   Part 1  Basic Solution    Demo  http   jsfiddle net arbel pd9yB 1694     This 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   Also  the accessibility of the original text is preserved for screen readers for the blind or visually impaired   Explanation for a single character   Pure CSS  All you need to do is to apply  halfStyle class to each element that contains the character you want to be half-styled   For each span element containing the character  you can create a data attribute  for example here data-content  X   and on the pseudo element use content  attr data-content   so the  halfStyle before class will be dynamic and you won t need to hard code it for every instance   Explanation for any text   Simply add textToHalfStyle class to the element containing the text      x000D   x000D     jQuery for automated mode x000D  jQuery function      x000D      var text  chars   el  i  output  x000D   x000D         Iterate over all class occurences x000D          textToHalfStyle   each function idx  el    x000D       el     el   x000D      text    el text    x000D      chars   text split      x000D   x000D         Set the screen-reader text x000D       el html   lt span style  position  absolute  important clip  rect 1px 1px 1px 1px  clip  rect 1px  1px  1px  1px    gt     text     lt  span gt     x000D   x000D         Reset output for appending x000D      output       x000D   x000D         Iterate over all chars in the text x000D      for  i   0  i  lt  chars length  i      x000D             Create a styled element for each character and append to container x000D          output      lt span aria-hidden  true  class  halfStyle  data-content      chars i       gt     chars i      lt  span gt    x000D        x000D   x000D         Write to DOM only once x000D       el append output   x000D        x000D      x000D   halfStyle   x000D      position  relative  x000D      display  inline-block  x000D      font-size  80px     or any font size will work    x000D      color  black     or transparent  any color    x000D      overflow  hidden  x000D      white-space  pre     to preserve the spaces from collapsing    x000D    x000D   x000D   halfStyle before   x000D      display  block  x000D      z-index  1  x000D      position  absolute  x000D      top  0  x000D      left  0  x000D      width  50   x000D      content  attr data-content      dynamic content for the pseudo element    x000D      overflow  hidden  x000D      color   f00  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt p gt Single Characters  lt  p gt  x000D   lt span class  halfStyle  data-content  X  gt X lt  span gt  x000D   lt span class  halfStyle  data-content  Y  gt Y lt  span gt  x000D   lt span class  halfStyle  data-content  Z  gt Z lt  span gt  x000D   lt span class  halfStyle  data-content  A  gt A lt  span gt  x000D   x000D   lt hr  gt  x000D   lt p gt Automated  lt  p gt  x000D   x000D   lt span class  textToHalfStyle  gt Half-style  please  lt  span gt  x000D   x000D   x000D     JSFiddle demo     Part 2  Advanced solution - Independent left and right parts    With this solution you can style left and right parts  individually and independently   Everything is the same  only more advanced CSS does the magic    x000D   x000D  jQuery function      x000D      var text  chars   el  i  output  x000D   x000D         Iterate over all class occurences x000D          textToHalfStyle   each function idx  el    x000D           el     el   x000D          text    el text    x000D          chars   text split      x000D   x000D             Set the screen-reader text x000D           el html   lt span style  position  absolute  important clip  rect 1px 1px 1px 1px  clip  rect 1px  1px  1px  1px    gt     text     lt  span gt     x000D   x000D             Reset output for appending x000D          output       x000D   x000D             Iterate over all chars in the text x000D          for  i   0  i  lt  chars length  i      x000D                 Create a styled element for each character and append to container x000D              output      lt span aria-hidden  true  class  halfStyle  data-content      chars i       gt     chars i      lt  span gt    x000D            x000D   x000D             Write to DOM only once x000D           el append output   x000D          x000D      x000D   halfStyle   x000D      position  relative  x000D      display  inline-block  x000D      font-size  80px     or any font size will work    x000D      color  transparent     hide the base character    x000D      overflow  hidden  x000D      white-space  pre     to preserve the spaces from collapsing    x000D    x000D   x000D   halfStyle before      creates the left part    x000D      display  block  x000D      z-index  1  x000D      position  absolute  x000D      top  0  x000D      width  50   x000D      content  attr data-content      dynamic content for the pseudo element    x000D      overflow  hidden  x000D      pointer-events  none     so the base char is selectable by mouse    x000D      color   f00     for demo purposes    x000D      text-shadow  2px -2px 0px  af0     for demo purposes    x000D    x000D   x000D   halfStyle after      creates the right part    x000D      display  block  x000D      direction  rtl     very important  will make the width to start from right    x000D      position  absolute  x000D      z-index  2  x000D      top  0  x000D      left  50   x000D      width  50   x000D      content  attr data-content      dynamic content for the pseudo element    x000D      overflow  hidden  x000D      pointer-events  none     so the base char is selectable by mouse    x000D      color   000     for demo purposes    x000D      text-shadow  2px 2px 0px  0af     for demo purposes    x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt p gt Single Characters  lt  p gt  x000D   lt span class  halfStyle  data-content  X  gt X lt  span gt  x000D   lt span class  halfStyle  data-content  Y  gt Y lt  span gt  x000D   lt span class  halfStyle  data-content  Z  gt Z lt  span gt  x000D   lt span class  halfStyle  data-content  A  gt A lt  span gt  x000D   x000D   lt hr  gt  x000D   lt p gt Automated  lt  p gt  x000D   x000D   lt span class  textToHalfStyle  gt Half-style  please  lt  span gt  x000D   x000D   x000D     JSFiddle demo       Part 3  Mix-Match and Improve  Now that we know what is possible  let s create some variations     -Horizontal Half Parts   Without Text Shadow    Possibility of Text Shadow for each half part independently       x000D   x000D     jQuery for automated mode x000D  jQuery function      x000D      var text  chars   el  i  output  x000D   x000D         Iterate over all class occurences x000D          textToHalfStyle   each function idx  el    x000D           el     el   x000D          text    el text    x000D          chars   text split      x000D   x000D             Set the screen-reader text x000D           el html   lt span style  position  absolute  important clip  rect 1px 1px 1px 1px  clip  rect 1px  1px  1px  1px    gt     text     lt  span gt     x000D   x000D             Reset output for appending x000D          output       x000D   x000D             Iterate over all chars in the text x000D          for  i   0  i  lt  chars length  i      x000D                 Create a styled element for each character and append to container x000D              output      lt span aria-hidden  true  class  halfStyle  data-content      chars i       gt     chars i      lt  span gt    x000D            x000D   x000D             Write to DOM only once x000D           el append output   x000D          x000D      x000D   halfStyle   x000D    position  relative  x000D    display  inline-block  x000D    font-size  80px     or any font size will work    x000D    color  transparent     hide the base character    x000D    overflow  hidden  x000D    white-space  pre     to preserve the spaces from collapsing    x000D    x000D   x000D   halfStyle before      creates the top part    x000D    display  block  x000D    z-index  2  x000D    position  absolute  x000D    top  0  x000D    height  50   x000D    content  attr data-content      dynamic content for the pseudo element    x000D    overflow  hidden  x000D    pointer-events  none     so the base char is selectable by mouse    x000D    color   f00     for demo purposes    x000D    text-shadow  2px -2px 0px  af0     for demo purposes    x000D    x000D   x000D   halfStyle after      creates the bottom part    x000D    display  block  x000D    position  absolute  x000D    z-index  1  x000D    top  0  x000D    height  100   x000D    content  attr data-content      dynamic content for the pseudo element    x000D    overflow  hidden  x000D    pointer-events  none     so the base char is selectable by mouse    x000D    color   000     for demo purposes    x000D    text-shadow  2px 2px 0px  0af     for demo purposes    x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt p gt Single Characters  lt  p gt  x000D   lt span class  halfStyle  data-content  X  gt X lt  span gt  x000D   lt span class  halfStyle  data-content  Y  gt Y lt  span gt  x000D   lt span class  halfStyle  data-content  Z  gt Z lt  span gt  x000D   lt span class  halfStyle  data-content  A  gt A lt  span gt  x000D   x000D   lt hr  gt  x000D   lt p gt Automated  lt  p gt  x000D   x000D   lt span class  textToHalfStyle  gt Half-style  please  lt  span gt  x000D   x000D   x000D     JSFiddle demo       -Vertical 1 3 Parts   Without Text Shadow    Possibility of Text Shadow for each 1 3 part independently       x000D   x000D     jQuery for automated mode x000D  jQuery function      x000D      var text  chars   el  i  output  x000D   x000D         Iterate over all class occurences x000D          textToHalfStyle   each function idx  el    x000D       el     el   x000D      text    el text    x000D      chars   text split      x000D   x000D         Set the screen-reader text x000D       el html   lt span style  position  absolute  important clip  rect 1px 1px 1px 1px  clip  rect 1px  1px  1px  1px    gt     text     lt  span gt     x000D   x000D         Reset output for appending x000D      output       x000D   x000D         Iterate over all chars in the text x000D      for  i   0  i  lt  chars length  i      x000D             Create a styled element for each character and append to container x000D          output      lt span aria-hidden  true  class  halfStyle  data-content      chars i       gt     chars i      lt  span gt    x000D        x000D   x000D         Write to DOM only once x000D       el append output   x000D        x000D      x000D   halfStyle      base char and also the right 1 3    x000D      position  relative  x000D      display  inline-block  x000D      font-size  80px     or any font size will work    x000D      color  transparent     hide the base character    x000D      overflow  hidden  x000D      white-space  pre     to preserve the spaces from collapsing    x000D      color   f0f     for demo purposes    x000D      text-shadow  2px 2px 0px  0af     for demo purposes    x000D    x000D   x000D   halfStyle before      creates the left 1 3    x000D      display  block  x000D      z-index  2  x000D      position  absolute  x000D      top  0  x000D      width  33 33   x000D      content  attr data-content      dynamic content for the pseudo element    x000D      overflow  hidden  x000D      pointer-events  none     so the base char is selectable by mouse    x000D      color   f00     for demo purposes    x000D      text-shadow  2px -2px 0px  af0     for demo purposes    x000D    x000D   x000D   halfStyle after      creates the middle 1 3    x000D      display  block  x000D      z-index  1  x000D      position  absolute  x000D      top  0  x000D      width  66 66   x000D      content  attr data-content      dynamic content for the pseudo element    x000D      overflow  hidden  x000D      pointer-events  none     so the base char is selectable by mouse    x000D      color   000     for demo purposes    x000D      text-shadow  2px 2px 0px  af0     for demo purposes    x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt p gt Single Characters  lt  p gt  x000D   lt span class  halfStyle  data-content  X  gt X lt  span gt  x000D   lt span class  halfStyle  data-content  Y  gt Y lt  span gt  x000D   lt span class  halfStyle  data-content  Z  gt Z lt  span gt  x000D   lt span class  halfStyle  data-content  A  gt A lt  span gt  x000D   x000D   lt hr  gt  x000D   lt p gt Automated  lt  p gt  x000D   x000D   lt span class  textToHalfStyle  gt Half-style  please  lt  span gt  x000D   x000D   x000D     JSFiddle demo       -Horizontal 1 3 Parts   Without Text Shadow    Possibility of Text Shadow for each 1 3 part independently       x000D   x000D     jQuery for automated mode x000D  jQuery function      x000D      var text  chars   el  i  output  x000D   x000D         Iterate over all class occurences x000D          textToHalfStyle   each function idx  el    x000D       el     el   x000D      text    el text    x000D      chars   text split      x000D   x000D         Set the screen-reader text x000D       el html   lt span style  position  absolute  important clip  rect 1px 1px 1px 1px  clip  rect 1px  1px  1px  1px    gt     text     lt  span gt     x000D   x000D         Reset output for appending x000D      output       x000D   x000D         Iterate over all chars in the text x000D      for  i   0  i  lt  chars length  i      x000D             Create a styled element for each character and append to container x000D          output      lt span aria-hidden  true  class  halfStyle  data-content      chars i       gt     chars i      lt  span gt    x000D        x000D   x000D         Write to DOM only once x000D       el append output   x000D        x000D      x000D   halfStyle      base char and also the bottom 1 3    x000D    position  relative  x000D    display  inline-block  x000D    font-size  80px     or any font size will work    x000D    color  transparent  x000D    overflow  hidden  x000D    white-space  pre     to preserve the spaces from collapsing    x000D    color   f0f  x000D    text-shadow  2px 2px 0px  0af     for demo purposes    x000D    x000D   x000D   halfStyle before      creates the top 1 3    x000D    display  block  x000D    z-index  2  x000D    position  absolute  x000D    top  0  x000D    height  33 33   x000D    content  attr data-content      dynamic content for the pseudo element    x000D    overflow  hidden  x000D    pointer-events  none     so the base char is selectable by mouse    x000D    color   f00     for demo purposes    x000D    text-shadow  2px -2px 0px  fa0     for demo purposes    x000D    x000D   x000D   halfStyle after      creates the middle 1 3    x000D    display  block  x000D    position  absolute  x000D    z-index  1  x000D    top  0  x000D    height  66 66   x000D    content  attr data-content      dynamic content for the pseudo element    x000D    overflow  hidden  x000D    pointer-events  none     so the base char is selectable by mouse    x000D    color   000     for demo purposes    x000D    text-shadow  2px 2px 0px  af0     for demo purposes    x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt p gt Single Characters  lt  p gt  x000D   lt span class  halfStyle  data-content  X  gt X lt  span gt  x000D   lt span class  halfStyle  data-content  Y  gt Y lt  span gt  x000D   lt span class  halfStyle  data-content  Z  gt Z lt  span gt  x000D   lt span class  halfStyle  data-content  A  gt A lt  span gt  x000D   x000D   lt hr  gt  x000D   lt p gt Automated  lt  p gt  x000D   x000D   lt span class  textToHalfStyle  gt Half-style  please  lt  span gt  x000D   x000D   x000D     JSFiddle demo       -HalfStyle Improvement By  KevinGranger     x000D   x000D     jQuery for automated mode x000D  jQuery function      x000D      var text  chars   el  i  output  x000D   x000D         Iterate over all class occurences x000D          textToHalfStyle   each function idx  el    x000D       el     el   x000D      text    el text    x000D      chars   text split      x000D   x000D         Set the screen-reader text x000D       el html   lt span style  position  absolute  important clip  rect 1px 1px 1px 1px  clip  rect 1px  1px  1px  1px    gt     text     lt  span gt     x000D   x000D         Reset output for appending x000D      output       x000D   x000D         Iterate over all chars in the text x000D      for  i   0  i  lt  chars length  i      x000D             Create a styled element for each character and append to container x000D          output      lt span aria-hidden  true  class  halfStyle  data-content      chars i       gt     chars i      lt  span gt    x000D        x000D   x000D         Write to DOM only once x000D       el append output   x000D        x000D      x000D  body   x000D      background-color  black  x000D    x000D   x000D   textToHalfStyle   x000D      display  block  x000D      margin  200px 0 0 0  x000D      text-align  center  x000D    x000D   x000D   halfStyle   x000D      font-family   Libre Baskerville   serif  x000D      position  relative  x000D      display  inline-block  x000D      width  1  x000D      font-size  70px  x000D      color  black  x000D      overflow  hidden  x000D      white-space  pre  x000D      text-shadow  1px 2px 0 white  x000D    x000D   x000D   halfStyle before   x000D      display  block  x000D      z-index  1  x000D      position  absolute  x000D      top  0  x000D      width  50   x000D      content  attr data-content      dynamic content for the pseudo element    x000D      overflow  hidden  x000D      color  white  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt p gt Single Characters  lt  p gt  x000D   lt span class  halfStyle  data-content  X  gt X lt  span gt  x000D   lt span class  halfStyle  data-content  Y  gt Y lt  span gt  x000D   lt span class  halfStyle  data-content  Z  gt Z lt  span gt  x000D   lt span class  halfStyle  data-content  A  gt A lt  span gt  x000D   x000D   lt hr  gt  x000D   lt p gt Automated  lt  p gt  x000D   x000D   lt span class  textToHalfStyle  gt Half-style  please  lt  span gt  x000D   x000D   x000D     JSFiddle demo      -PeelingStyle improvement of HalfStyle by  SamTremaine     x000D   x000D     jQuery for automated mode x000D  jQuery function      x000D      var text  chars   el  i  output  x000D   x000D         Iterate over all class occurences x000D          textToHalfStyle   each function idx  el    x000D       el     el   x000D      text    el text    x000D      chars   text split      x000D   x000D         Set the screen-reader text x000D       el html   lt span style  position  absolute  important clip  rect 1px 1px 1px 1px  clip  rect 1px  1px  1px  1px    gt     text     lt  span gt     x000D   x000D         Reset output for appending x000D      output       x000D   x000D         Iterate over all chars in the text x000D      for  i   0  i  lt  chars length  i      x000D             Create a styled element for each character and append to container x000D          output      lt span aria-hidden  true  class  halfStyle  data-content      chars i       gt     chars i      lt  span gt    x000D        x000D   x000D         Write to DOM only once x000D       el append output   x000D        x000D      x000D   halfStyle   x000D      position  relative  x000D      display  inline-block  x000D      font-size  68px  x000D      color  rgba 0  0  0  0 8   x000D      overflow  hidden  x000D      white-space  pre  x000D      transform  rotate 4deg   x000D      text-shadow  2px 1px 3px rgba 0  0  0  0 3   x000D    x000D   x000D   halfStyle before      creates the left part    x000D      display  block  x000D      z-index  1  x000D      position  absolute  x000D      top  -0 5px  x000D      left  -3px  x000D      width  100   x000D      content  attr data-content   x000D      overflow  hidden  x000D      pointer-events  none  x000D      color   FFF  x000D      transform  rotate -4deg   x000D      text-shadow  0px 0px 1px  000  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt p gt Single Characters  lt  p gt  x000D   lt span class  halfStyle  data-content  X  gt X lt  span gt  x000D   lt span class  halfStyle  data-content  Y  gt Y lt  span gt  x000D   lt span class  halfStyle  data-content  Z  gt Z lt  span gt  x000D   lt span class  halfStyle  data-content  A  gt A lt  span gt  x000D   x000D   lt hr  gt  x000D   lt p gt Automated  lt  p gt  x000D   x000D   lt span class  textToHalfStyle  gt Half-style  please  lt  span gt  x000D   x000D   x000D     JSFiddle demo and on samtremaine co uk      Part 4  Ready for Production  Customized different Half-Style style-sets can be used on desired elements on the same page  You can define multiple style-sets and tell the plugin which one to use   The plugin uses data attribute data-halfstyle   -CustomClassName-   on the target  textToHalfStyle elements and makes all the necessary changes automatically   So  simply on the element containing the text add textToHalfStyle class and data attribute data-halfstyle   -CustomClassName-    The plugin will do the rest of the job     Also the CSS style-sets  class definitions match the  -CustomClassName-  part mentioned above and is chained to  halfStyle  so we will have  halfStyle  -CustomClassName-    x000D   x000D  jQuery function      x000D      var halfstyle text  halfstyle chars   halfstyle el  halfstyle i  halfstyle output  halfstyle style  x000D   x000D         Iterate over all class occurrences x000D          textToHalfStyle   each function idx  halfstyle el    x000D           halfstyle el     halfstyle el   x000D          halfstyle style    halfstyle el data  halfstyle       hs-base   x000D          halfstyle text    halfstyle el text    x000D          halfstyle chars   halfstyle text split      x000D   x000D             Set the screen-reader text x000D           halfstyle el html   lt span style  position  absolute  important clip  rect 1px 1px 1px 1px  clip  rect 1px  1px  1px  1px    gt     halfstyle text     lt  span gt     x000D   x000D             Reset output for appending x000D          halfstyle output       x000D   x000D             Iterate over all chars in the text x000D          for  halfstyle i   0  halfstyle i  lt  halfstyle chars length  halfstyle i      x000D                 Create a styled element for each character and append to container x000D              halfstyle output      lt span aria-hidden  true  class  halfStyle     halfstyle style      data-content      halfstyle chars halfstyle i       gt     halfstyle chars halfstyle i      lt  span gt    x000D            x000D   x000D             Write to DOM only once x000D           halfstyle el append halfstyle output   x000D          x000D      x000D     start half-style hs-base    x000D   x000D   halfStyle hs-base   x000D      position  relative  x000D      display  inline-block  x000D      font-size  80px     or any font size will work    x000D      overflow  hidden  x000D      white-space  pre     to preserve the spaces from collapsing    x000D      color   000     for demo purposes    x000D    x000D   x000D   halfStyle hs-base before   x000D      display  block  x000D      z-index  1  x000D      position  absolute  x000D      top  0  x000D      width  50   x000D      content  attr data-content      dynamic content for the pseudo element    x000D      pointer-events  none     so the base char is selectable by mouse    x000D      overflow  hidden  x000D      color   f00     for demo purposes    x000D    x000D   x000D     end half-style hs-base    x000D   x000D   x000D     start half-style hs-horizontal-third    x000D   x000D   halfStyle hs-horizontal-third      base char and also the bottom 1 3    x000D      position  relative  x000D      display  inline-block  x000D      font-size  80px     or any font size will work    x000D      color  transparent  x000D      overflow  hidden  x000D      white-space  pre     to preserve the spaces from collapsing    x000D      color   f0f  x000D      text-shadow  2px 2px 0px  0af     for demo purposes    x000D    x000D   x000D   halfStyle hs-horizontal-third before      creates the top 1 3    x000D      display  block  x000D      z-index  2  x000D      position  absolute  x000D      top  0  x000D      height  33 33   x000D      content  attr data-content      dynamic content for the pseudo element    x000D      overflow  hidden  x000D      pointer-events  none     so the base char is selectable by mouse    x000D      color   f00     for demo purposes    x000D      text-shadow  2px -2px 0px  fa0     for demo purposes    x000D    x000D   x000D   halfStyle hs-horizontal-third after      creates the middle 1 3    x000D      display  block  x000D      position  absolute  x000D      z-index  1  x000D      top  0  x000D      height  66 66   x000D      content  attr data-content      dynamic content for the pseudo element    x000D      overflow  hidden  x000D      pointer-events  none     so the base char is selectable by mouse    x000D      color   000     for demo purposes    x000D      text-shadow  2px 2px 0px  af0     for demo purposes    x000D    x000D   x000D     end half-style hs-horizontal-third    x000D   x000D   x000D     start half-style hs-PeelingStyle  by user SamTremaine on Stackoverflow com    x000D   x000D   halfStyle hs-PeelingStyle   x000D    position  relative  x000D    display  inline-block  x000D    font-size  68px  x000D    color  rgba 0  0  0  0 8   x000D    overflow  hidden  x000D    white-space  pre  x000D    transform  rotate 4deg   x000D    text-shadow  2px 1px 3px rgba 0  0  0  0 3   x000D    x000D   x000D   halfStyle hs-PeelingStyle before      creates the left part    x000D    display  block  x000D    z-index  1  x000D    position  absolute  x000D    top  -0 5px  x000D    left  -3px  x000D    width  100   x000D    content  attr data

User · Answer

halfStyle       position relative      display inline-block      font-size 68px     or any font size will work        color  rgba 0 0 0 0 8      or transparent  any color        overflow hidden      white-space  pre     to preserve the spaces from collapsing        transform rotate 4deg       -webkit-transform rotate 4deg       text-shadow 2px 1px 3px rgba 0 0 0 0 3      halfStyle before       display block      z-index 1      position absolute      top -0 5px      left -3px      width  100       content  attr data-content      dynamic content for the pseudo element        overflow hidden      color  white      transform rotate -4deg       -webkit-transform rotate -4deg       text-shadow 0 0 1px black       http   experimental samtremaine co uk half-style   You can crowbar this code into doing all sorts of interesting things - this is just one implementation my associate and I came up with last night

User · Answer

How about something like this for shorter text    It could even work for longer text if you did something with a loop  repeating the characters with JavaScript  Anyway  the result is something like this      x000D   x000D  p char   x000D    position  relative  x000D    display  inline-block  x000D    font-size  60px  x000D    color  red  x000D    x000D   x000D  p char before   x000D    position  absolute  x000D    content  attr char   x000D    width  50   x000D    overflow  hidden  x000D    color  black  x000D    x000D   lt p class  char  char  S  gt S lt  p gt  x000D   lt p class  char  char  t  gt t lt  p gt  x000D   lt p class  char  char  a  gt a lt  p gt  x000D   lt p class  char  char  c  gt c lt  p gt  x000D   lt p class  char  char  k  gt k lt  p gt  x000D   lt p class  char  char  o  gt o lt  p gt  x000D   lt p class  char  char  v  gt v lt  p gt  x000D   lt p class  char  char  e  gt e lt  p gt  x000D   lt p class  char  char  r  gt r lt  p gt  x000D   lt p class  char  char  f  gt f lt  p gt  x000D   lt p class  char  char  l  gt l lt  p gt  x000D   lt p class  char  char  o  gt o lt  p gt  x000D   lt p class  char  char  w  gt w lt  p gt  x000D   x000D   x000D

User · Answer

This can be achieved with just CSS  before selector and content property value    x000D   x000D   halfed   halfed1   x000D    float  left  x000D    x000D   x000D   halfed   halfed1   x000D    font-family  arial  x000D    font-size  300px  x000D    font-weight  bolder  x000D    width  200px  x000D    height  300px  x000D    position  relative     To help hold the content value within    x000D    overflow  hidden  x000D    color   000  x000D    x000D   x000D   x000D   x000D   x000D   halfed before   halfed1 before     x000D    width  50      How much we d like to show    x000D    overflow  hidden     Hide what goes beyond our dimension      x000D    content   X      Halfed character    x000D    height  100   x000D    position  absolute  x000D    color   28507D  x000D   x000D    x000D   x000D   x000D   x000D     For Horizontal cut off     x000D   x000D   halfed1 before     x000D    width  100   x000D    height  55   x000D     x000D    x000D   lt div class  halfed  gt  X  lt  div gt  x000D   x000D   lt div class  halfed1  gt  X  lt  div gt  x000D   x000D   x000D       See on jsFiddle

User · Answer

Limited CSS and jQuery Solution  I am not sure how elegant this solution is  but it cuts everything exactly in half  http   jsfiddle net 9wxfY 11   Otherwise  I have created a nice solution for you    All you need to do is have this for your HTML   Take a look at this most recent  and accurate  edit as of 6 13 2016   http   jsfiddle net 9wxfY 43   As for the CSS  it is very limited    You only need to apply it to  nth-child even    x000D   x000D    function    x000D    var  hc       half-color    x000D    var str    hc text    x000D     hc html      x000D   x000D    var i   0  x000D    var chars  x000D    var dupText  x000D   x000D    while i  lt  str length   x000D      chars   str i   x000D      if chars         chars     amp nbsp    x000D      dupText     lt span gt     chars     lt  span gt    x000D   x000D      var firstHalf     dupText   x000D      var secondHalf     dupText   x000D   x000D       hc append firstHalf  x000D       hc append secondHalf  x000D   x000D      var width   firstHalf width   2  x000D   x000D      firstHalf width width   x000D      secondHalf css  text-indent   -width   x000D   x000D      i    x000D      x000D      x000D   half-color span  x000D    font-size  2em  x000D    display  inline-block  x000D    overflow  hidden  x000D    x000D   half-color span nth-child even   x000D    color  red  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  half-color  gt This is a sentence lt  div gt  x000D   x000D   x000D

User · Answer

Closest I can get    x000D   x000D    function    x000D       span   width    span   width   2   x000D       span nth-child 2    css  text-indent   -   span   width     x000D      x000D  body  x000D    font-family  arial  x000D    x000D  span  x000D    display  inline-block  x000D    overflow  hidden  x000D    x000D  span nth-child 2   x000D    color  red  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt span gt X lt  span gt  lt span gt X lt  span gt  x000D   x000D   x000D    Demo  http   jsfiddle net 9wxfY 2   Heres a version that just uses one span  http   jsfiddle net 9wxfY 4

User · Answer

You can also do it using SVG  if you wish    x000D   x000D  var title   document querySelector  h1    x000D      text   title innerHTML  x000D      svgTemplate   document querySelector  svg    x000D      charStyle   svgTemplate querySelector   text    x000D   x000D  svgTemplate style display    block   x000D   x000D  var space   0  x000D   x000D  for  var i   0  i  lt  text length  i      x000D    var x   charStyle cloneNode    x000D    x textContent   text i   x000D    svgTemplate appendChild x   x000D    x setAttribute  x   space   x000D    space    x clientWidth    15  x000D    x000D   x000D  title innerHTML       x000D  title appendChild svgTemplate   x000D   lt svg style  display  none  height  100px  width  100   xmlns  http   www w3 org 2000 svg  xmlns svg  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  version  1 1  gt  x000D       lt defs id  FooDefs  gt  x000D           lt linearGradient id  MyGradient  x1  0   y1  0   x2  100   y2  0   gt  x000D               lt stop offset  50   stop-color  blue    gt  x000D               lt stop offset  50   stop-color  red    gt  x000D           lt  linearGradient gt  x000D       lt  defs gt  x000D       lt text y  50   id  text  style  font-size  72px  fill  url  MyGradient   gt  lt  text gt  x000D   lt  svg gt  x000D   x000D   lt h1 gt This is not a solution X lt  h1 gt  x000D   x000D   x000D    http   codepen io nicbell pen jGcbq

[javascript] Is it possible to apply CSS to half of a character?

Examples related to javascript

Examples related to html

Examples related to css