CSS in Real Life (aka “CSS Puns”)

Let’s have some fun with CSS selectors, properties, and values. All the rule sets shown here contain valid CSS that represent things in real life. This has also been later referred to as “CSS puns”, which is not really a correct way to describe it, but for the record I was the first one to come up with this.

A few sensitive subjects represented here, but they’re not meant to cause offence. Just some CSS silliness. Enjoy.

.titanic {
  float: none;
}

.worldPeace .countries {
  border: transparent;
}

.cheapBicycleHelmet {
  padding: 0;
}

.oneGallonJar .twoGallonsOfWater {
  overflow: visible;
}

.weightWatchersClient {
  width: 100%;
}

.formerWeightWatchersClient {
  transform: scale(.8);
}

.badActor:first-line {
  visibility: hidden;
}

.JohnLennon {
  widows: 1;
}

.KurtCobain, .CourtneyLove {
  orphans: 1;
}

.atheist .president {
  position: absolute;
}

.religious .president {
  position: relative;
}

.wateredPlant {
  height: auto;
}

.CIA .agent {
  background: transparent;
}

.sniper {
  cursor: crosshair;
}

a.burglar:visited {
  behavior: url(stole-your-stuff.htc);
}

.Enron .profit {
  margin: -9999px;
}

.natural::selection {
  visibility: hidden;
}

49 Responses

  1. Michał Czernow says:
    :first-line {
      white-space: nowrap;
    }
    

    Unfortunately doesn’t work :P.

  2. Rian Ariona says:

    ha..ha LOL.. like it!

    .cheapBicycleHelmet {  
      padding: 0;  
    }  
    
  3. Renier says:

    that was very creative and hilarious!

  4. George Dina says:
    .titanic {  
      float: none;  
    }  
    

    Brilliant!

  5. Doug T says:

    How about THIS:

    .natural::selection {
      cursor: progress;
    }
    

    or

    .natural::selection {
      background-repeat: inherit;
    }
    
  6. Mike says:

    I love it! What a way to brighten up my dreary Monday morning. Thanks.

  7. Pablo says:

    JAJAJA GENIAL !

  8. Gerelt Od says:

    Most of them beautiful. Especially CIA :-)

  9. jivanshr says:

    very funny, I like most of them. List can be huge, I guess

  10. Piotr says:

    This is brilliant! :D

    .bottle-of-beer .party:before {
      content: normal;
    }
    

    and

    .bottle-of-beer .party:after {
      content: none;
    }
    
  11. Michael says:

    what about:

    .ninja {
      display: none;
    }
    

    ? :D

  12. AB says:

    Hahaha.. Amazing! :)

  13. Naveed says:

    Nice way to put stuff. :D

  14. Venkat says:

    Funny stuff. Loved it

  15. Daniel S says:

    I posted something related to this funny topic: Reallife CSS (Images) http://www.shiftedwork.de/blog/2010/09/24/reallife-css/

    Here is another one:

    .clothes {
      z-index: 1;
    }
    
  16. Mike says:
    .glass {
      opacity: 0.01; /* thought of 0, but that's not real */
    }
    
    .government {
      transition: all 4yr ease-out;
    }
    
    .ideal-job {
      stress: 0;
      richness: 100;
    }
    
    .good-looking .woman .passing-by {
      zoom: 200%;
    }
    
  17. DT says:

    Thank you! It’s funny

  18. Simon says:
    .mortgage .loan {  
      float: none;  
    } 
    
    .mortgage .loan {  
      position: fixed;
    }
    
  19. Matt says:
    .justin_bieber .talent { display: none; }
    
  20. Sue says:

    Here are a couple:

    .powerful { background: white url('privileged.jpg') repeat; }
    
    .diet { bottom: 50%; }
    

    OK so this one’s not supported in any browsers but here it is anyway:

    .drunk { rotation: 360deg; }
    

    This is great! There really isn’t enough comedy code in the world.

  21. haddnin says:
    .senate {
      left: 51%;
      right: 47%;
    }
    

    Not sure what to do with the 2 Independents.

  22. mohammed says:
    .Pisa {
      font-style: italic;
    }
    
  23. Val says:

    This is an awesome list. Here’s another

    .motivation .monday {
      display: none;
    }
    
  24. Nico says:
    .sleep::first-child {
      transition: all 1y ease-out;
    }
    
  25. Ming says:
    .virgin {
      margin: 0px;
      padding: 0px;
      background-color: pink;
    }
    
  26. Felipe says:
    @media (screen) {
      #deadPixel {
        position: fixed;
        top: 451px;
        left: 911px;
        color: lightgreen;
        /* would be some random color, width and height with LESS */
      }
    }
    
  27. sebastien says:
    #Helvetica_diet:before{font-weight:900;}
    
    #Helvetica_diet:after{font-weight:300:}
    
  28. KC says:
    .women .fat {
      display: none;
    }
    
  29. Ary Wibowo says:

    LOL :D

    .JohnLennon {  
        widows: 1;  
    }  
      
    .KurtCobain, .CourtneyLove {  
        orphans: 1;  
    }  
      
    .atheist .president {  
        position: absolute;  
    }  
      
    .religious .president {  
        position: relative;  
    }
  30. It’s so funny. :D
    Very cool!! ;)

  31. AntoxaGray says:
    .natural::selection {  
      color: #fff;
    }
    

    LOL

  32. AntoxaGray says:

    How about this?

    .tv {
       display: box;
    }
    
  33. Ady says:
    .my-grass {
      color: #90EE90;
    }
    
    .neighbours-grass {
      color: #008000;
    }
    

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).