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.
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.
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.
It was originally more for blogs but it can be used for lots of things. We use it to serve our style guide and API documentation.
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?
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 ?
Who am I kidding? It's still awesome...
Link for visual evidence: https://twitter.com/PaulRPalmeter/status/456165443363827712/...
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
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.
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).
"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.
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....
Now, go make striped characters.
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.
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.
You could maybe make a funny 3D website with the old red and blue glasses with this.
Edit: http://jsfiddle.net/pd9yB/238/ should work in Chrome/FF/IE/Opera and most modern browsers (previous link is Webkit-browsers only)
-webkit-animation: blink 4s steps(20,end) infinite;
Slide-y chars. Had to be done.
Like so? (Code from libressl.org and Arbel’s demo).
(I now need to go and forget I ever heard about the internet, this may take a lot of rum)
Can I ask why you might want to say hurtful things to someone who is trying to be helpful?