CSS PunsCSS Puns

CSS Puns & CSS Jokes
Curated by Saijo George

After the great success of version one (idea came from a reddit & DesignerNews thread, but was initially published by Louis Lazaris ). I wanted to do something better with version 2 and this is my attempt at that. Along with the CSS puns I have also added various merchandise that you can buy for example t-shirts, mugs, etc. I have plans to add new things later on, you can always subscribe to the newsletter to get notified when I add new puns or merchandise.

.website {
  
--by: Saijo George;
  
--developed-by: Maciej Leszczynski;
  
--illustrated-by: Kasia Marcinkiewicz;
}

Signup for Newsletter

Want to get notified about new puns,
merchandise or giveaways?
Sign up below.

CSS PunsCSS Puns
#titanic {
  float: none;
}
CSS PunsCSS Puns
#bermuda-triangle {
  display: none;
}
CSS PunsCSS Puns
.invisibility-cloak + #harry-potter {
  visibility: hidden;
}

.invisibility-cloak + #mad-eye-moody {
  visibility: visible !important;
}
CSS PunsCSS Puns
#usa + #mexico {
  border: 1px dashed;
}
CSS PunsCSS Puns
#usa[data-president~=Trump] + #mexico {
  border: 30ft solid;
}
CSS PunsCSS Puns
#europe .country:not(.uk) {
  border: none;
}
CSS PunsCSS Puns
#china {
  border-top-style: solid;
}
CSS PunsCSS Puns
.sniper-mode-engaged {
  cursor: crosshair;
}
CSS PunsCSS Puns
.bambis-mom {
  cursor: crosshair; 
  orphans: 1; 
}
CSS PunsCSS Puns
#periodic {
  display: table;
}
CSS PunsCSS Puns
#big-bang::before {
  content: "";
}
CSS PunsCSS Puns
#chuck-norris {
  color: #BADA55;
}
CSS PunsCSS Puns
#nsa {
  opacity: 1;
}
CSS PunsCSS Puns
#tower-of-pisa {
  font-style: italic;
}
CSS PunsCSS Puns
#australia {
  transform: rotateY(180deg);
}
CSS PunsCSS Puns
.bruce-banner {
  color: pink;
  transition: color 10s;
}

.bruce-banner.the-hulk {
  color: green;
}
CSS PunsCSS Puns
.oliver-queen {
  cursor: arrow;
}
CSS PunsCSS Puns
.ninja {
  visibility: hidden;
  color: black;
}
CSS PunsCSS Puns
.leprechaun {
  height: 20%; 
  color: green; 
  display: none; 
}
CSS PunsCSS Puns
.infinity-edge-pools {
  overflow: hidden;
}
CSS PunsCSS Puns
.obese {
  width: 200%;
  overflow: visible;
}
CSS PunsCSS Puns
#muscles {
  display: flex;
}
CSS PunsCSS Puns
.religious-upbringing {
  perspective: inherit;
}
.yomama {
  width: 99999999px;
}
.wife {
  right: 100%;
  margin: 0%;
}
#lego {
  display: block;
}
CSS PunsCSS Puns
.hobbit {
  height: 50%;
}

.hobbit #foot {
  width: 200%;
}
CSS PunsCSS Puns
.delorean {
  z-index: -1955;
}
CSS PunsCSS Puns
.fear {
  display: none;
}
CSS PunsCSS Puns
.usa > .marijuana-laws {
  .federal {
    cursor: not-allowed !important;
    .state {
      cursor: wait;
      &.AK, &.CA, &.CO, &.ME, &.MA, &.NV, &.OR, &.WA {
        cursor: progress;
      }
    }
  }
}
CSS PunsCSS Puns
.single-lane-road {
  width: auto;
}
CSS PunsCSS Puns
.samsung {
  @extend apple;
}
CSS PunsCSS Puns
#rip {
  bottom: -6912px;
  /* 6912px = 6 feet */
}
CSS PunsCSS Puns
.defibrillator {
  clear: both;
}
CSS PunsCSS Puns
.illuminati {
  position: absolute;
  visibility: hidden;
}
CSS PunsCSS Puns
.government {
  transition: all 4yr ease-out;
}
CSS PunsCSS Puns
#autobots {
  transform: translate3d();
}
CSS PunsCSS Puns
#ikea {
  display: table;
}
CSS PunsCSS Puns
#moses > #sea {
  column-count: 2; 
}
CSS PunsCSS Puns
.gangsta-rap {
  word-spacing: 0;
}
CSS PunsCSS Puns
.rich-people {
  top: 1%;
}

.working-class {
  bottom: 99%;
}
CSS PunsCSS Puns
.monarch {
  position: inherit;
}
CSS PunsCSS Puns
.ghost {
  opacity: 0.1;
  pointer-events: none;
}
CSS PunsCSS Puns
.glasses-lenses {
  clear: both;
  animation: wipe 5s;
}

.glasses-lenses:after {
  image-rendering: optimizeQuality;
}