I want to have 2 different colors on text on different halves i.e. upper half of text of different color and other half of other. Like in this image..
Asked
Active
Viewed 265 times
11
-
3Try http://stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character – Nenad Vracar Jan 17 '16 at 16:07
-
in the css that is linked from the answer given by the duplicate, for the element ".halfStyle.hs-base:before" change "width: 50%;" to "height: 50%;" – Gyro Gearloose Jan 17 '16 at 16:41
-
Thanks. This worked so well: .halfed { font-family: arial; font-size: 300px; font-weight: bolder; width: 200px; height: 300px; position: relative; /* To help hold the content value within */ overflow: hidden; color: #9A2617; } .halfed:before { width: 100%; /* How much we'd like to show */ overflow: hidden; /* Hide what goes beyond our dimension */ content: 'Institute'; /* Halfed character */ height: 55%; position: absolute; color: #541D85; } – Lakshay Sharma Jan 17 '16 at 19:59