├── .github └── FUNDING.yml ├── .gitignore ├── LICENSE ├── README.md ├── _.config.yml ├── _config.yml └── hilarious.css /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [scriptex] 4 | patreon: atanas 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: scriptex 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: scriptex 10 | issuehunt: scriptex 11 | otechie: # Replace with a single Otechie username 12 | custom: ['paypal.me/scriptex', 'revolut.me/scriptex'] 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Misc 2 | .DS_Store 3 | .DS_Store? 4 | ._* 5 | .Spotlight-V100 6 | .Trashes 7 | ehthumbs.db 8 | Thumbs.db 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018-Present Atanas Atanasov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hilarious CSS [![Analytics](https://ga-beacon-361907.ew.r.appspot.com/UA-83446952-1/github.com/scriptex/hilarious-css/README.md?pixel)](https://github.com/scriptex/hilarious-css/) 2 | 3 | A curated list of CSS puns and jokes. 4 | 5 | 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). 6 | 7 | Contributions are more than welcome. 8 | 9 | All jokes and puns are also found in the `hilarious.css` file in this repository. 10 | 11 | ## Visitor stats 12 | 13 | ![GitHub stars](https://img.shields.io/github/stars/scriptex/hilarious-css?style=social) 14 | ![GitHub forks](https://img.shields.io/github/forks/scriptex/hilarious-css?style=social) 15 | ![GitHub watchers](https://img.shields.io/github/watchers/scriptex/hilarious-css?style=social) 16 | ![GitHub followers](https://img.shields.io/github/followers/scriptex?style=social) 17 | 18 | ## Puns 19 | 20 | ```css 21 | #titanic { 22 | float: none; 23 | } 24 | ``` 25 | 26 | ```css 27 | #bermuda-triangle { 28 | display: none; 29 | } 30 | ``` 31 | 32 | ```css 33 | .invisibility-cloak + #harry-potter { 34 | visibility: hidden; 35 | } 36 | 37 | .invisibility-cloak + #mad-eye-moody { 38 | visibility: visible !important; 39 | } 40 | ``` 41 | 42 | ```css 43 | #usa + #mexico { 44 | border: 1px dashed; 45 | } 46 | 47 | #usa[data-president~='Trump'] + #mexico { 48 | border: 30ft solid; 49 | } 50 | ``` 51 | 52 | ```css 53 | #europe .country:not(#uk) { 54 | border: none; 55 | } 56 | ``` 57 | 58 | ```css 59 | #china { 60 | border-top-style: solid; 61 | } 62 | ``` 63 | 64 | ```css 65 | .sniper-mode-engaged { 66 | cursor: crosshair; 67 | } 68 | ``` 69 | 70 | ```css 71 | #bambis-mom { 72 | cursor: crosshair; 73 | orphans: 1; 74 | } 75 | ``` 76 | 77 | ```css 78 | #periodic { 79 | display: table; 80 | } 81 | ``` 82 | 83 | ```css 84 | #big-bang::before { 85 | content: ''; 86 | } 87 | ``` 88 | 89 | ```css 90 | #chuck-norris { 91 | color: #bada55; 92 | } 93 | ``` 94 | 95 | ```css 96 | #nsa { 97 | opacity: 1; 98 | } 99 | ``` 100 | 101 | ```css 102 | #tower-of-pisa { 103 | font-style: italic; 104 | } 105 | 106 | /* or */ 107 | 108 | #tower-of-pisa { 109 | transform: rotate(3.99deg); 110 | } 111 | ``` 112 | 113 | ```css 114 | #australia { 115 | transform: rotateY180deg); 116 | } 117 | ``` 118 | 119 | ```css 120 | #bruce-banner { 121 | color: pink; 122 | transition: color 10s; 123 | } 124 | 125 | #bruce-banner.the-hulk { 126 | color: green; 127 | } 128 | ``` 129 | 130 | ```css 131 | #oliver-queen { 132 | cursor: arrow; 133 | } 134 | ``` 135 | 136 | ```css 137 | .ninja { 138 | visibility: hidden; 139 | color: black; 140 | } 141 | ``` 142 | 143 | ```css 144 | .leprechaun { 145 | height: 20%; 146 | color: green; 147 | display: none; 148 | } 149 | ``` 150 | 151 | ```css 152 | .infinity-edge-pools { 153 | overflow: hidden; 154 | } 155 | ``` 156 | 157 | ```css 158 | .obese { 159 | width: 200%; 160 | overflow: visible; 161 | } 162 | ``` 163 | 164 | ```css 165 | .muscles { 166 | display: flex; 167 | } 168 | ``` 169 | 170 | ```css 171 | .religious-upbringing { 172 | perspective: inherit; 173 | } 174 | ``` 175 | 176 | ```css 177 | .yamama, 178 | .yomama, 179 | .yourmom, 180 | .yourmomma, 181 | .yourmother { 182 | /* Because she is a classy lady. */ 183 | width: 99999999px; 184 | } 185 | ``` 186 | 187 | ```css 188 | #wife { 189 | right: 100%; 190 | margin: 0%; 191 | } 192 | ``` 193 | 194 | ```css 195 | #lego { 196 | display: block; 197 | } 198 | ``` 199 | 200 | ```css 201 | .hobbit { 202 | height: 50%; 203 | } 204 | 205 | .hobbit .foot { 206 | width: 200%; 207 | } 208 | ``` 209 | 210 | ```css 211 | .delorean { 212 | z-index: -1955; 213 | } 214 | ``` 215 | 216 | ```css 217 | #fear { 218 | display: none; 219 | } 220 | ``` 221 | 222 | ```scss 223 | #usa > .marijuana-laws { 224 | .federal { 225 | cursor: not-allowed !important; 226 | 227 | .state { 228 | cursor: wait; 229 | 230 | &#AK, 231 | &#CA, 232 | &#CO, 233 | &#ME, 234 | &#MA, 235 | &#NV, 236 | &#OR, 237 | &#WA { 238 | cursor: progress; 239 | } 240 | } 241 | } 242 | } 243 | ``` 244 | 245 | ```css 246 | .single-lane-road { 247 | width: auto; 248 | } 249 | ``` 250 | 251 | ```css 252 | #samsung { 253 | @extend apple; 254 | } 255 | ``` 256 | 257 | ```css 258 | #rip { 259 | bottom: -6912px; /* 6912px = 6 feet */ 260 | } 261 | ``` 262 | 263 | ```css 264 | .defibrillator { 265 | clear: both; 266 | } 267 | ``` 268 | 269 | ```css 270 | .illuminati { 271 | position: absolute; 272 | visibility: hidden; 273 | } 274 | ``` 275 | 276 | ```css 277 | .government { 278 | transition: all 4yr ease-out; 279 | } 280 | ``` 281 | 282 | ```css 283 | #autobots { 284 | transform: translate3d(); 285 | } 286 | ``` 287 | 288 | ```css 289 | #ikea { 290 | display: table; 291 | } 292 | ``` 293 | 294 | ```css 295 | #moses > #sea { 296 | column-count: 2; 297 | } 298 | ``` 299 | 300 | ```css 301 | .gangsta-rap { 302 | word-spacing: 0; 303 | } 304 | ``` 305 | 306 | ```css 307 | .rich-people { 308 | top: 1%; 309 | } 310 | 311 | .working-class { 312 | bottom: 99%; 313 | } 314 | ``` 315 | 316 | ```css 317 | .monarch { 318 | position: inherit; 319 | } 320 | ``` 321 | 322 | ```css 323 | .ghost { 324 | opacity: 0.1; 325 | pointer-events: none; 326 | } 327 | ``` 328 | 329 | ```css 330 | .glasses-lenses { 331 | clear: both; 332 | animation: wipe 5s; 333 | } 334 | 335 | .glasses-lenses::after { 336 | image-rendering: optimizeQuality; 337 | } 338 | ``` 339 | 340 | ```css 341 | .internet-explorer { 342 | break-inside: auto; 343 | } 344 | ``` 345 | 346 | ```css 347 | .kkk { 348 | color: white !important; 349 | } 350 | ``` 351 | 352 | ```css 353 | .fat-woman .child { 354 | width: inherit; 355 | } 356 | ``` 357 | 358 | ```css 359 | .thumbs { 360 | vertical-align: top; 361 | } 362 | ``` 363 | 364 | ```css 365 | .egg::before { 366 | content: 'chicken'; 367 | } 368 | 369 | /* or */ 370 | 371 | .chicken::before { 372 | content: 'egg'; 373 | } 374 | ``` 375 | 376 | ```css 377 | .concert { 378 | white-space: nowrap; 379 | } 380 | ``` 381 | 382 | ```css 383 | #berlin .wall { 384 | height: 0; 385 | } 386 | 387 | ._1961-1989 #berlin .wall { 388 | height: 100%; 389 | } 390 | ``` 391 | 392 | ```css 393 | .cat { 394 | box-sizing: content-box; 395 | } 396 | ``` 397 | 398 | ```css 399 | .table { 400 | transform: rotate(180deg); 401 | animation: \(╯°□°）╯︵ ┻━┻ 1s; 402 | } 403 | 404 | .table.is--adjusted { 405 | transform: rotate(0deg); 406 | animation-name: ┬─┬ノ(ಠ_ಠノ); 407 | } 408 | ``` 409 | 410 | ```css 411 | .jackson { 412 | color: black; 413 | } 414 | 415 | .jackson#janet { 416 | color: inherit; 417 | } 418 | 419 | .jackson#michael { 420 | color: white !important; 421 | } 422 | ``` 423 | 424 | ```css 425 | .dragon-ball { 426 | z-index: 9001; 427 | } 428 | ``` 429 | 430 | ```css 431 | .moonwalk { 432 | transition: 0.2s ease-in-out; 433 | transform: translateX(-300px); 434 | } 435 | ``` 436 | 437 | ```css 438 | .quiet { 439 | font-size: 0 !important; 440 | } 441 | ``` 442 | 443 | ```css 444 | #neo { 445 | transform: matrix(0, 1, 0, 1, 0, 1); 446 | } 447 | ``` 448 | 449 | ```css 450 | .marxism { 451 | text-transform: lowercase; 452 | } 453 | ``` 454 | 455 | ```css 456 | .capitalism { 457 | text-transform: uppercase; 458 | } 459 | ``` 460 | 461 | ## LICENSE 462 | 463 | MIT 464 | 465 | --- 466 | 467 |
468 | Connect with me: 469 |
470 | 471 |
472 | 473 |
474 | 475 | 476 | 477 |   478 | 479 | 480 | 481 |   482 | 483 | 484 | 485 |   486 | 487 | 488 | 489 |   490 | 491 | 492 | 493 |   494 | 495 | 496 | 497 |   498 | 499 | 500 | 501 |   502 | 503 | 504 | 505 |   506 | 507 | 508 | 509 |   510 | 511 | 512 | 513 |   514 | 515 | 516 | 517 |   518 | 519 | 520 | 521 |
522 | 523 | --- 524 | 525 |
526 | Support and sponsor my work: 527 |
528 |
529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 |
558 | 559 | -------------------------------------------------------------------------------- /_.config.yml: -------------------------------------------------------------------------------- 1 | plugins: 2 | - jekyll-relative-links 3 | relative_links: 4 | enabled: true 5 | collections: true 6 | include: 7 | - CONTRIBUTING.md 8 | - README.md 9 | - LICENSE.md 10 | - COPYING.md 11 | - CODE_OF_CONDUCT.md 12 | - CONTRIBUTING.md 13 | - ISSUE_TEMPLATE.md 14 | - PULL_REQUEST_TEMPLATE.md 15 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-slate 2 | -------------------------------------------------------------------------------- /hilarious.css: -------------------------------------------------------------------------------- 1 | #titanic { 2 | float: none; 3 | } 4 | 5 | #bermuda-triangle { 6 | display: none; 7 | } 8 | 9 | .invisibility-cloak + #harry-potter { 10 | visibility: hidden; 11 | } 12 | 13 | .invisibility-cloak + #mad-eye-moody { 14 | visibility: visible !important; 15 | } 16 | 17 | #usa + #mexico { 18 | border: 1px dashed; 19 | } 20 | 21 | #usa[data-president~='Trump'] + #mexico { 22 | border: 30ft solid; 23 | } 24 | 25 | #europe .country:not(#uk) { 26 | border: none; 27 | } 28 | 29 | #china { 30 | border-top-style: solid; 31 | } 32 | 33 | .sniper-mode-engaged { 34 | cursor: crosshair; 35 | } 36 | 37 | #bambis-mom { 38 | cursor: crosshair; 39 | orphans: 1; 40 | } 41 | 42 | #periodic { 43 | display: table; 44 | } 45 | 46 | #big-bang::before { 47 | content: ''; 48 | } 49 | 50 | #chuck-norris { 51 | color: #bada55; 52 | } 53 | 54 | #nsa { 55 | opacity: 1; 56 | } 57 | 58 | #tower-of-pisa { 59 | font-style: italic; 60 | } 61 | /* or */ 62 | #tower-of-pisa { 63 | transform: rotate(3.99deg); 64 | } 65 | 66 | #australia { 67 | transform: rotateY180deg); 68 | } 69 | 70 | #bruce-banner { 71 | color: pink; 72 | transition: color 10s; 73 | } 74 | 75 | #bruce-banner.the-hulk { 76 | color: green; 77 | } 78 | 79 | #oliver-queen { 80 | cursor: arrow; 81 | } 82 | 83 | .ninja { 84 | visibility: hidden; 85 | color: black; 86 | } 87 | 88 | .leprechaun { 89 | height: 20%; 90 | color: green; 91 | display: none; 92 | } 93 | 94 | .infinity-edge-pools { 95 | overflow: hidden; 96 | } 97 | 98 | .obese { 99 | width: 200%; 100 | overflow: visible; 101 | } 102 | 103 | .muscles { 104 | display: flex; 105 | } 106 | 107 | .religious-upbringing { 108 | perspective: inherit; 109 | } 110 | 111 | .yamama, 112 | .yomama, 113 | .yourmom, 114 | .yourmomma, 115 | .yourmother { 116 | /* Because she is a classy lady. */ 117 | width: 99999999px; 118 | } 119 | 120 | #wife { 121 | right: 100%; 122 | margin: 0%; 123 | } 124 | 125 | #lego { 126 | display: block; 127 | } 128 | 129 | .hobbit { 130 | height: 50%; 131 | } 132 | 133 | .hobbit .foot { 134 | width: 200%; 135 | } 136 | 137 | .delorean { 138 | z-index: -1955; 139 | } 140 | 141 | #fear { 142 | display: none; 143 | } 144 | 145 | #usa > .marijuana-laws { 146 | .federal { 147 | cursor: not-allowed !important; 148 | 149 | .state { 150 | cursor: wait; 151 | 152 | &#AK, 153 | &#CA, 154 | &#CO, 155 | &#ME, 156 | &#MA, 157 | &#NV, 158 | &#OR, 159 | &#WA { 160 | cursor: progress; 161 | } 162 | } 163 | } 164 | } 165 | 166 | .single-lane-road { 167 | width: auto; 168 | } 169 | 170 | #samsung { 171 | @extend apple; 172 | } 173 | 174 | #rip { 175 | bottom: -6912px; /* 6912px = 6 feet */ 176 | } 177 | 178 | .defibrillator { 179 | clear: both; 180 | } 181 | 182 | .illuminati { 183 | position: absolute; 184 | visibility: hidden; 185 | } 186 | 187 | .government { 188 | transition: all 4yr ease-out; 189 | } 190 | 191 | #autobots { 192 | transform: translate3d(); 193 | } 194 | 195 | #ikea { 196 | display: table; 197 | } 198 | 199 | #moses > #sea { 200 | column-count: 2; 201 | } 202 | 203 | .gangsta-rap { 204 | word-spacing: 0; 205 | } 206 | 207 | .rich-people { 208 | top: 1%; 209 | } 210 | 211 | .working-class { 212 | bottom: 99%; 213 | } 214 | 215 | .monarch { 216 | position: inherit; 217 | } 218 | 219 | .ghost { 220 | opacity: 0.1; 221 | pointer-events: none; 222 | } 223 | 224 | .glasses-lenses { 225 | clear: both; 226 | animation: wipe 5s; 227 | } 228 | 229 | .glasses-lenses::after { 230 | image-rendering: optimizeQuality; 231 | } 232 | 233 | .internet-explorer { 234 | break-inside: auto; 235 | } 236 | 237 | .kkk { 238 | color: white !important; 239 | } 240 | 241 | .fat-woman .child { 242 | width: inherit; 243 | } 244 | 245 | .thumbs { 246 | vertical-align: top; 247 | } 248 | 249 | .egg::before { 250 | content: 'chicken'; 251 | } 252 | /* or */ 253 | .chicken::before { 254 | content: 'egg'; 255 | } 256 | 257 | .concert { 258 | white-space: nowrap; 259 | } 260 | 261 | #berlin .wall { 262 | height: 0; 263 | } 264 | 265 | ._1961-1989 #berlin .wall { 266 | height: 100%; 267 | } 268 | 269 | .cat { 270 | box-sizing: content-box; 271 | } 272 | 273 | .table { 274 | transform: rotate(180deg); 275 | animation: \(╯°□°）╯︵ ┻━┻ 1s; 276 | } 277 | 278 | .table.is--adjusted { 279 | transform: rotate(0deg); 280 | animation-name: ┬─┬ノ(ಠ_ಠノ); 281 | } 282 | 283 | .jackson { 284 | color: black; 285 | } 286 | 287 | .jackson#janet { 288 | color: inherit; 289 | } 290 | 291 | .jackson#michael { 292 | color: white !important; 293 | } 294 | 295 | .dragon-ball { 296 | z-index: 9001; 297 | } 298 | 299 | .moonwalk { 300 | transition: 0.2s ease-in-out; 301 | transform: translateX(-300px); 302 | } 303 | 304 | .quiet { 305 | font-size: 0 !important; 306 | } 307 | 308 | #neo { 309 | transform: matrix(0, 1, 0, 1, 0, 1); 310 | } 311 | --------------------------------------------------------------------------------