CSS in Real Life

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.

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;
}

Advertise Here

46 Responses

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

    Unfortunately doesn’t work :P.

  2. ha..ha LOL.. like it!

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

    that was very creative and hilarious!

  4. 
    .titanic {  
    	float: none;  
    }  
    

    Brilliant!

  5. Doug T:

    How about THIS:

    
    .natural::selection {
         cursor: progress;
    }
    

    or

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

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

  7. Pablo:

    JAJAJA GENIAL !

  8. Gerelt Od:

    Most of them beautiful. Especially CIA :-)

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

  10. Piotr:

    This is brilliant! :D

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

    and

    
    .bottle-of-beer .party:after {
    	content: none;
    }
    
  11. what about:

    
    .ninja {
          display: none;
    }
    

    ? :D

  12. AB:

    Hahaha.. Amazing! :)

  13. Nice way to put stuff. :D

  14. Venkat:

    Funny stuff. Loved it

  15. 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:
    
    .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:

    Thank you! It’s funny

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

    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. 
    .senate {
    	left: 51%;
    	right: 47%;
    }
    

    Not sure what to do with the 2 Independents.

  22. mohammed:

    .Pisa{
    font-style: italic;
    }

  23. Val:

    This is an awesome list. Here’s another

    
    .motivation .monday {
        display: none;
    }
    
  24. Nico:
    
    .sleep::first-child {
        transition: all 1y ease-out;
    }
    
  25. Ming:
    
    .virgin {
    	margin:0px;
    	padding:0px;
    	background-color:pink;
    }
    
  26. 
    @media (screen) {
         #deadPixel {
              position: fixed;
              top: 451px;
              left: 911px;
              color: lightgreen;
        /* would be some random color, width and height with LESS */
         }
    }
    

  27. .spam {
    display: none;
    }

  28. sebastien:

    #Helvetica_diet:before{font-weight:900;}

    #Helvetica_diet:after{font-weight:300:}

  29. KC:

    .women .fat {
    display: none;
    }

  30. LOL :D

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

  32. .natural::selection {  
        color:#fff;
    } 

    LOL

  33. How about this?

    
    .tv{
    	display:box;
    }
  34. Ady:
    
    .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. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.