{"id":105557,"date":"2024-11-29T12:49:25","date_gmt":"2024-11-29T11:49:25","guid":{"rendered":"https:\/\/franktielemans.be\/blog\/?page_id=105557"},"modified":"2024-11-29T18:08:01","modified_gmt":"2024-11-29T17:08:01","slug":"css-polka-dots-background","status":"publish","type":"page","link":"https:\/\/franktielemans.be\/blog\/css-polka-dots-background\/","title":{"rendered":"CSS &#8211; Polka dots background"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"105557\" class=\"elementor elementor-105557\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2a07ae0 e-con-full e-flex e-con e-parent\" data-id=\"2a07ae0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5a926b7 e-flex e-con-boxed e-con e-parent\" data-id=\"5a926b7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2e9da72 elementor-widget elementor-widget-code-highlight\" data-id=\"2e9da72\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>selector {\r\n--d : 10%;\r\n--x : 50px;\r\n--bgcolor : #fff;\r\n--dotcolor: #000;\r\nbackground-color: var(--bgcolor);\r\nbackground-image: radial-gradient(circle, var(--dotcolor) var(--d), transparent var(--d) );\r\nbackground-size: var(--x) var(--x);\r\nbackground-position: 0 0;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b2fd254 e-con-full e-flex e-con e-parent\" data-id=\"b2fd254\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2c800b8 e-flex e-con-boxed e-con e-parent\" data-id=\"2c800b8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5a14d0d elementor-widget elementor-widget-code-highlight\" data-id=\"5a14d0d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp> selector {\n     --dotsize-1 : 10%;\n     --dotsize-1-color : white; \n     --dotsize-2 : 15%;\n     --dotsize-2-color : white;\n     --background-color : transparent;\n     --dist: 70px;\n \n  background-color: var(--background-color);\n    background-image: \n        radial-gradient(circle, var(--dotsize-1-color) var(--dotsize-1), transparent 05%),\n        radial-gradient(circle, var(--dotsize-2-color) var(--dotsize-2), transparent 10%);\n    background-size: var(--dist) var(--dist), var(--dist) var(--dist);\n    background-position: 0 0, calc(var(--dist) \/ 2 ) calc(var(--dist) \/ 2 );\n }<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-07d0cec e-con-full e-flex e-con e-parent\" data-id=\"07d0cec\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-81d23a7 e-con-full e-flex e-con e-child\" data-id=\"81d23a7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>selector { &#8211;d : 10%; &#8211;x : 50px; &#8211;bgcolor : #fff; &#8211;dotcolor: #000; background-color: var(&#8211;bgcolor); background-image: radial-gradient(circle, var(&#8211;dotcolor) var(&#8211;d), transparent var(&#8211;d) ); background-size: var(&#8211;x) var(&#8211;x); background-position: 0 0; } selector { &#8211;dotsize-1 : 10%; &#8211;dotsize-1-color : white; &#8211;dotsize-2 : 15%; &#8211;dotsize-2-color : white; &#8211;background-color : transparent; &#8211;dist: 70px; background-color: var(&#8211;background-color); background-image: radial-gradient(circle, var(&#8211;dotsize-1-color) var(&#8211;dotsize-1), transparent [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_oct_exclude_from_cache":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-105557","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages\/105557","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/comments?post=105557"}],"version-history":[{"count":0,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages\/105557\/revisions"}],"wp:attachment":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/media?parent=105557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/categories?post=105557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/tags?post=105557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}