{"id":5324,"date":"2023-07-19T22:51:46","date_gmt":"2023-07-20T03:51:46","guid":{"rendered":"https:\/\/www.incredigeek.com\/home\/?p=5324"},"modified":"2023-07-19T22:51:46","modified_gmt":"2023-07-20T03:51:46","slug":"css-tips","status":"publish","type":"post","link":"https:\/\/www.incredigeek.com\/home\/css-tips\/","title":{"rendered":"CSS Tips"},"content":{"rendered":"\n<p>Here is some simple CSS code snippets that I have found useful.<\/p>\n\n\n\n<p><strong>Disable over scroll effect<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-dark-gray-background-color has-background\"><code class=\"\">html {\n  overscroll-behavior: none\n}<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/overscroll-behavior\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/overscroll-behavior<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Radial gradient to cover all of the background<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-dark-gray-background-color has-background\"><code class=\"\">html {\n  width: 100vw;\n  min-height: 100vh;\n  background: radial-gradient(#676767, #232323);\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>Overlay that blurs and dims background<\/p>\n\n\n\n<pre class=\"wp-block-code has-dark-gray-background-color has-background\"><code class=\"\">.overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  background-color: rgba(0, 0, 0, 0.6);\n  backdrop-filter: blur(5px);\n  z-index: 7;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Here is some simple CSS code snippets that I have found useful. Disable over scroll effect https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/overscroll-behavior Radial gradient to cover all of the background Overlay that blurs and dims background<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[792],"tags":[1530,947,606,1534,1416,1533],"class_list":["post-5324","post","type-post","status-publish","format-standard","hentry","category-programming","tag-css","tag-html","tag-programming","tag-tips","tag-web","tag-web-dev"],"_links":{"self":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts\/5324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/comments?post=5324"}],"version-history":[{"count":1,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts\/5324\/revisions"}],"predecessor-version":[{"id":5325,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts\/5324\/revisions\/5325"}],"wp:attachment":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/media?parent=5324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/categories?post=5324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/tags?post=5324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}