{"id":3110,"date":"2022-06-01T14:09:00","date_gmt":"2022-06-01T14:09:00","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3110"},"modified":"2023-06-12T14:30:56","modified_gmt":"2023-06-12T14:30:56","slug":"css-tutorial-no-jank-css-stripes","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-no-jank-css-stripes\/","title":{"rendered":"CSS Tutorial – No-Jank CSS Stripes"},"content":{"rendered":"

Rengga Dev<\/strong><\/a> <\/span>-My mind goes immediately to repeating-linear-gradient\u00a0and\u00a0hard-stop gradients\u00a0when thinking of creating\u00a0stripes in CSS. You make one stripe by using the same color between two color stops, and another stripe (or more) but using a different color between two colors stops (sharing the one in the middle).<\/p>\n

So like:<\/p>\n

background: repeating-linear-gradient(\r\n  45deg,\r\n  black,\r\n  black 10px,\r\n  #444 10px,\r\n  #444 11px\r\n);<\/pre>\n
That will make angled dark gray stripes 10px apart on black.<\/p>\n
But this is how it renders on my screen:<\/p>\n
\"CSS
CSS Tutorial – No-Jank CSS Stripes<\/figcaption><\/figure>\n
Can you see that rendering jankiness where one or two of the stripes seems lighter and thinner than the others? I have no idea why. I assume it\u2019s something to do with sub-pixel rendering or the like. This is not hard to replicate. It\u2019s not just these two colors or this particular angle is just about any stripes created at all with\u00a0repeating-linear-gradient<\/code>. It stops being so noticeable with thicker stripes though (say,\u00a05px<\/code>\u00a0and thicker).<\/p>\n
So, what do you do?<\/h2>\n
Use this\u00a0nice little generator tool<\/a>\u00a0thing:<\/p>\n
\"Stripes
Stripes Generator<\/figcaption><\/figure>\n
It does whatever fancy math necessary to get it right. You can\u00a0see the unminified JavaScript here<\/a>. Search for\u00a0\/ GET BACKGROUND SIZE \/<\/code>\u00a0to see all the math going on. Whatever it\u2019s doing there, the stripes come out perfectly.<\/p>\n
Kind of a shame\u00a0repeating-linear-gradient<\/code>\u00a0doesn\u2019t have better visual output as that\u2019s so much easier to reason about, but hey, you gotta do what you gotta do.<\/p>\n","protected":false},"excerpt":{"rendered":"
Rengga Dev -My mind goes immediately to repeating-linear-gradient\u00a0and\u00a0hard-stop gradients\u00a0when thinking of creating\u00a0stripes <\/a><\/p>\n","protected":false},"author":1,"featured_media":3742,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,2],"tags":[268,294,197,103,227],"newstopic":[],"class_list":{"0":"post-3110","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-web-design","9":"tag-css-grid","10":"tag-css-stripes","11":"tag-css-tutorial","12":"tag-web-design","13":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3110","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3110"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3110\/revisions"}],"predecessor-version":[{"id":3114,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3110\/revisions\/3114"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3742"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3110"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}