{"id":16701086,"url":"https://github.com/scriptex/hilarious-css","last_synced_at":"2025-06-21T13:38:19.765Z","repository":{"id":90630924,"uuid":"159289140","full_name":"scriptex/hilarious-css","owner":"scriptex","description":"A curated list of CSS puns and jokes.","archived":false,"fork":false,"pushed_at":"2025-01-02T09:05:01.000Z","size":20,"stargazers_count":17,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-10T04:05:47.571Z","etag":null,"topics":["css","css-puns","fun","joke","jokes","pun","puns"],"latest_commit_sha":null,"homepage":"https://atanas.info/portfolio/open-source/hilarious-css","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scriptex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["scriptex"],"patreon":"atanas","open_collective":null,"ko_fi":"scriptex","tidelift":null,"community_bridge":null,"liberapay":"scriptex","issuehunt":"scriptex","otechie":null,"custom":["paypal.me/scriptex","revolut.me/scriptex"]}},"created_at":"2018-11-27T06:48:06.000Z","updated_at":"2025-01-27T08:34:32.000Z","dependencies_parsed_at":"2025-02-17T19:45:54.114Z","dependency_job_id":null,"html_url":"https://github.com/scriptex/hilarious-css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/scriptex/hilarious-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fhilarious-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fhilarious-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fhilarious-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fhilarious-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scriptex","download_url":"https://codeload.github.com/scriptex/hilarious-css/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fhilarious-css/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261130717,"owners_count":23114025,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-puns","fun","joke","jokes","pun","puns"],"created_at":"2024-10-12T18:28:32.715Z","updated_at":"2025-06-21T13:38:14.746Z","avatar_url":"https://github.com/scriptex.png","language":"CSS","readme":"# 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/)\n\nA curated list of CSS puns and jokes.\n\nThe 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).\n\nContributions are more than welcome.\n\nAll jokes and puns are also found in the `hilarious.css` file in this repository.\n\n## Visitor stats\n\n![GitHub stars](https://img.shields.io/github/stars/scriptex/hilarious-css?style=social)\n![GitHub forks](https://img.shields.io/github/forks/scriptex/hilarious-css?style=social)\n![GitHub watchers](https://img.shields.io/github/watchers/scriptex/hilarious-css?style=social)\n![GitHub followers](https://img.shields.io/github/followers/scriptex?style=social)\n\n## Puns\n\n```css\n#titanic {\n\tfloat: none;\n}\n```\n\n```css\n#bermuda-triangle {\n\tdisplay: none;\n}\n```\n\n```css\n.invisibility-cloak + #harry-potter {\n\tvisibility: hidden;\n}\n\n.invisibility-cloak + #mad-eye-moody {\n\tvisibility: visible !important;\n}\n```\n\n```css\n#usa + #mexico {\n\tborder: 1px dashed;\n}\n\n#usa[data-president~='Trump'] + #mexico {\n\tborder: 30ft solid;\n}\n```\n\n```css\n#europe .country:not(#uk) {\n\tborder: none;\n}\n```\n\n```css\n#china {\n\tborder-top-style: solid;\n}\n```\n\n```css\n.sniper-mode-engaged {\n\tcursor: crosshair;\n}\n```\n\n```css\n#bambis-mom {\n\tcursor: crosshair;\n\torphans: 1;\n}\n```\n\n```css\n#periodic {\n\tdisplay: table;\n}\n```\n\n```css\n#big-bang::before {\n\tcontent: '';\n}\n```\n\n```css\n#chuck-norris {\n\tcolor: #bada55;\n}\n```\n\n```css\n#nsa {\n\topacity: 1;\n}\n```\n\n```css\n#tower-of-pisa {\n\tfont-style: italic;\n}\n\n/* or */\n\n#tower-of-pisa {\n\ttransform: rotate(3.99deg);\n}\n```\n\n```css\n#australia {\n  transform: rotateY180deg);\n}\n```\n\n```css\n#bruce-banner {\n\tcolor: pink;\n\ttransition: color 10s;\n}\n\n#bruce-banner.the-hulk {\n\tcolor: green;\n}\n```\n\n```css\n#oliver-queen {\n\tcursor: arrow;\n}\n```\n\n```css\n.ninja {\n\tvisibility: hidden;\n\tcolor: black;\n}\n```\n\n```css\n.leprechaun {\n\theight: 20%;\n\tcolor: green;\n\tdisplay: none;\n}\n```\n\n```css\n.infinity-edge-pools {\n\toverflow: hidden;\n}\n```\n\n```css\n.obese {\n\twidth: 200%;\n\toverflow: visible;\n}\n```\n\n```css\n.muscles {\n\tdisplay: flex;\n}\n```\n\n```css\n.religious-upbringing {\n\tperspective: inherit;\n}\n```\n\n```css\n.yamama,\n.yomama,\n.yourmom,\n.yourmomma,\n.yourmother {\n\t/* Because she is a classy lady. */\n\twidth: 99999999px;\n}\n```\n\n```css\n#wife {\n\tright: 100%;\n\tmargin: 0%;\n}\n```\n\n```css\n#lego {\n\tdisplay: block;\n}\n```\n\n```css\n.hobbit {\n\theight: 50%;\n}\n\n.hobbit .foot {\n\twidth: 200%;\n}\n```\n\n```css\n.delorean {\n\tz-index: -1955;\n}\n```\n\n```css\n#fear {\n\tdisplay: none;\n}\n```\n\n```scss\n#usa \u003e .marijuana-laws {\n\t.federal {\n\t\tcursor: not-allowed !important;\n\n\t\t.state {\n\t\t\tcursor: wait;\n\n\t\t\t\u0026#AK,\n\t\t\t\u0026#CA,\n\t\t\t\u0026#CO,\n\t\t\t\u0026#ME,\n\t\t\t\u0026#MA,\n\t\t\t\u0026#NV,\n\t\t\t\u0026#OR,\n\t\t\t\u0026#WA {\n\t\t\t\tcursor: progress;\n\t\t\t}\n\t\t}\n\t}\n}\n```\n\n```css\n.single-lane-road {\n\twidth: auto;\n}\n```\n\n```css\n#samsung {\n\t@extend apple;\n}\n```\n\n```css\n#rip {\n\tbottom: -6912px; /* 6912px = 6 feet */\n}\n```\n\n```css\n.defibrillator {\n\tclear: both;\n}\n```\n\n```css\n.illuminati {\n\tposition: absolute;\n\tvisibility: hidden;\n}\n```\n\n```css\n.government {\n\ttransition: all 4yr ease-out;\n}\n```\n\n```css\n#autobots {\n\ttransform: translate3d();\n}\n```\n\n```css\n#ikea {\n\tdisplay: table;\n}\n```\n\n```css\n#moses \u003e #sea {\n\tcolumn-count: 2;\n}\n```\n\n```css\n.gangsta-rap {\n\tword-spacing: 0;\n}\n```\n\n```css\n.rich-people {\n\ttop: 1%;\n}\n\n.working-class {\n\tbottom: 99%;\n}\n```\n\n```css\n.monarch {\n\tposition: inherit;\n}\n```\n\n```css\n.ghost {\n\topacity: 0.1;\n\tpointer-events: none;\n}\n```\n\n```css\n.glasses-lenses {\n\tclear: both;\n\tanimation: wipe 5s;\n}\n\n.glasses-lenses::after {\n\timage-rendering: optimizeQuality;\n}\n```\n\n```css\n.internet-explorer {\n\tbreak-inside: auto;\n}\n```\n\n```css\n.kkk {\n\tcolor: white !important;\n}\n```\n\n```css\n.fat-woman .child {\n\twidth: inherit;\n}\n```\n\n```css\n.thumbs {\n\tvertical-align: top;\n}\n```\n\n```css\n.egg::before {\n\tcontent: 'chicken';\n}\n\n/* or */\n\n.chicken::before {\n\tcontent: 'egg';\n}\n```\n\n```css\n.concert {\n\twhite-space: nowrap;\n}\n```\n\n```css\n#berlin .wall {\n\theight: 0;\n}\n\n._1961-1989 #berlin .wall {\n\theight: 100%;\n}\n```\n\n```css\n.cat {\n\tbox-sizing: content-box;\n}\n```\n\n```css\n.table {\n\ttransform: rotate(180deg);\n\tanimation: \\(╯°□°）╯︵ ┻━┻ 1s;\n}\n\n.table.is--adjusted {\n\ttransform: rotate(0deg);\n\tanimation-name: ┬─┬ノ(ಠ_ಠノ);\n}\n```\n\n```css\n.jackson {\n\tcolor: black;\n}\n\n.jackson#janet {\n\tcolor: inherit;\n}\n\n.jackson#michael {\n\tcolor: white !important;\n}\n```\n\n```css\n.dragon-ball {\n\tz-index: 9001;\n}\n```\n\n```css\n.moonwalk {\n\ttransition: 0.2s ease-in-out;\n\ttransform: translateX(-300px);\n}\n```\n\n```css\n.quiet {\n\tfont-size: 0 !important;\n}\n```\n\n```css\n#neo {\n\ttransform: matrix(0, 1, 0, 1, 0, 1);\n}\n```\n\n```css\n.marxism {\n\ttext-transform: lowercase;\n}\n```\n\n```css\n.capitalism {\n\ttext-transform: uppercase;\n}\n```\n\n## LICENSE\n\nMIT\n\n---\n\n\u003cdiv align=\"center\"\u003e\n    Connect with me:\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://atanas.info\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/logo.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"mailto:hi@atanas.info\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/email.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.linkedin.com/in/scriptex/\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linkedin.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://github.com/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/github.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://gitlab.com/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/gitlab.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://twitter.com/scriptexbg\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/twitter.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.npmjs.com/~scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/npm.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.youtube.com/user/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/youtube.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://stackoverflow.com/users/4140082/atanas-atanasov\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/stackoverflow.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://codepen.io/scriptex/\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codepen.svg\" width=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://profile.codersrank.io/user/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codersrank.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://linktr.ee/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linktree.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\nSupport and sponsor my work:\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href=\"https://twitter.com/intent/tweet?text=Checkout%20this%20awesome%20developer%20profile%3A\u0026url=https%3A%2F%2Fgithub.com%2Fscriptex\u0026via=scriptexbg\u0026hashtags=software%2Cgithub%2Ccode%2Cawesome\" title=\"Tweet\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Tweet-Share_my_profile-blue.svg?logo=twitter\u0026color=38A1F3\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://paypal.me/scriptex\" title=\"Donate on Paypal\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Donate-Support_me_on_PayPal-blue.svg?logo=paypal\u0026color=222d65\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://revolut.me/scriptex\" title=\"Donate on Revolut\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/revolut.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://patreon.com/atanas\" title=\"Become a Patron\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Become_Patron-Support_me_on_Patreon-blue.svg?logo=patreon\u0026color=e64413\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://ko-fi.com/scriptex\" title=\"Buy Me A Coffee\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Donate-Buy%20me%20a%20coffee-yellow.svg?logo=ko-fi\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://liberapay.com/scriptex/donate\" title=\"Donate on Liberapay\"\u003e\n\t\u003cimg src=\"https://img.shields.io/liberapay/receives/scriptex?label=Donate%20on%20Liberapay\u0026logo=liberapay\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json\" title=\"Donate Bitcoin\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json\" title=\"Donate Etherium\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json\" title=\"Donate Shiba Inu\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json\" /\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\n","funding_links":["https://github.com/sponsors/scriptex","https://patreon.com/atanas","https://ko-fi.com/scriptex","https://liberapay.com/scriptex","https://issuehunt.io/r/scriptex","paypal.me/scriptex","revolut.me/scriptex","https://paypal.me/scriptex","https://liberapay.com/scriptex/donate"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptex%2Fhilarious-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscriptex%2Fhilarious-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptex%2Fhilarious-css/lists"}