{"id":373167,"date":"2022-09-20T06:19:24","date_gmt":"2022-09-20T13:19:24","guid":{"rendered":"https:\/\/css-tricks.com\/?p=373167"},"modified":"2022-09-20T06:19:25","modified_gmt":"2022-09-20T13:19:25","slug":"css-checkerboard-background-but-with-rounded-corners-and-hover-styles","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-checkerboard-background-but-with-rounded-corners-and-hover-styles\/","title":{"rendered":"CSS Checkerboard Background&#8230; But With Rounded Corners and Hover Styles"},"content":{"rendered":"\n<p>On one hand, creating simple checkered backgrounds with CSS is easy. On the other hand, though, unless we are one of the CSS-gradient-ninjas, we are kind of stuck with basic patterns.<\/p>\n\n\n\n<p>At least that\u2019s what I thought while staring at the checkered background on my screen and trying to round those corners of the squares just a little\u2026until I remembered my favorite bullet point glyph \u2014 <code>\u2726<\/code> \u2014 and figured that if only I could place it over every intersection in the pattern, I\u2019ll surely get the design I want.<\/p>\n\n\n\n<p>Turns out it&#8217;s possible! Here\u2019s the proof.<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKoOOGv\" src=\"\/\/codepen.io\/anon\/embed\/KKoOOGv?height=550&amp;theme-id=1&amp;slug-hash=KKoOOGv&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKoOOGv\" title=\"CodePen Embed KKoOOGv\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Let\u2019s start with the basic pattern:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div>&lt;\/div><\/code><\/pre>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">div {\n background: \n  repeating-linear-gradient(\n    to right, transparent, \n    transparent 50px, \n    white 50px, \n    white 55px\n  ),\n  repeating-linear-gradient(\n    to bottom, transparent,  \n    transparent 50px, \n    white 50px, \n    white 55px\n  ),\n  linear-gradient(45deg, pink, skyblue);\n  \/* more styles *\/\n}<\/code><\/pre>\n\n\n\n<p>What that gives us is a repeating background of squares that go from pink to blue with <code>5px<\/code> white gaps between them. Each square is fifty pixels wide and transparent. This is created using <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-css-gradients\/#h-repeating-gradients\"><code>repeating-linear-gradient<\/code><\/a>, which creates a linear gradient image where the gradient repeats throughout the containing area.<\/p>\n\n\n\n<p>In other words, the first gradient in that sequence creates white horizontal stripes and the second gradient creates white vertical stripes. Layered together, they form the checkered pattern, and the third gradient fills in the rest of the space.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abGzjrd\" src=\"\/\/codepen.io\/anon\/embed\/abGzjrd?height=550&amp;theme-id=1&amp;slug-hash=abGzjrd&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abGzjrd\" title=\"CodePen Embed abGzjrd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now we add the star glyph I mentioned earlier, on top of the background pattern. We can do that by including it on the same <code>background<\/code> property as the gradients while using an encoded SVG for the shape:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"4,5,6,7,8,9,10\"><code markup=\"tt\">div {\n  background: \n    repeat left -17px top -22px\/55px 55px\n    url(\"data:image\/svg+xml,\n    &lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 35px 35px'>\n      &lt;foreignObject width='35px' height='35px'>\n        &lt;div xmlns='http:\/\/www.w3.org\/1999\/xhtml' style='color: white; font-size: 35px'>\u2726&lt;\/div>\n      &lt;\/foreignObject>\n    &lt;\/svg>\"\n    ), \n    repeating-linear-gradient(\n      to right, transparent,\n      transparent 50px,\n      white 50px,\n      white 55px\n    ),\n    repeating-linear-gradient(\n      to bottom, transparent,\n      transparent 50px,\n      white 50px,\n      white 55px\n    ),\n    linear-gradient(45deg, pink, skyblue);\n  \/* more style *\/\n}<\/code><\/pre>\n\n\n\n<p>Let\u2019s break that down. The first keyword, <code>repeat<\/code>, denotes that this is a repeating background image. Followed by that is the position and size of each repeating unit, respectively (<code>left -17px top -22px\/55px 55px<\/code>). This offset position is based on the glyph and pattern\u2019s size. You\u2019ll see below how the glyph size is given. The offset is added to re-position the repeating glyph exactly over each intersection in the checkered pattern.<\/p>\n\n\n\n<p>The SVG has an HTML <code>&lt;div&gt;<\/code> carrying the glyph. Notice that I declared a <code>font-size<\/code> on it. That ultimately determines the border radius of the squares in the checkerboard pattern \u2014 the bigger the glyph, the more rounded the squares. The unrolled SVG from the data URL looks like this:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 35px 35px'>\n  &lt;foreignObject width='35px' height='35px'>\n    &lt;div xmlns='http:\/\/www.w3.org\/1999\/xhtml' style='color:white;font-size:35px'>\u2726&lt;\/div>\n  &lt;\/foreignObject>\n&lt;\/svg><\/code><\/pre>\n\n\n\n<p>Now that a CSS pattern is established, let\u2019s add a <code>:hover<\/code> effect where the glyph is removed and the white lines are made slightly translucent by using <code>rgb()<\/code> color values with alpha transparency.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">div:hover {\n  background:\n    repeating-linear-gradient(\n      to right, transparent,\n      transparent 50px,\n      rgb(255 255 255 \/ 0.5) 50px,\n      rgb(255 255 255 \/ 0.5) 55px\n    ),\n    repeating-linear-gradient(\n      to bottom, transparent,\n      transparent 50px,\n      rgb(255 255 255 \/ 0.5) 50px,\n      rgb(255 255 255 \/ 0.5) 55px\n    ),\n  linear-gradient(45deg, pink, skyblue);\n  box-shadow: 10px 10px 20px pink;\n}<\/code><\/pre>\n\n\n\n<p>There we go! Now, not only do we have our rounded corners, but we also have more control control over the pattern for effects like this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKoOOGv\" src=\"\/\/codepen.io\/anon\/embed\/KKoOOGv?height=600&amp;theme-id=1&amp;slug-hash=KKoOOGv&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKoOOGv\" title=\"CodePen Embed KKoOOGv\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Again, this whole exercise was an attempt to get a grid of squares in a checkerboard pattern that supports rounded corners, a background gradient that serves as an overlay across the pattern, and interactive styles. I think this accomplishes the task quite well, but I\u2019m also interested in how you might\u2019ve approached it. Let me know in the comments!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>On one hand, creating simple checkered backgrounds with CSS is easy. On the other hand, though, unless we are one of the CSS-gradient-ninjas, we are kind of stuck with basic patterns. At least that\u2019s what I thought while staring at the checkered background on my screen and trying to round those corners of the squares [&hellip;]<\/p>\n","protected":false},"author":250902,"featured_media":373171,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"CSS Checkerboard Background... But With Rounded Corners and Hover Styles by @rpsthecoder","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1083,1027,1157,1201],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/checkerboard-gradient.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":312443,"url":"https:\/\/css-tricks.com\/creative-background-patterns-using-gradients-css-shapes-and-even-emojis\/","url_meta":{"origin":373167,"position":0},"title":"Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis","date":"June 10, 2020","format":false,"excerpt":"You can create stripes in CSS. That\u2019s all I thought about in terms of CSS background patterns for a long time. There\u2019s nothing wrong with stripes; stripes are cool. They can be customized into wide and narrow bands, criss-crossed into a checked pattern, and played with in other ways using\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/surfer-pattern.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":307270,"url":"https:\/\/css-tricks.com\/background-patterns-simplified-by-conic-gradients\/","url_meta":{"origin":373167,"position":1},"title":"Background Patterns, Simplified by Conic Gradients","date":"May 28, 2020","format":false,"excerpt":"For those who have missed the big news, Firefox now supports conic gradients! Starting with Firefox 75, released on the April 7, we can go to about:config, look for the layout.css.conic-gradient.enabled flag and set its value to true (it's false by default and all it takes to switch is double-clicking\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":325536,"url":"https:\/\/css-tricks.com\/css-background-patterns\/","url_meta":{"origin":373167,"position":2},"title":"CSS Background Patterns","date":"November 16, 2020","format":false,"excerpt":"Nice little tool from Jim Raptis: CSS Background Patterns. A bunch of easy-to-customize and copy-and-paste backgrounds that use hard stop CSS gradients to make classy patterns. Not quite as flexible as SVG backgrounds, but just as lightweight. Like this: CodePen Embed Fallback Speaking of cool background gradient tricks, check out\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-3.58.15-PM.png?fit=1200%2C916&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325490,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-css-gradients\/","url_meta":{"origin":373167,"position":3},"title":"A Complete Guide to CSS Gradients","date":"November 16, 2020","format":false,"excerpt":"Like how you can use the background-color property in CSS to declare a solid color background, you can use the background-image property not only to declare image files as backgrounds but gradients as well. Using CSS gradients is better for control and performance than using an actual image (of a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/css-gradient.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":374697,"url":"https:\/\/css-tricks.com\/some-links-about-css-gradients\/","url_meta":{"origin":373167,"position":4},"title":"Some Links About CSS Gradients","date":"November 2, 2022","format":false,"excerpt":"Every once in a while, the blogging zeitgiest seems to coalesce around a certain topic and it's like the saved articles in my bookmarks folder are having a conversation. The conversation sitting in there now is all about CSS Gradients and I thought I'd link some of the more interesting\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/cloud-four-gradient.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":362018,"url":"https:\/\/css-tricks.com\/css-borders-using-masks\/","url_meta":{"origin":373167,"position":5},"title":"Fancy\u00a0CSS Borders Using Masks\u00a0(Zig-Zag,\u00a0Wavy, and More)","date":"January 26, 2022","format":false,"excerpt":"Have you ever tried to make CSS borders in a repeating zig-zag pattern? Like where a colored section of a website ends and another differently colored section begins \u2014 not with a straight line, but angled zig zags, rounded humps, or waves. There are a number of ways you could\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/fancy-borders.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/373167"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/250902"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=373167"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/373167\/revisions"}],"predecessor-version":[{"id":373554,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/373167\/revisions\/373554"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/373171"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=373167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=373167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=373167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}