{"id":3816,"date":"2024-09-12T14:46:42","date_gmt":"2024-09-12T19:46:42","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3816"},"modified":"2024-09-12T15:50:23","modified_gmt":"2024-09-12T20:50:23","slug":"infinity-in-css","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/infinity-in-css\/","title":{"rendered":"Infinity in CSS"},"content":{"rendered":"\n

Will Boyd covers how there is an infinity<\/code> value baked into CSS<\/a>. Never lose a z-index<\/code> battle again<\/em>, heh. I enjoyed little tidbits like how you can’t animate to infinity because…<\/p>\n\n\n\n

\n

… there are no incremental values on the way to infinity. A fraction of infinity is still infinity. So for every frame of the animation, the animated value is infinity.<\/p>\n<\/blockquote>\n\n\n\n

I used one of Will’s ideas right after seeing it:<\/p>\n\n\n

border-radius<\/span>: calc<\/span>(infinity<\/span> * 1px<\/span>);<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Sadfunny: using infinity<\/code> broke the build on the project I used it on until I upgraded the version of PostCSS, which I hadn’t touched for a few years.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Will Boyd covers how there is an infinity value baked into CSS. Never lose a z-index battle again, heh. I enjoyed little tidbits like how you can’t animate to infinity because… … there are no incremental values on the way to infinity. A fraction of infinity is still infinity. So for every frame of the […]<\/p>\n","protected":false},"author":1,"featured_media":3817,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[7,239],"class_list":["post-3816","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-css","tag-infinity"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/09\/infinity-light-streaks.png?fit=800%2C430&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3816","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=3816"}],"version-history":[{"count":3,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3816\/revisions"}],"predecessor-version":[{"id":3820,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3816\/revisions\/3820"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/3817"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=3816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=3816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=3816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
This is when want that “pill shaped” button where the corners round as much as they can. You’d think 100%<\/code> would work there, but that does something very different with border-radius<\/code> (try it<\/a>). <\/p>\n\n\n\n\n\n\n\n