Is it possible to apply CSS to half of a character?

http://stackoverflow.com/q/23569441/449288

by gioele • 12 years ago

468 85 12 years ago

stackoverflow.com

JacksonGariety• 12 years ago

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

ogig• 12 years ago

that and the use of css attr()

rcsorensen• 12 years ago

.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.

sebnukem2• 12 years ago

::after would work as well. It just adds something before or after the selected DOM element, in this case, a half-shown copy of the letter on top of the original.

m1117• 12 years ago

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• 12 years ago

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• 12 years ago

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.

frozenport2• 12 years ago

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

dice• 12 years ago

I think it would be fine for a single fancy beginning-of-article letter. Whole titles or sentences is too much.

lotsofmangos2• 12 years ago

So, should we make it blink?

McGlockenshire• 12 years ago

No, you should make half of it blink.

LandoCalrissian• 12 years ago

I don't see a lot of utility in it, but I like that people are trying things out and pushing themselves. I certainly thought it was an interesting solution to for a problem that doesn't exist.

You could maybe make a funny 3D website with the old red and blue glasses with this.

PeterisP• 12 years ago

It does have some niche use cases - e.g., implementing a logo in css instead of embedded picture.

fred_durst• 12 years ago

This looks repugnant

Can I ask why you might want to say hurtful things to someone who is trying to be helpful?

frozenport2• 12 years ago

I think you misunderstood. Its cool programming but the effect is a design anti-pattern, see the <blink> discussion on top.

habosa2• 12 years ago

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/

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.

spb• 12 years ago

Yeah, I'm looking to make a site / subreddit sometime soon that is designed around this kind of answer / solution to users' problems.

ibisum• 12 years ago

sometime soon, lol!

for my part, i wonder if these guys with the deep chi on css are probably .. correct me if i'm wrong .. using the source? i.e. do you get some sort of insight by observing how css is handled, in some source somewhere, or .. how ?

scott_s• 12 years ago

How would it differ from Stack Overflow? (I'm not being snarky, but asking a real question.)

StavrosK3• 12 years ago

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?

justinpaulson2• 12 years ago

It's a github page, so it is probably using jekyll...http://jekyllrb.com/

dsilver• 12 years ago

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.

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 [1] http://prismjs.com/

Terretta• 12 years ago

It appears at least in part inspired by zombo.com.

Cederfjard2• 12 years ago

I'm a bit confused. Here's what it looks like to me: https://imgur.com/8zSglOv

No buttons do anything when clicked, and I can't scroll. Latest Firefox and Chromium on Ubuntu. Am I missing something or is it broken for me? Can anyone show me what it's supposed to be like?

josephschmoe• 12 years ago

Github post came up the next day actually. He's done a couple commits too.

Who am I kidding? It's still awesome...

smackfu• 12 years ago

You can see the revision history: http://stackoverflow.com/posts/23569710/revisions

For a popular question like this, it's kind of like an arms race to see who can get the top answer. People keep one-upping themselves.

sytelus• 12 years ago

Slow down before you give too much credit to tools. Guy has put lot of work in "whipping" up a beautiful website. Much of this seems to be hand coded. Example: https://github.com/emisfera/Splitchar.js/commits/gh-pages/in...

habosa2• 12 years ago

I wasn't saying it wasn't hand coded, I meant tools like Github pages and JSFiddle and syntax highlighters and all of the things that allow us to move so quickly from prototype to publish.

ape4• 12 years ago

Just because you can do something...

hadem• 12 years ago

This was my initial thought too. Why not just use an image, right? But, I guess if we always said that, where would we be now? We wouldn't have a lot of the amazing tools and resources we do today. Sure, it might not be fully practical but it doesn't hurt to research the problem and learn from it. :-)

gjvc• 12 years ago

the web is evidence of a massive local maxima in presentation technology.

bluedino• 12 years ago

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.

vinkelhake• 12 years ago

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

DavidBradbury• 12 years ago

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.

frik• 12 years ago

relevant code snip:

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

whichdan• 12 years ago

  content: attr(data-content);

This is pretty interesting, too.

wymy• 12 years ago

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• 12 years ago

"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/). But it's also important to know when just using an SVG image, or maybe doing something in canvas is the right solution.

lispylol• 12 years ago

In general it's absolutely relevant to not just solving A problem but the RIGHT problem. People might ask for X when they really want Y.

PhasmaFelis• 12 years ago

Of course the "why" matters! What happened to intellectual curiosity? In any interesting problem, "why" is just as interesting as "how," and "how" has now been thoroughly and professionally covered.

smoyer• 12 years ago

True ... so long as nobody combines this technique with marquee.

al2o3cr• 12 years ago

"The 'why' should not matter."

The 'why' absolutely matters - frequently, there are tradeoffs to be made in an implementation; if you don't understand "why" something is being done than it's difficult-to-impossible to evaluate which tradeoff is going to work.

In this particular case, the tradeoffs appear (based on the SO answers) to mostly revolve around how much text the technique is applied to and what the intended uses of that text are (doe selection work, does wrapping work, does accessibility work).

metastew• 12 years ago

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/...

Atroxide• 12 years ago

I guess we can just wait until they have a website and see if the logo is using this method.

thegeomaster• 12 years ago

It looks very similar, but what bugs me is that the author says that the text is going to be dynamically generated, which wouldn't fit the "logo" theory.

jack12• 12 years ago

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/ (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

origamimissile• 12 years ago

http://jsfiddle.net/CL82F/14/ did it with just CSS pseudoselectors

windsurfer• 12 years ago

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

donrhummy• 12 years ago

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

MrQuincle• 12 years ago

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

pbhjpbhj• 12 years ago

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/.

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

akira2501• 12 years ago

I don't know why, but I felt compelled to make it spin. http://jsfiddle.net/X53Ju/7/

omegote2• 12 years ago

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.

dredmorbius3• 12 years ago

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.

omegote2• 12 years ago

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.

brianbarker2• 12 years ago

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

Now, go make striped characters.

danceonfire• 12 years ago

Striped? What about checkered? http://jsfiddle.net/F3KAc/5/

brianbarker2• 12 years ago

Excellent work. Make that your next interview question.

paulcnichols• 12 years ago

Not looking forward to when this catches on.

BorisMelnik• 12 years ago

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• 12 years ago

yes, but why?

kbart• 12 years ago

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

Is it possible to apply CSS to half of a character?

Related Stories