CSS Puns

CSS Puns

SO only the code monkey and/or geeky ones amongst my readers out there are even going to understand what these are all about, but the past week or so has seen a boom in clever CSS puns popping up all over social media involving real life subjects mixed with clever, relevant CSS selectors.

The lead image above gives you a good idea of what they’re all about. Clever.

I’ve done the rounds and collated the ones I got the biggest laughs out of.

.ghost {
   opacity: 0.1;
   float: left;
}
.ninja {
   color: black;   
   visibility: hidden;
}
.periodic {
   display: table;
}
.big-bang:before {
   content: "";
}
* {
   position: relative;
}
.tower-of-pisa {
   font-style: italic;
}
.my-wife {
   right: 100%;
    margin: 0;
}
.push-up-bra {
   margin-top: -25%; 
   overflow: visible;
}
.gangsta-rap {
   word-spacing: 0;
}
.gym-rat {
   display: flex;
}
.hollywood {
   background-color: green;
}
.autobots {
   transform: translate3d();
}
#titanic {
   float: none;
}
.lord-of-the-rings .hobbit {
   height: 50%;
}
#delorean {
   z-index: -1955;
}
#marty-mcfly:hover {
   float: right;
}
.universe {
   margin: auto;
}
.skates {
   display: inline;
}
.internet-explorer {
   page-break-inside: auto;
}
.error {
   margin: 0;
}

My thorough work colleague, “Accurate” Jacquie, perhaps overthought these Harry-Potter-flavoured ones a little…

.invisibility-cloak {
   opacity: 0;
}
.invisibility-cloak * {
   visibility: hidden;
}
#mad-eye-moody ~ .invisibility-cloak {
   opacity: 0.5;
}
#mad-eye-moody ~ .invisibility-cloak * {
   visibility: visible !important;
}

Let’s not forget the politically motivated variety:

.europe { 
   border: none !important;
}
.china { 
   border-style: solid;
}
.rich-people { 
   top: 1%;
}
.working-class { 
   bottom: 99%;
}

And whether they are deemed appropriate or not, these potentially controversial ones are still very clever:

.kkk {
   color: white !important;
}
.hillbilly-sex {
   position: relative;
}
.obese {
   width: 200%;
   overflow: visible;
}
.religious-upbringing {
   perspective: inherit; 
   flex: none;
}

Let me know of any of your favourites I may have missed in the comments section below.

2 Comments

  1. Ugur says:

    .justinbieber {
    display:none
    }

  2. Erez says:

    I came up with this little project, trying to father CSS jokes in one place. Feel free to comment
    http://funnycss.com

Leave a Reply

Your email address will not be published. Required fields are marked *