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.
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.
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.
You're right, thanks. I'm finally home and managed to look at the source, it doesn't use Bootstrap. The author built it all from scratch. Kudos to him.
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.
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?
You might be using HTTPS Everywhere which is blocking jQuery and some other stuff from loading since he hard coded them as a HTTP url. Try opening it up in Incognito or another browser without HTTPS.
Maybe I'm misinterpreting but I assumed the subreddit would be a collection of answers like this instead of a place to ask them which would be super cool and helpful. Not sure if that's what's meant though.
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 ?
No, 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.
Is 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.
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
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.
"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.
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).
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.
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>
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.
.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.
::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.
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?
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.
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.
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.
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. :-)
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.
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.