{"id":14,"date":"2026-04-02T08:06:13","date_gmt":"2026-04-02T08:06:13","guid":{"rendered":"https:\/\/codeart.au\/blogs\/?p=14"},"modified":"2026-04-02T08:08:43","modified_gmt":"2026-04-02T08:08:43","slug":"gingham","status":"publish","type":"post","link":"https:\/\/codeart.au\/blogs\/?p=14","title":{"rendered":"Gingham"},"content":{"rendered":"\n<p class=\"has-medium-font-size\">The gingham pattern is a timeless textile design defined by its simple checkered grid of alternating coloured and white squares.<\/p>\n\n\n\n<p class=\"has-medium-font-size\">Did you know that you can create this pattern using CSS code?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Gingham CSS Code<\/h2>\n\n\n\n<p class=\"has-medium-font-size\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">background-image: linear-gradient(90deg,rgba(60,120,180,0.15) 50%,transparent 50%), linear-gradient(rgba(60, 120, 180, 0.15) 50%,transparent 50%);<br>background-size: 50px 50px;<\/mark><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How it works<\/h2>\n\n\n\n<p class=\"has-medium-font-size\">This is two separate background layers, separated by a comma.<\/p>\n\n\n\n<p class=\"has-medium-font-size\">Each gradient paints a rectangular colour block (first 50%) and then a transparent block (second 50%). When you stack them and adjust background-size \/ background-position, you get a checkerboard or grid-like pattern.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"100\" height=\"100\" src=\"https:\/\/codeart.au\/blogs\/wp-content\/uploads\/2026\/04\/gingham-layer1.jpg\" alt=\"The result is a vertical bar of colour on the left half, and a transparent bar on the right half. When repeated this forms vertical banding (stripes).\" class=\"wp-image-15\" style=\"width:99px;height:auto\"\/><\/figure>\n\n\n\n<p class=\"has-medium-font-size\">The first gradient is the horizontal (default) stripes rotated 90 degrees to form vertical stripes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"100\" height=\"100\" src=\"https:\/\/codeart.au\/blogs\/wp-content\/uploads\/2026\/04\/gingham-layer2.jpg\" alt=\"The result is a horizontal bar of colour on the top half, and a transparent bar on the bottom half. Repeated this forms horizontal banding (stripes).\" class=\"wp-image-16\"\/><\/figure>\n\n\n\n<p class=\"has-medium-font-size\">The second gradient is the vertical stripes running in the default direction.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Together<\/h2>\n\n\n\n<p class=\"has-medium-font-size\">When you stack them as separate background layers and add a background-size:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">You get:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\">Layer 1: vertical 50\/50 split<\/li>\n\n\n\n<li class=\"has-medium-font-size\">Layer 2: horizontal 50\/50 split<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"100\" height=\"100\" src=\"https:\/\/codeart.au\/blogs\/wp-content\/uploads\/2026\/04\/gingham.jpg\" alt=\"Repeated, these two overlapped layers create a grid or checker pattern. The overlapping blue parts make a cross pattern; the transparent parts show the background colour below.\" class=\"wp-image-17\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The gingham pattern is a timeless textile design defined by its simple checkered grid of alternating coloured and white squares. Did you know that you can create this pattern using CSS code? Gingham CSS Code background-image: linear-gradient(90deg,rgba(60,120,180,0.15) 50%,transparent 50%), linear-gradient(rgba(60, 120, 180, 0.15) 50%,transparent 50%);background-size: 50px 50px; How it works This is two separate background [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,3],"tags":[10,9,6,11,7,12,5,8],"class_list":["post-14","post","type-post","status-publish","format-standard","hentry","category-css-code","category-patterns","tag-code-art","tag-codeart","tag-css","tag-gingham","tag-linear-gradient","tag-pattern","tag-patterns","tag-radial-gradient","entry"],"_links":{"self":[{"href":"https:\/\/codeart.au\/blogs\/index.php?rest_route=\/wp\/v2\/posts\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeart.au\/blogs\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeart.au\/blogs\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeart.au\/blogs\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeart.au\/blogs\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":2,"href":"https:\/\/codeart.au\/blogs\/index.php?rest_route=\/wp\/v2\/posts\/14\/revisions"}],"predecessor-version":[{"id":19,"href":"https:\/\/codeart.au\/blogs\/index.php?rest_route=\/wp\/v2\/posts\/14\/revisions\/19"}],"wp:attachment":[{"href":"https:\/\/codeart.au\/blogs\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeart.au\/blogs\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=14"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeart.au\/blogs\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}