What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 133 Stack Exchange communities.

Triggered by a question where the code was provided via a link to Instagram and by the existence of the code hosting service Instacode, I’d like to suggest implementing hipstery image filers for code posted on Stack Overflow:

instacode example

However, it’s obviously (duh!) bad for usability to just replace the code by an image so these retro filters should be fully implemented in CSS3 transformations which are applied to code posted on Stack Overflow.

share|improve this question
7  
This must be implemented on April 1st. –  rightføld Feb 9 '13 at 20:01
7  
@Zoidberg Noo, then people would think it was a joke! –  Konrad Rudolph Feb 9 '13 at 20:02
2  
Pff, I liked those filters before they were cool... –  Bart Feb 9 '13 at 20:04
1  
Is this a Fri... what day is this? –  Josh Caswell Feb 9 '13 at 20:53
1  
@Josh Does it really matter? It’s always Friday somewhere. –  Konrad Rudolph Feb 9 '13 at 21:25
4  
I can't overstate the irony of being concerned with usability while applying retro film filters to text –  Ben Brocka Feb 9 '13 at 22:34
5  
Seriously, don't create tags like hipster and instagram on meta again (i.e. don't create frivolous tags). –  casperOne Feb 9 '13 at 22:42
    
@casperOne Why not? Is there a discussion of that somewhere? –  Konrad Rudolph Feb 9 '13 at 23:03
1  
@KonradRudolph, meta is not for humor and those tags would serve no other possible purpose. –  Charles Feb 9 '13 at 23:06
    
@Charles Ah. I wasn’t aware of that change in policy. I usually never use meta. –  Konrad Rudolph Feb 9 '13 at 23:13
10  
What are you talking about? Of course Meta is for humour. (It ends with tags though. Tags are SERIOUS BUSINESS) –  Pëkka Feb 10 '13 at 0:12

1 Answer 1

I wrote a custom stylesheet. It works in Google Chrome and should also work in Safari.

Feel free to improve and hipsterize further (i.e. needs more filters).

.prettyprint {
    color: #839496;
    background: #002b36 url(data:image/png;base64,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);
    -webkit-transform: perspective(500px) rotateX(-15deg) rotateY(20deg) rotateZ(3deg) scale(0.8);
    padding: 2em;
    margin: 2em;
    text-shadow: #002b36 0 0 4px;
    -webkit-filter: sepia(0.8);
}

.prettyprint code {
    background: transparent;
    font-family: 'Ubuntu Mono', Consolas, monospace;
    font-size: 1.1em;
}

.prettyprint {
}

.prettyprint .pln {
  color: inherit;
}

.prettyprint .str,
.prettyprint .lit,
.prettyprint .atv {
  color: #2aa198;
}

.prettyprint .kwd {
  color: #268bd2;
}

.prettyprint .com,
.prettyprint .dec {
  color: #586e75;
  font-style: italic;
}

.prettyprint .typ {
  color: #b58900;
}

.prettyprint .pun {
  color: inherit;
}

.prettyprint .opn {
  color: inherit;
}

.prettyprint .clo {
  color: inherit;
}

.prettyprint .tag {
  color: #268bd2;
  font-weight: bold;
}

.prettyprint .atn {
  color: inherit;
}

share|improve this answer
    
Berry nice!​​​​ –  Konrad Rudolph Feb 9 '13 at 21:02
    
Do you have a screenshot for lazy people? :) –  Benjol Feb 11 '13 at 12:25
    
@Benjol I don't have one at hand, but you can make one and edit the answer to include it. –  rightføld Feb 11 '13 at 13:29
2  
Hm, you obviously didn't understand which lazy person I was referring to :) –  Benjol Feb 11 '13 at 13:31

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .