
Is it possible to apply CSS to half of a character? - gioele
http://stackoverflow.com/q/23569441/449288
======
habosa
I've never seen such polished and thorough answers to a question like this.
One answer (not even the accepted answer) made a plugin and a beautiful
website to go along with it:
[http://emisfera.github.io/Splitchar.js/](http://emisfera.github.io/Splitchar.js/)

Pretty amazing that our tools are getting so good that someone can quickly
whip up an open-source plugin and splashy, hosted website for a SO answer.

~~~
StavrosK
How do people make sites this beautiful for a small plug in? Is there a
framework, like Bootstrap 3 or something? How does it work?

~~~
dsilver
This one in particular uses the jQuery onepage-scroll plugin [0] for the
scrolling effects, prism.js [1] for code syntax highlighting and some plain
HTML and CSS. Here's the complete code:
[https://github.com/emisfera/Splitchar.js/tree/gh-
pages](https://github.com/emisfera/Splitchar.js/tree/gh-pages).

In reference to some other comments on this thread, this isn't built using
Jekyll. GitHub pages supports pure static sites and Jekyll-powered sites if
you put either on the gh-pages branch of the repository.

[0] [https://github.com/peachananr/onepage-
scroll](https://github.com/peachananr/onepage-scroll) [1]
[http://prismjs.com/](http://prismjs.com/)

~~~
kibibu
I didn't even realize it scrolled until I saw your comment and went back.

~~~
coldpie
Hiding your content below the scroll and having a single, tiny, ambiguous,
low-contrast visual indicator that more information is below seems to be "the
in thing" in web design in 2014.

------
metastew
I wonder if this designer is the one behind the recently unveiled 'Halifax'
logo? The X looks remarkably similar.

Link for visual evidence:
[https://twitter.com/PaulRPalmeter/status/456165443363827712/...](https://twitter.com/PaulRPalmeter/status/456165443363827712/photo/1)

~~~
jack12
From the comments on the question, it's actually for a joke/complaint about
the cost of that very logo:
[http://pvp.comeze.com/brandgenerator/](http://pvp.comeze.com/brandgenerator/)
(type in Halifax and it shows a message about the cost).

It would be pretty funny if the libraries made to help out this joke end up
being used for official uses of the logo, but at present the logo's only
rendered inside an image at the official branding site,
[http://halifaxdefined.ca/#new-logo](http://halifaxdefined.ca/#new-logo)

------
wymy
The 'why' should not matter. Who really cares whether it should be done? or
why they would want to do it?

If someone has an interesting problem, let's try and figure out a way to do
it. Usually the why comes up along the way, but not relevant.

Thankfully, some great folks stepped in and gave quality responses.

~~~
freshyill
"To see if I could" is a perfectly valid reason. But "to create a logo"
probably isn't in a case like this. CSS can do so many cool things, and I love
seeing crazy stuff that pushes the limits
([http://attasi.com/labs/picsselz/](http://attasi.com/labs/picsselz/)). But
it's also important to know when just using an SVG image, or maybe doing
something in canvas is the right solution.

------
m1117
That's cheating :) CSS is applied to the whole character.. I'm sure that you
can avoid javascript by using content:attr(letter) in before and after. like
<span letter="X" class="half-red-half-green"></span>

~~~
tnorthcutt
If you're sure that it can be done without javascript, adding your solution as
an answer on the SO question would probably be greatly appreciated.

~~~
thefreeman
That is the exact technique that is used in the accepted answer. It does
appear that the answer was recently edited though so perhaps these comments
were made before that.

------
vinkelhake
Those are some imaginative solutions. One problem[1] with drawing over half
the character is anti-alias. The border gets a blend of both colors.

[1] [http://i.imgur.com/5KspGyc.png](http://i.imgur.com/5KspGyc.png)

~~~
DavidBradbury
I'd say do the same thing with the "after" selector, display only the other
half, hide the original character, and that should take care of that.

------
origamimissile
[http://jsfiddle.net/CL82F/14/](http://jsfiddle.net/CL82F/14/) did it with
just CSS pseudoselectors

~~~
windsurfer
The background of the underlying element is still showing through, messing up
the antialiasing and subpixel smoothing.

~~~
donrhummy
looks correct on latest firefox. what browser are you using?

------
JacksonGariety
So this is just the ::before pseudo-element? I feel like I'm missing
something.

~~~
rcsorensen
.halfStyle:before includes positioning like: "position:absolute; top: 0;
left:0;" which puts the :before element on top of the existing element.

"width: 50%" says it's only half as wide.

The possibly fancy thing being used here is the use of "attr(data-content)"
which use the data-content attribute of the element to fill the pseudo-
element's content.

------
MrQuincle
And now apply it to half a character diagonally. :-)

~~~
pbhjpbhj
[http://jsfiddle.net/pbhj/X53Ju/](http://jsfiddle.net/pbhj/X53Ju/) works but
only with -webkit as background-clip text isn't supported elsewhere (for
shame).

Or, using lettering.js to wrap individual letters in spans -
[http://jsfiddle.net/pbhj/3P7eU/](http://jsfiddle.net/pbhj/3P7eU/).

Edit: here's a polyfill that might help,
[https://github.com/TimPietrusky/background-clip-text-
polyfil...](https://github.com/TimPietrusky/background-clip-text-polyfill).

~~~
akira2501
I don't know why, but I felt compelled to make it spin.
[http://jsfiddle.net/X53Ju/7/](http://jsfiddle.net/X53Ju/7/)

------
frik
relevant code snip:

    
    
      .halfStyle:before {
        width: 50%;
        color: #f00;
      }

~~~
whichdan

      content: attr(data-content);
    

This is pretty interesting, too.

------
paulcnichols
Not looking forward to when this catches on.

------
brianbarker
It's cool seeing the solution for this, but I never would have imagined such a
random request.

Now, go make striped characters.

~~~
danceonfire
Striped? What about checkered?
[http://jsfiddle.net/F3KAc/5/](http://jsfiddle.net/F3KAc/5/)

~~~
brianbarker
Excellent work. Make that your next interview question.

------
kbart
My eyes hurt just seeing these examples. I hope such technique will not get
much attention outside of SO and HN.

------
BorisMelnik
thinking of a ton of new usage cases for this example. would be nice to see
this implemented in pure CSS in the next revision perhaps. is that even
possible?

------
joeheyming
yes, but why?

------
omegote
It's sad to see that this kind of questions gather so much attention, and
other questions closer to the real world receive NONE. StackOverflow has
reached his max hipster level.

~~~
dredmorbius
I'm as much a "real / big problems" guy as anyone. But I don't begrudge this.

If you feel there's something missing from HN, how about posting some
submissions. I see you've got ... none.

Remember, if you're not part of the solution, you're part of the precipitate.

~~~
omegote
I've posted plenty of questions in StackOverflow that have gone unanswered,
some of them (in my opinion) pretty important. For instance, my last question
has turned out to be a bug in Django. They however have no place here in HN
because this is not that kind of site.

Anyways, everyone knows that the quality of the answers in SO has declined a
lot in the last few years. It's not something strange.

~~~
dredmorbius
What's your SO username?

------
ape4
Just because you can do something...

~~~
bluedino
It's more "Just because the solution isn't obvious or it wasn't designed with
something in mind"... People that push tools past their limits with clever
tricks can be very helpful, or very annoying.

------
frozenport
This looks repugnant. Just because it can be done, doesn't mean you should do
it! :-)

~~~
lotsofmangos
So, should we make it blink?

~~~
McGlockenshire
No, you should make _half_ of it blink.

~~~
mrb
[http://jsfiddle.net/pd9yB/160/](http://jsfiddle.net/pd9yB/160/) I am not
proud of myself :)

Edit: [http://jsfiddle.net/pd9yB/238/](http://jsfiddle.net/pd9yB/238/) should
work in Chrome/FF/IE/Opera and most modern browsers (previous link is Webkit-
browsers only)

~~~
claudius
I tried that first but it didn’t work in Firefox :\

~~~
mrb
Try the new link (see my edited comment).

