https://github.com/scriptex/hilarious-css
A curated list of CSS puns and jokes.
https://github.com/scriptex/hilarious-css
css css-puns fun joke jokes pun puns
Last synced: 4 months ago
JSON representation
A curated list of CSS puns and jokes.
- Host: GitHub
- URL: https://github.com/scriptex/hilarious-css
- Owner: scriptex
- License: mit
- Created: 2018-11-27T06:48:06.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2025-01-02T09:05:01.000Z (9 months ago)
- Last Synced: 2025-04-10T04:05:47.571Z (6 months ago)
- Topics: css, css-puns, fun, joke, jokes, pun, puns
- Language: CSS
- Homepage: https://atanas.info/portfolio/open-source/hilarious-css
- Size: 19.5 KB
- Stars: 17
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Hilarious CSS [](https://github.com/scriptex/hilarious-css/)
A curated list of CSS puns and jokes.
The list is based on [this Reddit thread](https://www.reddit.com/r/web_design/comments/2nxdb8/css_puns_can_you_come_up_with_more/), [this DesignerNews thread](https://www.designernews.co/stories/39607-life-saver-css-code) and the [awesome website](https://saijogeorge.com/css-puns/steamy-glasses/) created by [Saijo George](https://twitter.com/SaijoGeorge).
Contributions are more than welcome.
All jokes and puns are also found in the `hilarious.css` file in this repository.
## Visitor stats
## Puns
```css
#titanic {
float: none;
}
```
```css
#bermuda-triangle {
display: none;
}
```
```css
.invisibility-cloak + #harry-potter {
visibility: hidden;
}
.invisibility-cloak + #mad-eye-moody {
visibility: visible !important;
}
```
```css
#usa + #mexico {
border: 1px dashed;
}
#usa[data-president~='Trump'] + #mexico {
border: 30ft solid;
}
```
```css
#europe .country:not(#uk) {
border: none;
}
```
```css
#china {
border-top-style: solid;
}
```
```css
.sniper-mode-engaged {
cursor: crosshair;
}
```
```css
#bambis-mom {
cursor: crosshair;
orphans: 1;
}
```
```css
#periodic {
display: table;
}
```
```css
#big-bang::before {
content: '';
}
```
```css
#chuck-norris {
color: #bada55;
}
```
```css
#nsa {
opacity: 1;
}
```
```css
#tower-of-pisa {
font-style: italic;
}
/* or */
#tower-of-pisa {
transform: rotate(3.99deg);
}
```
```css
#australia {
transform: rotateY180deg);
}
```
```css
#bruce-banner {
color: pink;
transition: color 10s;
}
#bruce-banner.the-hulk {
color: green;
}
```
```css
#oliver-queen {
cursor: arrow;
}
```
```css
.ninja {
visibility: hidden;
color: black;
}
```
```css
.leprechaun {
height: 20%;
color: green;
display: none;
}
```
```css
.infinity-edge-pools {
overflow: hidden;
}
```
```css
.obese {
width: 200%;
overflow: visible;
}
```
```css
.muscles {
display: flex;
}
```
```css
.religious-upbringing {
perspective: inherit;
}
```
```css
.yamama,
.yomama,
.yourmom,
.yourmomma,
.yourmother {
/* Because she is a classy lady. */
width: 99999999px;
}
```
```css
#wife {
right: 100%;
margin: 0%;
}
```
```css
#lego {
display: block;
}
```
```css
.hobbit {
height: 50%;
}
.hobbit .foot {
width: 200%;
}
```
```css
.delorean {
z-index: -1955;
}
```
```css
#fear {
display: none;
}
```
```scss
#usa > .marijuana-laws {
.federal {
cursor: not-allowed !important;
.state {
cursor: wait;
AK,
CA,
CO,
ME,
MA,
NV,
OR,
WA {
cursor: progress;
}
}
}
}
```
```css
.single-lane-road {
width: auto;
}
```
```css
#samsung {
@extend apple;
}
```
```css
#rip {
bottom: -6912px; /* 6912px = 6 feet */
}
```
```css
.defibrillator {
clear: both;
}
```
```css
.illuminati {
position: absolute;
visibility: hidden;
}
```
```css
.government {
transition: all 4yr ease-out;
}
```
```css
#autobots {
transform: translate3d();
}
```
```css
#ikea {
display: table;
}
```
```css
#moses > #sea {
column-count: 2;
}
```
```css
.gangsta-rap {
word-spacing: 0;
}
```
```css
.rich-people {
top: 1%;
}
.working-class {
bottom: 99%;
}
```
```css
.monarch {
position: inherit;
}
```
```css
.ghost {
opacity: 0.1;
pointer-events: none;
}
```
```css
.glasses-lenses {
clear: both;
animation: wipe 5s;
}
.glasses-lenses::after {
image-rendering: optimizeQuality;
}
```
```css
.internet-explorer {
break-inside: auto;
}
```
```css
.kkk {
color: white !important;
}
```
```css
.fat-woman .child {
width: inherit;
}
```
```css
.thumbs {
vertical-align: top;
}
```
```css
.egg::before {
content: 'chicken';
}
/* or */
.chicken::before {
content: 'egg';
}
```
```css
.concert {
white-space: nowrap;
}
```
```css
#berlin .wall {
height: 0;
}
._1961-1989 #berlin .wall {
height: 100%;
}
```
```css
.cat {
box-sizing: content-box;
}
```
```css
.table {
transform: rotate(180deg);
animation: \(╯°□°）╯︵ ┻━┻ 1s;
}
.table.is--adjusted {
transform: rotate(0deg);
animation-name: ┬─┬ノ(ಠ_ಠノ);
}
```
```css
.jackson {
color: black;
}
.jackson#janet {
color: inherit;
}
.jackson#michael {
color: white !important;
}
```
```css
.dragon-ball {
z-index: 9001;
}
```
```css
.moonwalk {
transition: 0.2s ease-in-out;
transform: translateX(-300px);
}
```
```css
.quiet {
font-size: 0 !important;
}
```
```css
#neo {
transform: matrix(0, 1, 0, 1, 0, 1);
}
```
```css
.marxism {
text-transform: lowercase;
}
```
```css
.capitalism {
text-transform: uppercase;
}
```
## LICENSE
MIT
---
Connect with me:
---
Support and sponsor my work:
