CSS Puns – My Collection

This is Day 16 in the 30 Day Blogging Challenge. You can read Day 15’s post here.

This post is inspired by Saijo George’s site, CSS Puns, a jokey collection of CSS rules that may bear some resemblance to real life.

Check out the original post above and my versions below.

#driver .uk {
float: left;
}

#driver .usa {
float: right;
}

#wookiee {
color: brown;
height: 120%;
voice-volume: x-loud;
}

#yoda {
color: green;
height: 25%;
}

#newspaper .guardian .uk {
text-align: left;
}

#newspaper .telegraph .uk {
text-align: right;
}

#pamela-anderson {
padding-top: 30%;
}

#kim-kardashian {
padding-bottom: 20%;
}

.kd-lang {
text-transform: lowercase;
}

.acropolis .parthenon {
column-count: 46;
}

#alice .wonderland .eat-me {
height: 200%;
}

#alice .wonderland .drink-me {
height: 10%;
}

With a little help from Hex Words:

.toilet {
background: #FAECE5;
}

footer .scotland.new-year:first-of-type {
height: 110%;
color: black;
}

#scotland .independence-referendum { 
border: dashed; 
}

.beach {
background: seashell;
}

#alcoholic {
tab-size: 500;
}

.moon .day {
visibility: hidden;
}

.moon .night {
visibility: visible;
}

#50-shades {
color: gray;
}

#50-shades .handcuffs {
position: fixed;
}

#liar {
word-break: break-all;
}

.cartoon .hanna-barbera {
background-repeat: repeat-x;
}

.cartoon-character .mrs-incredible {
align-self: stretch;
}

#lord-lucan {
visibility: hidden;
}

.jennifer-lawrence {
visibility: visible;
}

#shopping-trolley .canal {
float: none;
}

Category: Websites Tags: 30 day blogging challenge, CSS, fun