9 ms·
Is it possible to apply CSS to half of a character?
- deleted 12y ago[deleted]
- JacksonGariety 12y agoSo this is just the ::before pseudo-element? I feel like I'm missing something.
- ogig 12y agothat and the use of css attr()
- rcsorensen 12y 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 12y 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 12y agoThat'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 12y agoIf 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 12y agoThat 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.
- frozenport 12y agoThis looks repugnant. Just because it can be done, doesn't mean you should do it! :-)
- deleted 12y ago[deleted]
- dice 12y agoI think it would be fine for a single fancy beginning-of-article letter. Whole titles or sentences is too much.
- lotsofmangos 12y agoSo, should we make it blink?
- McGlockenshire 12y agoNo, you should make half of it blink.
- zacinbusiness 12y agoAnd the other half scroll ;-)
- claudius 12y agohttp://jsfiddle.net/pd9yB/156/ http://jsfiddle.net/pd9yB/156/ Like so? (Code from libressl.org and Arbel’s demo).
- lotsofmangos 12y agoYeah, or maybe this - http://jsfiddle.net/pd9yB/198/ http://jsfiddle.net/pd9yB/198/ (I now need to go and forget I ever heard about the internet, this may take a lot of rum)
- mrb 12y agohttp://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)
- habosa 12y agoI'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.
- spb 12y agoYeah, I'm looking to make a site / subreddit sometime soon that is designed around this kind of answer / solution to users' problems.
- ibisum 12y agosometime 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 ?
- nathancahill 12y agoNo, it's just combining the :before class with attr(), and then styling it with width: 50%. No secret sauce, just a creative hack.
- pjc50 12y agoNo, they just have a very thorough understanding of the box model and all the different selectors. There's quite a lot of pieces and they can interact in many ways; some people just have the right mindset to solve that puzzle.
- sanderjd 12y agoIs there a good advanced css book (or other long-form resource), or do you just have to read specs at this level? I feel like I have "known" CSS reasonably well for quite some time, but have never attained the level of depth it takes to really grok all the ways the puzzle pieces interact with one another.
- ape4 12y agoJust because you can do something...
- hadem 12y agoThis 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 12y agothe web is evidence of a massive local maxima in presentation technology.
- bluedino 12y agoIt'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 12y agoThose 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 12y agoI'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 12y agorelevant code snip: .halfStyle:before { width: 50%; color: #f00; }
- whichdan 12y agocontent: attr(data-content); This is pretty interesting, too.
- wymy 12y agoThe '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 12y 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/ 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 12y agoIn 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 12y agoOf 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 12y agoTrue ... so long as nobody combines this technique with marquee.
- al2o3cr 12y 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 12y agoI 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/photo/1 https://twitter.com/PaulRPalmeter/status/456165443363827712/...
- Atroxide 12y agoI guess we can just wait until they have a website and see if the logo is using this method.
- thegeomaster 12y agoIt 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 12y agoFrom 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
- origamimissile 12y agohttp://jsfiddle.net/CL82F/14/ http://jsfiddle.net/CL82F/14/ did it with just CSS pseudoselectors
- windsurfer 12y agoThe background of the underlying element is still showing through, messing up the antialiasing and subpixel smoothing.
- donrhummy 12y agolooks correct on latest firefox. what browser are you using?
- MrQuincle 12y agoAnd now apply it to half a character diagonally. :-)
- pbhjpbhj 12y agohttp://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-polyfill https://github.com/TimPietrusky/background-clip-text-polyfil....
- akira2501 12y agoI don't know why, but I felt compelled to make it spin. http://jsfiddle.net/X53Ju/7/ http://jsfiddle.net/X53Ju/7/
- omegote 12y agoIt'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 12y agoI'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 12y agoI'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 12y agoWhat's your SO username?
- brianbarker 12y agoIt's cool seeing the solution for this, but I never would have imagined such a random request. Now, go make striped characters.
- danceonfire 12y agoStriped? What about checkered? http://jsfiddle.net/F3KAc/5/ http://jsfiddle.net/F3KAc/5/
- brianbarker 12y agoExcellent work. Make that your next interview question.
- paulcnichols 12y agoNot looking forward to when this catches on.
- BorisMelnik 12y agothinking 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 12y agoyes, but why?
- kbart 12y agoMy eyes hurt just seeing these examples. I hope such technique will not get much attention outside of SO and HN.